Is it possible to create a paragraph with a class whose contents are interpreted as Markdown?

Spec
1

I try

<p class="example">
The `console` object...
</p>

But it doesn’t interpret the backticks.

The closest I can get is

<p class="example">

The `console` object...

</p>

but that produces the invalid HTML

<p class="example">
<p>The <code>console</code> object</p>
</p>

I was really hoping this kind of use case would be possible in the base CommonMark spec. If it’s not, I’m willing to consider implementation-specific extensions; we’re using the CommonMark Python package.

Thanks!

2

https://spec.commonmark.org/0.29/#html-blocks

Perhaps <p> should be special-cased indeed, because it is the default block element generated from markdown code, which also cannot be nested within its kind, and therefore easily leads to invalid HTML output.

3

Could you use a <div> instead of <p> here to the same effect?

1 Like
4

Sort of. You can do

<div class="example">

The `console` object

</div>

and get out

<div class="example">
<p>The <code>console</code> object</p>
</div>

then monkey with the stylesheet to make div.example > p styled the same as p.example. But this is unsatisfactory in two ways:

  • The source text looks strange. The purpose of those extra blank lines is opaque, and they tempt anyone editing the source to delete them. This is especially true in the context of larger files which don’t often have such blank lines.
  • The output has an extra wrapper div, not matching how we would write this by hand, which is minorly frustrating for those of us who care about writing tight, semantic HTML.

The first of these is my bigger worry.

5

If you are flexible regarding tag names, you can use Web Components in order to create a custom element for embedding Markdown in HTML.

For example: <marked-element> which someone created as an element wrapper for the Marked library.

1 Like