Avoiding Markdown Wrapping Custom Elements in <p>

[jneander]

When using markdown and mixing some HTML into the content, custom elements are being wrapped in paragraph tags. For example:

<custom-element></custom-element>

The above becomes:

<p><custom-element></custom-element></p>

I can avoid that by wrapping the element in a <div>. But I'd rather not resort to that if I can avoid it. Is there a way of configuring the markdown parser/renderer to treat either certain HTML elements or any hyphenated element as block-level?

[darthmall]

This one seems tricky because it seems like an issue with markdown-it. Might be worth looking around for issues with markdown-it and custom elements. I’d like to do a little testing and see if I can come up with something, but as a temporary fix, have you tried this?

<div webc:is="custom-element"></div>

I think markdown-it will recognize the <div> and not add a <p> there, but this is just a guess. This may not be an ideal authoring experience, but it might be your best bet.

It is possible that what markdown-it is doing is the “right” thing, because custom elements, by default, are display: inline. And since markdown-it has no knowledge of your styles, it can’t tell if you’ve set a different display on the element. I’m also pretty sure that markdown-it will always wrap <img> tags (whether they’re created from the markdown image syntax or as HTML) in a <p>, probably for the same reason: the default display for <img> is inline.

[synj00]

In straight markdown I found that doing two spaces and then shift + enter gives me a newline and not a paragraph. I don't know if it helps in this situation but wanted to throw it out there in case it did and in case anyone else comes across this.