How can I get github-flavored markdown with syntax highlighting?

If I do

meteor add simple:highlight.js

then I get syntax highlighting in my markdown files, but I don’t get github-flavored markdown (so terms_like_this don’t get displayed properly).

If I do

meteor add perak:markdown

then I get the github-flavored markdown, but the highlight.js packaged I just added ceases to work.

How can I get both syntax highlighting and github-flavored markdown in my meteor project?


Author of simple:highlight.js here!

You can use the runtime API of the package:

So basically use any markdown package you want, then in Template.x.onRendered call hljs.highlightBlock on the relevant elements - probably this.findAll('code'). The simple:highlight.js package exports the hljs symbol.

I’d also happily accept a PR to build in support for other Markdown packages:

P.S. here is how the integration with the markdown package works:

You could probably copy-paste that file and edit to make it work with almost any other package. (And then submit a PR!!!)

Hmm, calling hljs.highlightBlock(this.findAll('code')) doesn’t work from onRendered in my app – I think because the code is not visible when the template is rendered but only becomes visible when a toggle is selected. I’ll have to look at the PR approach later.

Actually what you could do is - if there is a helper you are using to render markdown, you can put it on the onRendered of that helper.

For example:


Not sure I follow… how is Template.markdown.onRendered(...) being called on a helper? Is markdown the helper here, or is markdown the name of the template?

1 Like

So the way the {{#markdown}} block is implemented is actually a template called markdown. So you can have things run right after markdown is rendered via Template.markdown.onRendered.

I tried putting the following in my code:

Template.markdown.onRendered(function() {

But I get the following error:

Uncaught TypeError: Cannot read property 'onRendered' of undefined

Interesting. If I have a moment I’ll try to get it working. In the meantime, could you file an issue on the simple:highlight.js package?

Thanks for your assistance thus far!

It works fine if you just set the highlight option for marked, which is what perak:markdown uses behind the scenes:

var mark = marked;
  gfm: true,
  tables: true,
  breaks: true,
  highlight: function (code) {
    return hljs.highlightAuto(code).value;
Markdown = mark;