Customizing the nvALT preview

I got bored with my nvALT preview style. I’ve been using a GitHub style forever now, and it’s great for just about every situation. Clean, crisp, legible… still, I needed a break. I based a new custom style on work that my friend, Erik Sagen, did for the next version of Marked. I made some tweaks for my own tastes, and added some JavaScript tricks to it.

I’m sharing the result with the world. It’s free for unlimited use with nvALT. You can even freely share documents exported with it, but I request that you not re-purpose the stylesheet itself for any other use without permission.

This is ultimately a demonstration of what a little CSS and JavaScript can do for nvALT’s custom template engine. Of course, it’s all easier and more flexible if you use Marked, but there’s still fun to be had. Hopefully it will inspire some other creations. If you’re handy with a little CSS (and optionally JavaScript/jQuery), it’s a simple system to play with¹. Dig in and see how it works, then make something awesome.

Here’s a preview of the style:

Here’s what you get

• A slightly modified Lopash theme from the upcoming version of Marked, complete with custom web fonts.
• Automatic highlighting of code blocks with highlight.js
• A basic implementation of Widon’t for headlines.
• Smooth scrolling when clicking footnotes and anchors.
• A “back to top” link that appears when scrolling down a note.

What you don’t get

You don’t get the promise of a perfect, polished style. It will need some iterations, but it’s easy to update. Feel free to report any style or scripting issues you run into with it. I’ll do my best to fix things that are definitely broken.

Installation

Installation is really, really simple. You don’t even have to play around in Terminal for this one. The download is at the end of the post, and there’s a README with the following information in it. I tell you this just in case you’re impatient, for whatever reason. I’d hate to hold you up.

First, back up any custom files you’ve created previously. You can always restore the default style by deleting the custom.css and template.html files from [User Home]/Library/Application Support/nvALT/.

Copy the files in the downloaded zip folder to [User Home]/Library/Application Support/nvALT/. If the “nvALT” folder doesn’t exist, create it or simply drag the entire “nvALT” folder you unzipped into [User Home]LibraryApplication Support.

You should have the following files in your Support folder:

custom.css
highlight.pack.js
jquery.min.js
solarized_dark.css
solarized_light.css
template.html

nvALT will automatically pick up this new theme even if it’s already running. After switching notes you should see the change.

Side notes

• Solarized Light is included in case you prefer it with the theme, and can be switched in with a quick edit in template.html (near the top).
• The custom fonts that it uses are encoded as Base64 and included inline with data uris. It can make some editors choke a little, so if you’re experimenting just be aware. They can be moved to another stylesheet and included separately if it’s more convenient.
• It also has hyphenation enabled. Some people hate that. Removing it as as simple as taking out the first selector in the CSS file. It looks like this:

body,p,td,div {
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Just remove that whole chunk if you’re annoyed by the hyphens.

Enjoy, and if this inspires any great creations, I’d love it if you shared.