Top ShowdownJS Extensions and Their Usage

Sh Raj - Jul 3 - - Dev Community

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**:
Enter fullscreen mode Exit fullscreen mode 
  ```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);
  ```
Enter fullscreen mode Exit fullscreen mode

Smart Punctuation

  1. Showdown Smartypants Extension

    • Description: Converts ASCII punctuation characters into "smart" typographic punctuation HTML entities.
    • Installation: 
      npm install showdown-smartypants

- **Usage**:
Enter fullscreen mode Exit fullscreen mode 
  ```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);
  ```
Enter fullscreen mode Exit fullscreen mode

  1. Showdown External Links Extension

    • Description: Adds target="_blank" and rel="noopener noreferrer" to external links.
    • Installation: 
      npm install showdown-external-links

- **Usage**:
Enter fullscreen mode Exit fullscreen mode 
  ```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);
  ```
Enter fullscreen mode Exit fullscreen mode

Audio Embedding

  1. Showdown Audio Embed Extension

    • Description: Embeds audio files.
    • Installation: 
      npm install showdown-audio-embed

- **Usage**:
Enter fullscreen mode Exit fullscreen mode 
  ```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);
  ```
Enter fullscreen mode Exit fullscreen mode

Image Handling

  1. Showdown Lazy Load Images Extension

    • Description: Adds lazy loading to images.
    • Installation: 
      npm install showdown-lazy-load-images

- **Usage**:
Enter fullscreen mode Exit fullscreen mode 
  ```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);
  ```
Enter fullscreen mode Exit fullscreen mode

Custom Containers

  1. Showdown Container Extension

    • Description: Adds custom container blocks.
    • Installation: 
      npm install showdown-container

- **Usage**:
Enter fullscreen mode Exit fullscreen mode 
  ```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);
  ```
Enter fullscreen mode Exit fullscreen mode

Sanitizing HTML

  1. Showdown xssFilter Extension

    • Description: Adds an XSS filter to the output HTML.
    • Installation: 
      npm install showdown-xss-filter

- **Usage**:
Enter fullscreen mode Exit fullscreen mode 
  ```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);
  ```
Enter fullscreen mode Exit fullscreen mode

Alerts and Notifications

  1. Showdown Alert Extension

    • Description: Adds alert boxes.
    • Installation: 
      npm install showdown-alert

- **Usage**:
Enter fullscreen mode Exit fullscreen mode 
  ```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);
  ```
Enter fullscreen mode Exit fullscreen mode

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**:
Enter fullscreen mode Exit fullscreen mode 
  ```javascript
  const showdown = require('showdown');
  const showdownCopyCodeButton = require('showdown-copy-code-button');

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

  const markdown = '```
Enter fullscreen mode Exit fullscreen mode


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.
Enter fullscreen mode Exit fullscreen mode
Image
Sapi yang ga mikir akan kemaslahatan dirinya

javascript, beginners, productivity, node
Image
berikut ini arti utama di perjudian slots online
Image
mengapa slots online dapat dipercaya punyai link preferensi?
Image
Article_NOSQL Databases Cassandra - Corrales
Image
History Of Bifold Door Repair Near Me: The History Of Bifold Door Repair Near Me
Image
Can't run python script from terminal but can from PyCharm: ModuleNotFoundError

python, terminal
Image
Your Family Will Be Grateful For Having This Self Propelled Wheelchair Uk
Image
TESTING
Image
Still don't get React server components? Read this one sentence

react, webdev, nextjs
Image
The Advanced Guide To Bi Folding Door Repair
Image
Where Will Mesothelioma And Asbestos Lawyer Be One Year From Now?
Image
Mobile Apps Transforming Roofing Estimates: Top Tools for 2024
Image
StoreBuddy AI Review – Maximize Sales and Save Time with It

storebuddyai, storebuddyaireview, affiliatemarketing, digitalmarketer
Image
20 Irrefutable Myths About What Is The Lightest Self Propelled Wheelchair: Busted
Image
How To Find Zombie Hosts With Nmap?

nmap, pentest, security, network
Image
5 Asbestos Lawsuit Payouts Projects For Any Budget
Image
Strategic AI Implementation: When, Why, and How?

ai, chatgpt, learning, productivity
Image
NGS Solution - Top software development company in USA

powerapps, softwaredevelopment, webdev, sharepoint
Image
Website Design Services: Elevating Your Online Presence
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .