Custom Markdown Remote Conversion

I have been working on a custom CSS stylesheet for my Markdown conversionsto HTML that just gives things a bit more style than the plain HTML, butnot the overkill that most stylesheets seem to.

The problem was that when knocking up Markdown docs on my iPhone or iPad,the basic converters on the Markdown-savvy editors don’t have such afeature. So I wondered if I could do it some way.

I use nvALT on my Mac which makes .txt files in a folder in myDropbox sync folder. I then use one of several iOS apps that sync withDropbox to edit or create them on the go. If I create them there, I use the.txt extension.

One of the apps, Nocs makes it easy to convert a Markdown file to HTML,saving it back to the same Dropbox folder as the Markdown file. Fine, butagain, no custom conversion. However, I realized that this HTML file wouldsync back to my Mac and (the first time at least) this would be a new filein the folder, which is just the job for Folder Actions!

I fired up Automator and said to make a new Folder Action. At the top of yourempty workflow is a dropdown to choose what folder to watch for files added.Select the folder in your Dropbox sync where your Markdown files you want towatch are kept.

Now add one step to the workflow of “Run Shell Script” that youll find on theleft under the Automator actions section. Replace the contents with the followingscript:

# When a new file is seen in the folder, this is run. If it is a .html# file, that is taken as a signal that I want to create an HTML# version of a Markdown document in this folder.# This script re-does the conversion with my custom command. # Dropbox will sync this new version back to be available where I was working. # It uses the value of the md_ext variable to assume the name of the # original Markdown source file to re-convert, so you need to set that.# Since I use this for Notational Velocity, that is set to "txt".md_ext=txt# Pick up most of the other PATH that is not set when executing in Automator.# Even if we use full paths to things, markdown2pdf calls pandoc and pdflatex, # relying on the path to find them. You may need to additionally source other # files, or you may not need to do this depending on what tool you use.# I'm using pandoc and markdown2pdf installed with MacPorts, so I have to# do this.if [ -x /usr/libexec/path_helper ]; then    eval `/usr/libexec/path_helper -s`fisource ~/.bash_profile# For all files added (don't know if Folder Actions sends several at once or not)for f in "$@"do    ext=${f##*.}    if [ "${ext}" == "html" ]    then        f_base=${f%.*}        md_file=${f_base}.${md_ext}        pandoc -s --css="http://home.comcast.net/~ryangray/markdown.css" --output="${f}" "${md_file}"        markdown2pdf --variable=fontsize:11pt --output="${f_base}.pdf" "${md_file}"        md_name=${md_file##*/}        growlnotify -m "Converted Markdown to HTML and PDF" -t "${md_name}"    fidone

As a bonus, I added conversion to PDF as well. So both will sync back toDropbox and then back to my iPhone or iPad. So, basically, a few secondsafter I tell Nocs to save the HTML version, the customized HTML andPDF show up in its Dropbox file list.

Obviously, you would use whatever custom Markdown conversion you want,following my example here. I put my custom stylesheet on my Comcast siteso that it can be reached wherever I’m viewing the HTML. I think I canhave Pandoc embed it instead to make them truly stand-alone, but haven’ttried that. The Growl notification when it’s done is optional but handyfor testing since the Dropbox sync may take a few seconds , the script maytake a few seconds to trigger, and the conversion to PDF can take a bit aswell.

The one extra step is if you are converting the same Markdown file for asecond time or there’s already a .html version of it in the same folderyou

You are welcome to copy my CSS file. It has things to support Pandoc andMultiMarkdown in that they use different class names for things. It alsohas some different treatments for printing built-in like using wrappingin the code boxes versus a scroll bar when on-screen. I’m going to try toput it up on github so people can track updates to it. Stay tuned.