Markdown with syntax highlighting in Ember

Sunday, February 1st 2015

A little while ago I released an Ember CLI addon called markdown-code-highlighting. Getting proper syntax highlighting on my blog had been haunting me for a long time. It was a thorn in my side and I couldn't seem to get it out. I finally sat down one day and decided that I needed to solve this problem.

Enter Marked

I have been using marked for parsing my markdown since the day I started building my blog. The cool thing about marked, compared to other markdown renderers, is marked gives you a nice little highlight function! This function gives you the code and language of each individual block you have in the body. It looks like this:

marked.setOptions({
  highlight: function(code, lang) {
    // if you need lang, in this case we don't.
    return hljs.highlightAuto(code).value;
  }
});

This is the exact code that basically powers the plugin. Super simple. You might be wondering why it was a "thorn in my side", right? Turns out all (that I could find) JS syntax highlighters don't use bower officially. So there were forks of their repos that were put on bower which didn't work.

So how did I get around this? Thankfully highlight.js keeps their github releases orderly so I can specify the git repo and their latest tag. The bower entry looks like:

"highlightjs": "~8"

That grabs the latest from the 8 series tag on their repo.

The only downside to this is we don't get to pick what languages we'd like in the build. They just build all of the language options by default, which may not be necessary for you.

Conclusion

I decided to make it into an Ember CLI addon since I couldn't find any syntax highlighting ember addons that parsed markdown code WITH regular markdown. I hope it helps someone out!

Check out markdown-code-highlighting on npm or on github!