Display highlighted code blocks in Markdown code block in GitHub Flavored Markdown

Question

I want to have a markdown block using ```md and inside of that Markdown block I want to have a JavaScript block using ```js.

I tried having:

```md
```js
function myFunction () {
   return 42;
}
```
```

This is how is rendered:

Basically, it's almost as expected, but the last ``` is missing (and a new code block was created instead).

I expected to see it like this:

I edited it in the browser developer tools.

So, basically, how to show JavaScript (or any other language) code blocks in Markdown code blocks in GitHub Flavored Markdown?

I did try to escape the ``` snippets using \`\`\` or \```, but they get rendered as well. I also tried to use more backticks for the Markdown code block, but that didn't work:

Currently I did this:

<pre>
```js
function myFunction () {
   return 42;
}
```
</pre>

But the code is not highlighted, obviously.

Mogsdad · Accepted Answer · 2015-11-12 04:19:22Z

16

What you are asking for is not possible. Markdown simply identifies a code block as one and then ignores the content. In other words, if you nest a second codeblock within the first one, Markdown simply sees that as part of the first codeblock and will not parse it as a codeblock itself. In fact, it can't because it is in a code block. How else would an author demonstrate how to nest code blocks?

Regarding highlighting, the JavaScript block nested in the Markdown codeblock should not be highlighted as JavaScript. In its current form it is sipmly a codeblock in a Markdown document. Therefore, any highlighting would be to indicate that it is a codeblock in a Markdown document. Weather the code contained therein is JavaScript, Python, Haskell, C, Perl, or anything else is irrelevant.

Finally, to nest one code block in another (using fenced code blocks) you need to use a different number of backticks for each level of nesting. Like this:

````md
```js
function myFunction () {
   return 42;
}
```
````

Which will correctly render as:

```js
function myFunction () {
   return 42;
}
```

Note that that is what a codeblock looks like in a Markdown document. So yes, that is the correct rendering. If you just want a JavaScript codebloc, then skip the nesting:

```js
function myFunction () {
   return 42;
}
```

Which will give you:

function myFunction () {
   return 42;
}

edited Nov 12, 2015 at 4:19

Mogsdad

46k21 gold badges166 silver badges289 bronze badges

answered Nov 5, 2015 at 14:02

Waylan

44k14 gold badges93 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ionică Bizău Over a year ago

Thank you for your answer! From what I see, this is more or less official answer since you're part of the Markdown standardization team (am I correct?). Finally, to nest one code block in another (using fenced code blocks) you need to use a different number of backticks for each level of nesting – I did try this but GFM renders it wrong (see my screenshot posted in the question). Maybe, is it a bug in GFM?

Waylan Over a year ago

There is no such thing as an official "Markdown standardization team" but I was certainly actively involved in developing the fenced-code-block syntax. So, perhaps, unofficially, yes. And I realize that GFM does not necessarily follow all of the edge cases we developed for fenced code blocks. This may very well be one of them.

Ionică Bizău Over a year ago

I saw you're member in the @markdown org. :-) I did contact GitHub support too, but they didn't reply yet.

Waylan Over a year ago

It would be interesting to see what becomes of your contact with GitHub support. Personally, I have not been very successful in getting them to fully match other implementations of fenced code blocks.

Ionică Bizău Over a year ago

From GitHub Support: GitHub also doesn't support the nested code blocks at the moment, but I'll certainly pass this along to the team for consideration in the future. I can't see any reason not to support it.

Collectives™ on Stack Overflow

Display highlighted code blocks in Markdown code block in GitHub Flavored Markdown

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related