Better Markdown Previews With Atom

For a daily markdown user, it’s essential to have something reliable and “tweakable.” Atom delivers, giving users both a rock solid markdown editor, and offering some customizations that will make getting work done much easier.

Why a markdown editor?

When I started working at my latest job, I was told that Carat was the preferred markdown editor. It was fine at first, then an update made it so that there was no real “raw text” mode. I had sort of a “hybrid preview” instead. Whoever I chatted with seemed substantially less than friendly or understanding, so I went looking elsewhere. This is usually how I find any software I end up using, by the way. I don’t like a feature, ask about how to disable or change it, get told to essentially “piss off,” and then move on.

I ended up moving along to Atom. I liked it. When I’m editing markdown, there’s totally raw text on one side, with a preview window on the other. Just about any problems I’ve run into, there’s been a fix or a workaround for. One such problem was previewing. When I work through a few-thousand line document, I want to see what the finished product will look like fairly immediately. I can’t right out of the gate with Atom. I might be on line 1500 in the editor, but the preview is still showing something back around line 800, wherever I left it.

A new preview plugin

In stepped Markdown Preview Enhanced. It’s solved my problems by keeping the raw and preview windows synced up, for the most part, when I scroll in one or the other. To install it, get into Atom’s Edit -> Preferences menu, then search for markdown-preview. Once it’s installed, go ahead and enable it. Then to see it in action, open up a markdown file and press Ctrl Shift M. Now you’ll see your markdown, plus a preview that scrolls along with your editor.

But wait, there’s more!

In addition to just having the ability to preview, it’s also possible to preview with different fonts and colors. My company was using kind of a strange font until just recently, as well as some different colors. It wasn’t necessary, but was nice, to see a preview that was pretty close to what was going to get published live.

To customize, we’ve got to get into the newly-installed plugin’s style sheet. From within Atom, hit Ctrl Shift P and search for css. You should see a Markdown Preview Enhanced: Customize Css option show up. Once in there, this should look somewhat familiar for anyone who’s ever worked with a css stylesheet.

Look for css (Markdown Preview Enhanced: Customize Css should pop up).

Once that’s open, you can specify things like you would in an html website’s stylesheet. Here’s mine currently:

.markdown-preview.markdown-preview {
  font-family: 'Liberation Sans';
  src: url('/usr/share/fonts/truetype/liberation/LiberationSans-Regular.ttf');
}

.markdown-preview.markdown-preview pre {
  font-family: 'Liberation Mono';
  src: url('/usr/share/fonts/truetype/liberation/LiberationMono-Regular.ttf');
  color:#fff;
  background-color:#000;
  font-size:1.25em;
}

.markdown-preview.markdown-preview code{
  font-family: 'Liberation Mono';
  src: url('/usr/share/fonts/truetype/liberation/LiberationMono-Regular.ttf');
  color: #ff0000;
  background-color:#ddd;
}

You’ll notice I’ve got a pre and a code section. I want my inline code to look a bit different than a whole code block. This works when using four spaces to indicate a pre block, but doesn’t seem to work yet when using four backticks instead. You may also notice that I’ve increased the font size a bit on pre blocks, because it makes the font size closer to what the other “regular” font is. I had to do the same thing when converting to PDF with Pandoc and LaTeX, so it’s nothing weird for me at this point.

Overall though, this is a sight better than before, and closer to what the final product is going to look like.