Code Highlighting and Marked Preview Styles in nvALT
Posted on by Chris
Everyone loves nvALT, but the markdown preview you get out of the box isn’t anything special. Although there are some instructions on customizing the markdown preview in nvALT, he doesn’t go into specifics about where to find new styles or exactly how to import them.
Personally, I like the previews that I get in Marked, another one of Brett Terpstra’s creations. Knowing that the markdown preview styles are stored in a plain CSS file in nvALT, I figured it was the same for Marked.
The first place I looked was in ~/Library/Application Support/Marked, but I only found a Custom CSS folder that stored all of the custom stylesheets I had added. This makes sense since these are user settings. The core styles that aren’t editable by the user came with the application, which is why I checked the package contents of the application next, this is where I found the CSS files.
You can view the package contents by going to the `Marked.app` file, right-clicking and selecting “Show Package Contents”.
I opened up github.css, copied the entire stylesheet and brought it over to my ~/Library/Application Support/Notational Velocity/custom.css file for nvALT. I restarted the program selected a different note (thanks Brett) and the new styles were live!
Further Customizations
If you look in the ~/Library/Application Support/Notational Velocity directory, you’ll notice that the template for the markdown preview is actually just an HTML file. As you can see, jQuery is being loaded from the Google CDN, so you should be able to import any external JS/CSS you’d like.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>I haven’t played around with this much yet, but I did setup highlight.js to provide code highlighting. All I had to do was include a JS and CSS file from the download instructions and then call the init method. You can copy and paste the following code right above the </head> of your template file if you want to use it too.
// Notice I use the GitHub highlight.js theme here
<link rel="stylesheet" href="http://yandex.st/highlightjs/6.1/styles/github.min.css">
<script src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>As you can see, since this is just HTML and CSS, it is easy to customize. Just remember that any changes you make won’t be visible until after you restart the program select a different note.
14 Responses to: Code Highlighting and Marked Preview Styles in nvALT
Brett Terpstra says: I swear I put the whole collection of Marked default CSS somewhere on the support site, but now I can’t find it either. Glad you’re resourceful.
By the way, just switching notes and switching back in nvALT causes it to reload the template, so you don’t need to restart while you’re playing around with it 
.
Brett, thanks for the tip! I will revise accordingly.
I haven’t done much with Mac programming, but I never realized you could use HTML/CSS/JS like that in your apps. Are those assets just being loaded in a web view?
Thank you for swinging by and commenting. I really appreciate all of the work you’ve put into nvALT and am a big fan of all the things you do!
Sorry I didn’t get back to you earlier. For some reason your comment got flagged as spam by Akismet – not sure what’s up with that.
[...] pages. Also led me to discover NinjaKit.Fullscreen Background Image Slideshow with CSS3Pretty sweet.Code Highlighting and Marked Preview Styles in nvALTThis works really, really well. Thanks Chris!impress.js | presentation tool based on the power of [...]
Kristan says: Thanks for the tip.. but somehow I can’t get it working.
I’ve pasted the code in.. but nothing has changed.
This is the worst thing that has ever happened in my *life*!
So how can I troubleshoot this? Because I loved NV .. I’m loving NValt even more .. and if I could get code highlighting in there somewhere I may just ask NValt to marry me.
Kristen, it’s hard to troubleshoot why this wouldn’t be working for you without more details. Could you package up the files in you Application Support directory and provide a link to download them?
Kristan says: Hey thank you for the time! I cant imagine it is very tricky, but I only have front end experience so any troubleshooting I try for this kind of stuff is pretty much “shot in the dark” style. I have zipped up my App support directory and will email to you.
If I could get code highlighting to work I think I would be able to use NValt as my snippet box as well, which I would really really like. Really.
thx again!
Marc T says: I am a new user to MMD and nvAlt. For some reason, there is no Notational Velocity folder in the Application Support folder. Any suggestions about what to do? Thanks.
Hey Marc, are you sure that you are looking in the user’s directory, not the root? There is an Application Support folder under each of those. If there really isn’t one there, I’m not sure what to tell you. I’ve compressed my Notational Velocity directory and its contents, you can try dropping it into your Application Support directory if you’d like. Here’s a link http://cl.ly/0Y1t3P2X121R1p3B1f2Q
OMG I’m so glad I stumbled upon your post.
I’ve been using notational velocity since I subscribed to simple note some two years ago and just forgot about it. I both discovered nvAlt (and Brett Terpstra’s work, of which I just bought two apps !).
Being able to visualize simple note notes with a clean markdown preview, and all the more with code highlighting ! Well , I owe you a beer.
How is the code highlighting supposed to work? I’ve been able to get the Marked CSS stylesheet active, but I’m not sure how to make the code highlighting viewable. Does it only apply to and blocks inside the note?
Yeah, code highlighting will only occur in code blocks. You can indent every line of a block with 4 spaces or a tab to make a code block. I’m not sure if inline code blocks (surrounded by backticks `) get any highlighting.