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.
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 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
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.
- 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:
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.
Lopash for nvALT v1
One tip: right click on the preview panel and choose “Inspect Element” to open the Webkit Inspector. It helps a lot when debugging and styling.↩