Top ShowdownJS Extensions and Their Usage
Tags: showdownjs, extensions, javascript, webdev
Published: 2024-07-03 01:41:23

## 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

1. **Showdown Highlight Extension**
   - **Description**: Adds syntax highlighting to code blocks.
   - **Installation**: 
     ```bash
     npm install showdown-highlight
     ```
   - **Usage**:
     ```javascript
     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

2. **Showdown YouTube Embed Extension**
   - **Description**: Embeds YouTube videos with simple syntax.
   - **Installation**:
     ```bash
     npm install showdown-youtube
     ```
   - **Usage**:
     ```javascript
     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);
     ```

3. **Showdown CodePen Embed Extension**
   - **Description**: Embeds CodePen snippets.
   - **Installation**: 
     ```bash
     npm install showdown-codepen
     ```
   - **Usage**:
     ```javascript
     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

4. **Showdown Target Blank Extension**
   - **Description**: Modifies links to open in a new tab.
   - **Installation**:
     ```bash
     npm install showdown-target-blank
     ```
   - **Usage**:
     ```javascript
     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

5. **Showdown Emoji Extension**
   - **Description**: Adds emoji support.
   - **Installation**:
     ```bash
     npm install showdown-emoji
     ```
   - **Usage**:
     ```javascript
     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

6. **Showdown Tooltip Extension**
   - **Description**: Adds tooltips to text.
   - **Installation**:
     ```bash
     npm install showdown-tooltip
     ```
   - **Usage**:
     ```javascript
     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);
     ```

### Table of Contents

7. **Showdown TOC Extension**
   - **Description**: Generates a table of contents from headings.
   - **Installation**:
     ```bash
     npm install showdown-toc
     ```
   - **Usage**:
     ```javascript
     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

8. **Showdown MathJax Extension**
   - **Description**: Adds MathJax support for rendering mathematical expressions.
   - **Installation**:
     ```bash
     npm install showdown-mathjax
     ```
   - **Usage**:
     ```javascript
     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

9. **Showdown Footnotes Extension**
   - **Description**: Adds support for footnotes.
   - **Installation**:
     ```bash
     npm install showdown-footnotes
     ```
   - **Usage**:
     ```javascript
     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

10. **Showdown Task Lists Extension**
    - **Description**: Adds support for task lists.
    - **Installation**:
      ```bash
      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

11. **Showdown Smartypants Extension**
    - **Description**: Converts ASCII punctuation characters into "smart" typographic punctuation HTML entities.
    - **Installation**:
      ```bash
      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);
      ```


13. **Showdown External Links Extension**
    - **Description**: Adds target="_blank" and rel="noopener noreferrer" to external links.
    - **Installation**:
      ```bash
      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

14. **Showdown Audio Embed Extension**
    - **Description**: Embeds audio files.
    - **Installation**:
      ```bash
      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

15. **Showdown Lazy Load Images Extension**
    - **Description**: Adds lazy loading to images.
    - **Installation**:
      ```bash
      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

16. **Showdown Container Extension**
    - **Description**: Adds custom container blocks.
    - **Installation**:
      ```bash
      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

17. **Showdown xssFilter Extension**
    - **Description**: Adds an XSS filter to the output HTML.
    - **Installation**:
      ```bash
      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

18. **Showdown Alert Extension**
    - **Description**: Adds alert boxes.
    - **Installation**:
      ```bash
      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

19. **Showdown Copy Code Button Extension**
    - **Description**: Adds a copy button to code blocks.
    - **Installation**:
      ```bash
      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.