Sh Raj

Posted on Jul 3

Top ShowdownJS Extensions and Their Usage

#showdownjs #extensions #javascript #webdev

Top 20 ShowdownJS Extensions and Their Usage

ShowdownJS is a powerful Markdown to HTML converter. To extend its capabilities, developers have created numerous extensions. Here's a comprehensive guide to 20 of the top ShowdownJS extensions, categorized by their functionality.

Syntax Highlighting

Showdown Highlight Extension
- Description: Adds syntax highlighting to code blocks.
- Installation:
```
 npm install showdown-highlight
```

Usage:

 const showdown = require('showdown');
 const showdownHighlight = require('showdown-highlight');

 const converter = new showdown.Converter({
   extensions: [showdownHighlight]
 });

 const markdown = '```

javascript\nconsole.log("Hello, world!");\n

```';
 const html = converter.makeHtml(markdown);
 console.log(html);

Media Embedding

Showdown YouTube Embed Extension
- Description: Embeds YouTube videos with simple syntax.
- Installation:
```
 npm install showdown-youtube
```

Usage:

 const showdown = require('showdown');
 const showdownYoutube = require('showdown-youtube');

 const converter = new showdown.Converter({
   extensions: [showdownYoutube]
 });

 const markdown = 'Check out this video: @[](https://www.youtube.com/watch?v=dQw4w9WgXcQ)';
 const html = converter.makeHtml(markdown);
 console.log(html);

Showdown CodePen Embed Extension
- Description: Embeds CodePen snippets.
- Installation:
```
 npm install showdown-codepen
```

Usage:

 const showdown = require('showdown');
 const showdownCodepen = require('showdown-codepen');

 const converter = new showdown.Converter({
   extensions: [showdownCodepen]
 });

 const markdown = '@[codepen](https://codepen.io/pen/wefewfw)';
 const html = converter.makeHtml(markdown);
 console.log(html);

Link Handling

Showdown Target Blank Extension
- Description: Modifies links to open in a new tab.
- Installation:
```
 npm install showdown-target-blank
```

Usage:

 const showdown = require('showdown');
 const targetBlank = require('showdown-target-blank');

 const converter = new showdown.Converter({
   extensions: [targetBlank]
 });

 const markdown = '[Open Google](https://www.google.com)';
 const html = converter.makeHtml(markdown);
 console.log(html);

Emoji Support

Showdown Emoji Extension
- Description: Adds emoji support.
- Installation:
```
 npm install showdown-emoji
```

Usage:

 const showdown = require('showdown');
 const showdownEmoji = require('showdown-emoji');

 const converter = new showdown.Converter({
   extensions: [showdownEmoji]
 });

 const markdown = 'Hello, world! :smile:';
 const html = converter.makeHtml(markdown);
 console.log(html);

Tooltip Support

Showdown Tooltip Extension
- Description: Adds tooltips to text.
- Installation:
```
 npm install showdown-tooltip
```

Usage:

 const showdown = require('showdown');
 const showdownTooltip = require('showdown-tooltip');

 const converter = new showdown.Converter({
   extensions: [showdownTooltip]
 });

 const markdown = 'Hover over this text for a tooltip. ![alt text](tooltip "This is a tooltip")';
 const html = converter.makeHtml(markdown);
 console.log(html);

Showdown TOC Extension
- Description: Generates a table of contents from headings.
- Installation:
```
 npm install showdown-toc
```

Usage:

 const showdown = require('showdown');
 const showdownToc = require('showdown-toc');

 const converter = new showdown.Converter({
   extensions: [showdownToc]
 });

 const markdown = '# Heading 1\n\n## Heading 2\n\n### Heading 3\n';
 const html = converter.makeHtml(markdown);
 console.log(html);

Math Support

Showdown MathJax Extension
- Description: Adds MathJax support for rendering mathematical expressions.
- Installation:
```
 npm install showdown-mathjax
```

Usage:

 const showdown = require('showdown');
 const showdownMathjax = require('showdown-mathjax');

 const converter = new showdown.Converter({
   extensions: [showdownMathjax]
 });

 const markdown = '$$E=mc^2$$';
 const html = converter.makeHtml(markdown);
 console.log(html);

Footnotes

Showdown Footnotes Extension
- Description: Adds support for footnotes.
- Installation:
```
 npm install showdown-footnotes
```

Usage:

 const showdown = require('showdown');
 const showdownFootnotes = require('showdown-footnotes');

 const converter = new showdown.Converter({
   extensions: [showdownFootnotes]
 });

 const markdown = 'Here is a footnote reference[^1]\n\n[^1]: Here is the footnote.';
 const html = converter.makeHtml(markdown);
 console.log(html);

Task Lists

Showdown Task Lists Extension
- Description: Adds support for task lists.
- Installation:
```
  npm install showdown-task-lists
```

- **Usage**:

  ```javascript
  const showdown = require('showdown');
  const showdownTaskLists = require('showdown-task-lists');

  const converter = new showdown.Converter({
    extensions: [showdownTaskLists]
  });

  const markdown = '- [ ] Task 1\n- [x] Task 2';
  const html = converter.makeHtml(markdown);
  console.log(html);
  ```

Smart Punctuation

Showdown Smartypants Extension
- Description: Converts ASCII punctuation characters into "smart" typographic punctuation HTML entities.
- Installation:
```
  npm install showdown-smartypants
```

- **Usage**:

  ```javascript
  const showdown = require('showdown');
  const showdownSmartypants = require('showdown-smartypants');

  const converter = new showdown.Converter({
    extensions: [showdownSmartypants]
  });

  const markdown = '"Hello," he said.';
  const html = converter.makeHtml(markdown);
  console.log(html);
  ```

Showdown External Links Extension
- Description: Adds target="_blank" and rel="noopener noreferrer" to external links.
- Installation:
```
  npm install showdown-external-links
