Mixing code-fencing and {% highlight %}

Help
1

Is there a way to leave the code-fencing backticks inside a {% highlight %} block and have them somehow ignored at build time (removed/hidden)?

I use a Markdown editor for a GitHub pages blog. The editor has a decent live-preview window. It doesn’t know anything about the Liquid tags, of course, so it’s nice to use MD code-fencing so that code blocks are rendered reasonably accurately during editing, then just before I push to _posts I manually go back and remove the backticks.

Manual removal has only been a minor hassle, but yesterday I ran into a real problem that led me to post this question. I had fenced some HTML containing a script block, and it turns out the editor’s preview window is a hosted browser instance. As soon as I removed the fencing, the browser interpreted the script block as live content and tried to execute it, causing errors that eventually crashed the editor.

I can find work-arounds for this, but it would be ideal if the highlight feature was MD-code-fencing-friendly!

2

You don’t have to use the highlight Liquid tag. GFM fenced code blocks via triple backticks are fully supported on their own when using Kramdown/Rouge in Jekyll.

You may have to enable Github Flavored Markdown under the Kramdown settings in your _config.yml though, but pretty sure it’s on by default.

3

Yeah backtick fencing works, but I want line numbers. Sorry, should have clarified that.

4

You have to enable line numbering. See this thread on GH for the _config.yml settings

https://github.com/jekyll/jekyll/issues/4619#issuecomment-191267346

5

Awesome. I’ll give that a shot – thank you.