Using markdown in HTML (in markdown) in Hugo

The markdown specification allows you to inline HTML in a markdown document.

This is a regular paragraph.

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

This is another regular paragraph.

But once you’re in HTML, you can’t write markdown anymore. If you’d want to italicize Foo, this won’t work:

<table>
    <tr>
        <td>*Foo*</td>
    </tr>
</table>

On my blog, I sometimes want to wrap a whole chunk of markdown in an HTML, like a div with a class name.

<div class="highlight">
This is [markdown](https://daringfireball.net/projects/markdown/syntax#html).
</div>

The solution is a custom shortcode, located in layouts/shortcodes/markdown.html.

{{ .Inner }}

The shortcode does nothing more than parse the inner contents as markdown. So I can happily switch back to markdown from HTML.

<div class="highlight">
{{% markdown %}}
This is [markdown](https://daringfireball.net/projects/markdown/syntax#html).
{{% /markdown %}}
</div>

There might be a more idiomatic way to do this but I haven’t come across any clues. If there is I’d love to know about it, but for now this works like a charm.

If you enjoyed this post, you might be interested in my newsletter. I occasionally send a dispatch with personal stories, things I’ve been working on in the past month, and other interesting tidbits I come across online.