Showdown render custom tag into custom html block

Question

I am using Showdownjs. Say I want to turn a specific part my markdown text into a custom HTML:

Some text here 


# H1

## H2

You can download the latest release tarball directly from [releases]

```[custom-section]
Text within left-aligned div
Text within right-aligned div
```

I want to render my custom-section into this:

<content-section class="someClass">
  <div class="someClass">
    Text within left-aligned div
  </div>
  <div class="someoOtherClass">
    Text within right-aligned div
  </div>
</content-section>

How can I do that?

Answer 1

Right now there isn't a way to directly use div elements or classes in Showdownjs. If you have plain text to fill in the divs then you can just insert the HTML into the custom section. That's the quick and dirty way to do it, but you cannot use other features of Showdownjs inside the div tags as it will convert everything to text. To fix that you can insert the contents of the div by converting them directly to HTML using Showdownjs explicitly inside the string. Here I used template literals:

Some text here 


# H1

## H2

You can download the latest release tarball directly from [releases]

<section class="customSection">          // Custom section as raw HTML
<div class="left">
    ${showdownConverter.makeHtml(`       // Using Showdownjs inside the div

    # Left-aligned Heading

    Text within left-aligned div
    
    - Left-aligned list item

    `)}
</div>

<div class="right">
    ${showdownConverter.makeHtml(`

    # Right-aligned Heading

    Text within right-aligned div
    
    - Right-aligned list item

    `)}
</div>
</section>

CSS:

.right {
  float: right;
}
.left {
  float: left;
}