Previewing Jekyll posts with Marked

[Tweet : ADN : nvALT]

If you use both Marked and Jekyll (or Octopress), you may want to preview your posts accurately in Marked before publishing. The first obvious step is to link your screen.css file as a Custom Style:

Marked Style preferences screenshot

Depending on your theme, you may need to copy the CSS1 and edit a few things, including any custom @font-face fonts used. I find the easiest way to handle fonts in Custom Styles is to base64 encode them and embed them directly in the CSS. The following bash function — added to your .bash_profile and run on the command line with a .woff file as the argument, will put the correct code for the embedded font into your clipboard:

function 64font() {
	openssl base64 -in $1 | awk -v ext="${1#*.}" '{ str1=str1 $0 }END{ print "src:url(\"data:font/"ext";base64,"str1"\")  format(\"woff\");" }'|pbcopy
	echo "$1 encoded as font and copied to clipboard"
}

You’ll also want to replace any rules in your CSS that specifically reference containers that won’t exist in Marked. For example, my layout uses #main .post_body to specify styles for the main post. You can remove these with a search and replace, or use #wrapper instead. While not required, you can also remove any layout-related CSS that doesn’t apply to the main post body.

Next, turn on Strip YAML Headers under Behavior preferences to remove all of the post data at the top of the post for clean rendering.

You’ll probably want to set up Kramdown or Maruku as your custom processor, but it won’t convert any Liquid tags for you by default. Octopress comes with an image_tag plugin that you can use with Jekyll (or just use Octopress), as well as a gist_tag plugin, among others. The sample Custom Processor below can be added to Marked to convert those tags and then handle the Markdown conversion.

To add the custom processor to Marked, save the script below to your local drive, open Behavior preferences, check the Custom Processor box, add the full path to the script and hit Save in the Custom Processor box. Open a Jekyll post in Marked. If all goes well, you should be seeing a preview with img and gist tags replaced with HTML img tags and Gist embed script tags that will render in Marked.

Marked behavior preferences screenshot

The script — by default — requires that Kramdown be installed in /usr/bin/kramdown. You can do this with sudo gem install kramdown. If you’re using RVM, you might need to use sudo rvm do gem install kramdown. You can always substitute Maruku, MultiMarkdown or any other processor in the last line of the script2.

Note that the script may take some customization. It adds “..” before the substituted image path, which makes the assumption that images exist in your source folder at a level equal to your _drafts or _posts folder. Modify as needed.

You may also want to add/adjust style substitutions. Right now if it detects an alignleft or alignright class in an img tag, it adds the styles I personally use for those classes to the output <img> tag.

Here’s the script, provided as an example for your own exploration of Marked custom scripts.

Marked makes a great tool for Jekyll/Octopress bloggers. You can find more information on it at markedapp.com.

  1. If you normally compress your CSS, render it out without compression to ease editing. With compass you can use the -s nested argument for nice results.

  2. The next version of Marked will simplify this process, allowing you to use this script as a custom preprocessor, and then set up a separate custom processor or use the default renderer. Still bugfixing, though.