Here’s how to get Marked.app to do all the Pandoc pre-processing for you when previewing documents. It also explains how to use tufte.css as a theme in Marked, which I find to be very pretty.

This comes in really handy when you want to see what your document will look like, references and all.

Things you’ll need:

First, install the ET-Book fonts locally. They’re very pretty.

  1. Unzip the ET-book zip file
  2. Go into each subfolder
  3. Double click on each .ttf font and install using Font Book.

Configure Marked to use Pandoc as the markdown processor.

  1. Open Marked.app
  2. Open Preferences (Marked.app → Preferences)
  3. Click Advanced
  4. In the “Path” field, add /usr/local/bin/pandoc
  5. In the “Args” field, add -f markdown -t html5 -s -S --normalize --bibliography /users/username/dropbox/refs/bibliography.bib --csl /Users/username/src/Pandoc/apa.csl Replace these with your BibTeX bibliography and whatever CSL you prefer.

Next, let Marked.app know about tufte.css.

  1. Open Marked.app’s preferences
  2. Click “Style”
  3. Under “Custom Styles” click “Custom CSS Example”
  4. Click the “Reveal” button
  5. In a new Finder window, unzip the tufte-css zip file and open that folder.
  6. Delete index.html, LICENSE, README.md, and the img folder.
  7. Copy the remaining files to the folder Marked.app opened when you revealed the location of the “Custom CSS Example.”
  8. In Marked.app’s preferences, click the “+” button and drag the tufte.css file into that dialog box so you don’t have to find it manually.
  9. Change your “Default style” to tufte.css.

Now when you drag a markdown document onto Marked.app for it to watch, it’ll reference your bibliography, apply the CSL, and compile the document with Pandoc, and refresh every time you save.

Potential issues

Make sure the green dot in the lower right-hand corner is on. This indicates Marked.app is using Pandoc.

If the text column is too thin, resize the window. The tufte.css theme likes it a little smaller. I’m sure there’s some way to turn off it’s dynamic resizing in CSS, but I haven’t messed with it.

Please let me know if I left anything out or if this didn’t work for you.