How to write Markdown code blocks inside Markdown code blocks
✦ 2023-03-28
Recently, I needed to show off some Markdown (archive) source code inside a Markdown code block (archive). To be precise, I wanted to include Markdown source code inside fenced code blocks (archive). Fenced code blocks weren’t included in John Gruber’s original Markdown spec but it seems like most Markdown processors have added support for them since.
For the most part, showing markdown source code inside a fenced code block is pretty easy. You just write:
```markdown
**This** works just fine.
```
But what happens when you you need to add a code block to that Markdown source code? Wrapping the triple backticks (`) in yet-more-triple-backticks isn’t going to work as the Markdown processor won’t understand where one block ends and the next one begins. As long as there are more than three backticks, it turns out that most Markdown processors don’t mind how many backticks you use to delimit your code blocks. So, to write a Markdown code block inside a Markdown code block, just differ the number of backticks in the outer and inner code blocks:
````markdown
**This** also works just fine.
Here's my example code:
```json
{
"foo": "bar"
}
```
````
For some extra spice, this blog is also written in Markdown. So you may wonder how I’ve been writing these code blocks this whole time. Peeling back the curtain reveals:
`````markdown
````markdown
**This** also works just fine.
Here's my example code:
```json
{
"foo": "bar"
}
```
````
`````
Bonus
Markdown code blocks don’t have to be delimited by backticks at all. So if you’re feeling fancy you could use triple tildes (~) instead:
~~~markdown
**This** also works just fine.
Here's my example code:
```json
{
"foo": "bar"
}
```
~~~