Top ShowdownJS Extensions and Their Usage

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:

    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

1. 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);
  

1. 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

1. 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

1. 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

1. 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);
  

Table of Contents

1. 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

1. 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

1. 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

1. 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

1. 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);
  ```

1. 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

1. 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

1. 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

1. 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

1. 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

1. 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

1. 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.