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

1

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?

Thanks.

2

Author of simple:highlight.js here!

You can use the runtime API of the package: https://highlightjs.org/usage/

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: https://github.com/stubailo/meteor-highlight.js

3

P.S. here is how the integration with the markdown package works: https://github.com/stubailo/meteor-highlight.js/blob/master/markdown-integration.js

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

4

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.

5

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:

Template.markdown.onRendered(...)
6

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
7

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.

8

I tried putting the following in my code:

Template.markdown.onRendered(function() {
    hljs.highlightBlock(this.findAll('code'));
});

But I get the following error:

Uncaught TypeError: Cannot read property 'onRendered' of undefined
9

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?

10

Thanks for your assistance thus far! https://github.com/stubailo/meteor-highlight.js/issues/3

11

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

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