How to prevent showdown from wrapping html in paragraph tags

[KirkMunro]

@tivie, is there a way to prevent showdown from being so "paragraph happy"? For example, consider this markdown:

<input id="bash" name="language" type=radio>
<input id="powershell" name="language" type=radio>
<input id="both" name="language" type=radio>

If you copy that into the Showdown demo environment, you'll see that the HTML that is rendered looks like this:

<p>
<input id="bash" name="language" type="radio">
<input id="powershell" name="language" type="radio">
<input id="both" name="language" type="radio">
</p>

What I'm looking for is a way to have it rendered like this instead:

<input id="bash" name="language" type="radio">
<input id="powershell" name="language" type="radio">
<input id="both" name="language" type="radio">

Without this, css tricks become very hard to apply, because you don't have control over what HTML elements are siblings of what other HTML elements when some are generated using HTML and others are generated using Markdown. Since there really is no benefit to having HTML tags generated inside of a paragraph tag, I'd simply like Showdown to avoid wrapping HTML tags entirely. i.e. HTML should be passed through as HTML (with the option to have the content of those tags converted from markdown using data-markdown="1", of course).

Is this something that can be done with 1.8.6, or would an extension be required to make this work, and if so what guidance can you offer to help make this happen?

Thanks in advance!

[tivie]

Paragraph happy!! 🤣 That made me laugh!

On a serious note, Showdown differentiates between block and inline HTML elements. Block elements are encoded as soon as possible while inline elements are "left alone". The fact that they end up being wrapped as a paragraph is kind of a side effect.

Since you can mix inline elements with markdown, this would need to be carefully studied:

some stuff <input id="bash" name="language" type="radio"> other stuff <b>yeah!</b> 

I do think that this is actually a worthwhile addition, though.

And from the top of my head, the rule could be:
"naked self closing html inline elements are left alone while the rest of inline elements (that are not self closing or have markdown) would be wrapped in <p> tags."

I will consider it for version 2.0, not because it's hard to change the parser but because:

• it will require a LOT of proper testing in order to make sure all edge cases are thought of (the devil is always in the details)
• it won't slow down the parser much

That being said, you can implement this with an extension quite easily: https://jsfiddle.net/tivie/ypjzcuLv/

showdown.extension('myext', function() {
  return [{
    type: 'listener',
    listeners: {
      'hashHTMLBlocks.after': function (event, text, converter, options, globals) {
        text = text.replace(/^ {0,3}<[a-z]+\b[^>]*>$/gmi, function (wm) {
          return '\n\n¨K' + (globals.gHtmlBlocks.push(wm) - 1) + 'K\n\n';
        });
        return text;
      }
    }
  }];
});

hope it helps

---

Donate

As you know, ShowdownJS is a free library and it will remain free forever. However, maintaining and improving the library costs time and money.
If you like our work and find our library useful, please donate through Pledgie or directly through paypal!! Your contribution will be greatly appreciated and help us continue to develop this awesome library.

[KirkMunro]

@tivie This is exactly what I was hoping would come out of this post. Thank you for taking the time to respond with all of these details! I'm really looking forward to trying this out!

[tivie]

You're welcome