[markdown] A way to prevent wrapping generated HTML with <p> tags when there is no need for them

[DmitrySharabin]

The Markdown plugin uses the Showdown library under the hood. And wrapping markdown in paragraph tags is the default behavior that might cause some issues and sometimes highly undesirable (e.g., see https://codepen.io/dmitrysharabin/pen/zYwxEPJ?editors=1100).

It is not a rare problem at all. There are issues concerning it in the Showdown repo as well:

• need to render html without paragraph tags showdownjs/showdown#493
• Possible to suppress the encapsulating <p> tags? showdownjs/showdown#573
• How to prevent showdown from wrapping html in paragraph tags showdownjs/showdown#588

As @tivie mentioned in their comment: Showdown does not support selective conversion (the ability to only parse and convert certain markdown elements), however, one can create an extension that removes disallowed “tags”.

So, we could add this code (with some modifications if needed) to our plugin:

showdown.extension("remove-extra-paragraphs", function () {
  return [{
    type: "output",
    filter: function (markdown) {
      return markdown.replace(/<\/?p[^>]*>/g, "");
    }
  }];
});

However, we need to decide whether we want this extension to be enabled plugin-wise or property-wise. If plugin-wise, how can we distinguish when to apply some extra transformations on the markdown and when don't? If property-wise, should authors add some extra attributes to the property, or maybe they should add a class?

Are there any other cases we should take into account?

@LeaVerou @karger What do you think?

[LeaVerou]

I think this should be automatically enabled based on whether the property matches a given selector (which would include tag names that can't have paragraphs in them, but also a class as an escape hatch).

Another solution (which I suppose we don't want) is to use another Markdown converter. I recently used markdown-it which has a renderInline() method.

But do note that rendering inline is not just about removing paragraphs. We also don't want to allow block-level elements, like headings, code blocks etc.

[DmitrySharabin]

But do note that rendering inline is not just about removing paragraphs. We also don't want to allow block-level elements, like headings, code blocks etc.

Exactly! It feels like writing our own parser. 😱

Another solution (which I suppose we don't want) is to use another Markdown converter. I recently used markdown-it which has a renderInline() method.

Well, we can give it a try in a separate plugin. And if it more suits our needs we can migrate to it later.

For now, I simply don't know which of these tasks is easier. 🤔

[LeaVerou]

I wonder if we can just add a setting to our plugin about which parser to use instead of adding a whole new plugin. Then we can use inline rendering when it's available.

[DmitrySharabin]

Excellent point!

Like <el class="markdown" mv-markdown-converter="showdown">...</el>?

Or use the existing one: <el class="markdown" mv-markdown-options="converter: showdown">...</el>?

[LeaVerou]

I think it would be much simpler to set the converter for the whole document, than on an element-by-element basis.