> ## Content Index
> Fetch the complete content index at: https://www.saraburke.net/llms.txt
> Use this file to discover other available public pages before exploring further.

# Make Marked.app Work With Pandoc and tufte.css
- URL: https://www.saraburke.net/make-marked-app-work-with-pandoc-and-tufte-css/
- Published: 2017-01-12T00:00:00.000Z
- Updated: 2022-12-29T06:49:28.000Z
- Author: Sara Burke

Here’s how to get [Marked.app](https://geo.itunes.apple.com/us/app/marked-2/id890031187?mt=12&at=1010lbs&ref=saraburke.net) to do all the Pandoc pre-processing for you when previewing documents. It also explains how to use [tufte.css](https://edwardtufte.github.io/tufte-css/?ref=saraburke.net) 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:

- [tufte.css](https://edwardtufte.github.io/tufte-css/?ref=saraburke.net)
- [ET-book](https://edwardtufte.github.io/et-book/?ref=saraburke.net)
- [Pandoc](http://pandoc.org/?ref=saraburke.net) (or `brew install pandoc` if you have [homebrew](http://brew.sh/?ref=saraburke.net))
- [Marked.app](https://geo.itunes.apple.com/us/app/marked-2/id890031187?mt=12&at=1010lbs&ref=saraburke.net)

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