Markdown copywriting with Jade and Express

If I ever see a WYSIWYG editor again, it will be too soon.

I've decided to write this blog in markdown which is a new love of mine over the last year. It allows me to think simply about copy without any formatting woes. If I want a few basic tools (lists, emphasis) I can do all of that easily, without any GUI or thought.

I'm using iA Writer to do my writing as the GUI is extremely simple, it looks great, and it works on all of my devices (over iCloud or Dropbox) wherever I happen to be.

I wanted to get my blog up and running on my website so I needed to be able to take a direct copy of the .md file (can even pull it from Dropbox, which I may implement soon) and push that out as formatted HTML.

Node doesn't have built-in Markdown support but there are plenty of packaged ready for me. I found markdown-js first, so that's what I used. I don't imagine it's the best, but for now it's fine.

Jade supports markdown within it's filter system so you can easily do some basic Markdown to HTML formatting like so:

div.copy
    :markdown
        *THIS* is markdown!

Which will build the following HTML:

<div class="copy">
    <em>THIS</em> is markdown!
</div>

Unfortunately to use have the markdown string within a template variable won't compile to HTML within Jade. This is a major shame, but from what I've read there is no non-programatic solution. Fine!

All you need to is compile the Markdown as HTML before passing the content. This was a trivial matter using the markdown-js function that I mentioned.

npm install markdown
npm install -g markdown

That installs markdown and all required dependencies onto your machine. Now the code to open the file and convert:

var fs = require('fs')
, markdown = require('markdown').markdown;

try {
    var blog = fs.readFileSync(__dirname + '/../public/blog.md', 'ascii');
} catch (err) {
    console.log("Error loading the Blog file");
}
blog = markdown.toHTML(blog);

You'll see two main pieces. First we open and read the Markdown file using the FS Node methods and then we convert the Markdown string to HTML. The markdown-js setup is a little strange in that there is an Object within Markdown called markdown which has all the methods, not exactly nice looking. With that I pass the variable to my view and display it, without escaping, the HTML like so:

.copy !{blog}

This creates a

with the Markup HTML within.