Skip to content

Add default class for each HTML element

Many people use CSS kits like Bootstrap, Semantic UI, or others that require default name classes for HTML elements:

<h1 class="ui large header">1st Heading</h1>
<h2 class="ui medium header">2nd Heading</h2>
<ul class="ui list">
  <li class="ui item">first item</li>
  <li class="ui item">second item</li>
</ul>

Showdown does not support this out-of-the-box. But you can create an extension for this:

const showdown = require('showdown');

const classMap = {
  h1: 'ui large header',
  h2: 'ui medium header',
  ul: 'ui list',
  li: 'ui item'
}

const bindings = Object.keys(classMap)
  .map(key => ({
    type: 'output',
    regex: new RegExp(`<${key}(.*)>`, 'g'),
    replace: `<${key} class="${classMap[key]}" $1>`
  }));

const conv = new showdown.Converter({
  extensions: [...bindings]
});

const text = `
# 1st Heading
## 2nd Heading

- first item
- second item
`;

With this extension, the output will be as follows:

​​​​​<h1 class="ui large header">1st Heading</h1>​​​​​
​​​​​<h2 class="ui medium header">2nd Heading</h2>​​​​​
​​​​​<ul class="ui list">​​​​​
  ​​​​​<li class="ui item">first item</li>​​​​​
  ​​​​​<li class="ui item">second item</li>​​​​​
​​​​​</ul>​​​​​

Credits