```

- **Usage**:

  ```javascript
  const showdown = require('showdown');
  const showdownExternalLinks = require('showdown-external-links');

  const converter = new showdown.Converter({
    extensions: [showdownExternalLinks]
  });

  const markdown = '[External Link](https://example.com)';
  const html = converter.makeHtml(markdown);
  console.log(html);
  ```

Audio Embedding

Showdown Audio Embed Extension
- Description: Embeds audio files.
- Installation:
```
  npm install showdown-audio-embed
```

- **Usage**:

  ```javascript
  const showdown = require('showdown');
  const showdownAudioEmbed = require('showdown-audio-embed');

  const converter = new showdown.Converter({
    extensions: [showdownAudioEmbed]
  });

  const markdown = '![audio](https://example.com/audio.mp3)';
  const html = converter.makeHtml(markdown);
  console.log(html);
  ```

Image Handling

Showdown Lazy Load Images Extension
- Description: Adds lazy loading to images.
- Installation:
```
  npm install showdown-lazy-load-images
```

- **Usage**:

  ```javascript
  const showdown = require('showdown');
  const showdownLazyLoadImages = require('showdown-lazy-load-images');



  const converter = new showdown.Converter({
    extensions: [showdownLazyLoadImages]
  });

  const markdown = '![alt text](https://example.com/image.jpg)';
  const html = converter.makeHtml(markdown);
  console.log(html);
  ```

Custom Containers

Showdown Container Extension
- Description: Adds custom container blocks.
- Installation:
```
  npm install showdown-container
```

- **Usage**:

  ```javascript
  const showdown = require('showdown');
  const showdownContainer = require('showdown-container');

  const converter = new showdown.Converter({
    extensions: [showdownContainer]
  });

  const markdown = '::: warning\n*Here be dragons*\n:::';
  const html = converter.makeHtml(markdown);
  console.log(html);
  ```

Sanitizing HTML

Showdown xssFilter Extension
- Description: Adds an XSS filter to the output HTML.
- Installation:
```
  npm install showdown-xss-filter
```

- **Usage**:

  ```javascript
  const showdown = require('showdown');
  const showdownXssFilter = require('showdown-xss-filter');

  const converter = new showdown.Converter({
    extensions: [showdownXssFilter]
  });

  const markdown = '<script>alert("XSS")</script>';
  const html = converter.makeHtml(markdown);
  console.log(html);
  ```

Alerts and Notifications

Showdown Alert Extension
- Description: Adds alert boxes.
- Installation:
```
  npm install showdown-alert
```

- **Usage**:

  ```javascript
  const showdown = require('showdown');
  const showdownAlert = require('showdown-alert');

  const converter = new showdown.Converter({
    extensions: [showdownAlert]
  });

  const markdown = '::: alert\n*Important message*\n:::';
  const html = converter.makeHtml(markdown);
  console.log(html);
  ```

Code Copy Button

Showdown Copy Code Button Extension
- Description: Adds a copy button to code blocks.
- Installation:
```
  npm install showdown-copy-code-button
```

- **Usage**:

  ```javascript
  const showdown = require('showdown');
  const showdownCopyCodeButton = require('showdown-copy-code-button');

  const converter = new showdown.Converter({
    extensions: [showdownCopyCodeButton]
  });

  const markdown = '```

javascript\nconsole.log("Hello, world!");\n

      const html = converter.makeHtml(markdown);
      console.log(html);
      ```



### Customizable HTML

20. **Showdown Custom HTML Extension**
    - **Description**: Allows adding custom HTML tags.
    - **Installation**:


      ```bash
      npm install showdown-custom-html
      ```


    - **Usage**:


      ```javascript
      const showdown = require('showdown');
      const showdownCustomHtml = require('showdown-custom-html');

      const converter = new showdown.Converter({
        extensions: [showdownCustomHtml]
      });

      const markdown = '<custom-tag>Custom content</custom-tag>';
      const html = converter.makeHtml(markdown);
      console.log(html);
      ```



---

### Diagrams

12. **Showdown Mermaid Extension**
    - **Description**: Adds support for Mermaid diagrams.
    - **Installation**:


      ```bash
      npm install showdown-mermaid
      ```


    - **Usage**:


      ```javascript
      const showdown = require('showdown');
      const showdownMermaid = require('showdown-mermaid');

      const converter = new showdown.Converter({
        extensions: [showdownMermaid]
      });

      const markdown = '```

mermaid\ngraph TD;\n  A-->B;\n  A-->C;\n  B-->D;\n  C-->D;\n

```';
      const html = converter.makeHtml(markdown);
      console.log(html);
      ```



### External Links


---

These extensions showcase the versatility and extensibility of ShowdownJS, enabling you to tailor it to your specific needs. Whether you need syntax highlighting, media embedding, custom containers, or additional HTML sanitization, these extensions provide robust solutions.

DEV Community

Top ShowdownJS Extensions and Their Usage

Top 20 ShowdownJS Extensions and Their Usage

Syntax Highlighting

Media Embedding

Link Handling

Emoji Support

Tooltip Support

Table of Contents

Math Support

Footnotes

Task Lists

Smart Punctuation

Audio Embedding

Image Handling

Custom Containers

Sanitizing HTML

Alerts and Notifications

Code Copy Button

Top comments (0)

Read next

Mastering JavaScript Decorators

Important Topics for Frontend Developers to Master in 2025

7 Best Java IDEs for Developers

Custom YouTube Player Gadget with Javascript