Readme

The idea behind this is to have a unique configuration for nvALT custom css shared between different machines. I used Dropx to achive this, but you can use any location reachable from your machine.

Use the shared template

1. Copy the whole nvalt_dropbox_custom_template folder to your Dropbox folder
2. Copy template.html to your ~/Library/Application\ Support/nvALT/
3. Customize the template.html searching for the string :
   [CUSTOMIZE WITH YOUR DROPBOX PATH]
   ans substitute it with your Dropbox path to nvalt_dropbox_custom_template (amazing, uh?)
4. Now you can erase everything from your ~/Library/Application\ Support/nvALT/, all the ncessary files are on Dropbox

Customize it!

In template.html search for the lines :

 <!-- Import Stylesheet -->
  <link rel="stylesheet" href="file:///Users/damo_ma/Documents/Dropbox/ApplicationSupportDB/nvALT/styles/custom_BRETT.css">
 <!-- Import Stylesheet for code highlight -->
  <link rel="stylesheet" href="file:///Users/damo_ma/Documents/Dropbox/ApplicationSupportDB/nvALT/code_highlight/sunburst.css">

Change the first CSS with one of your choice in /styles, for the main document style, and the second with one from /code_highlight, for different highlight styles.

I included a couple of css found in Marked.app, thank thanks to Brett Terpstra again.

EDIT : Table Of Contents

After Brett's post A GitHub README table of contents Service (thanks for the hints!)

I added a small javascript in the template.html to create a Table of Contents on the fly.

I suggest to use header 1 or 2 for the ToC (# or ##), if greater the added margins could mess up (it's a bug, but let's think it's a feature :-)

Note : The table is created only if the id='toc' is found in document. This way you can easily switch it on and off.

You can customize the id to attache the table to in the template.html, there some some indication in the template.html file.

I'm less than good at javascript, I just grab some code here (thanks Chris Coyer) and modified a bit for my purpose.

Now I scans all the header and add left margin to the <li> elements via

<li style="margin-left: 10px;">
 Some stuff
 </li>

The loop does :

• fix the "base index" as first header element found.
• set indentation equal to (actual_index-base_index)*margin_pixels
• set font-size equal to 100.-font_scaling_step*(hIndex-basehIndex)

margin_pixels is 10 pixel by default and font_scaling_step is 10% , adjust in the template.html file.

Standard values increase the margine of 10px and decrease the font size of 10% each level of header down.

Some example :

<h2>title 1</h2>     -> <h2>title 1</h2>
<h3>title 1.1</h3>   -> <h3 style="font-size: 90%;margin-left:10px;">title 1.1</h3>
<h4>title 1.1.1</h4> -> <h4 style="font-size: 80%;margin-left:20px;">title 1.1.1</h4>
<h2>title 2</h2>     -> <h2>title 2</h2>
<h3>title 2.1</h3>   -> <h3 style="font-size: 90%;margin-left:10px;">title 2.1</h3>
<h2>title 3</h2>     -> <h2>title 3</h2>

and rendered wil be (apart the font-size style):

title 1
	title 1.1
		title 1.1.1
title 2
	title 2.1
title 3

NOTE: Where is the javascript?

You may notice I referred to the highlight and jquery version from Dropbox and not using the one in the Brett's original Lopash pacakge.

<script src="file://[CUSTOMIZE WITH YOUR DROPBOX PATH]/nvalt_dropbox_custom_template/jquery.min.js"></script>
[...]
<script src="file://[CUSTOMIZE WITH YOUR DROPBOX PATH]/nvalt_dropbox_custom_template/nvALT/highlight.pack.js"></script>

The reason is to leave open the possibility to adapt the two scripts to your needs.

I am for example considering to extend the highlighted languages consisently on all my machine, or to include the whole jquery package.

Common Error

The javascript inclusion needs the whole path on your machine, for example Mac Os :

<script src="file:///Users/kidpixo/Documents/Dropbox/nvalt_dropbox_custom_template/....

notice that your final path should start with the / like this file:///Users !

I did the mistakes myself :-P and they are hard to find!

---

Original Readme for Lopash by Brett Terpstra

---

Lopash for nvALT

The Lopash theme was originally created by Erik Sagen for Marked, and modified by Brett Terpstra for use with nvALT.

This version is copyright Brett Terpstra, 2013. It is free for unlimited use with nvALT, but may not be re-purposed or published without permission.

What you'll get

• The 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.

Installation

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

Copy the files in the zip folder to [User Home]/Library/Application Support/nvALT/. If the "nvALT" folder doesn't exist, create it or simply drag the folder you unzipped into [User Home]→Library→Application 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

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).

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