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 = ‘“`
javascriptnconsole.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! 🙂‘;
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);
Table of Contents
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 1nn## Heading 2nn### Heading 3n‘;
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]nn[^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
const showdown = require(‘showdown’);
const showdownTaskLists = require(‘showdown-task-lists’);
const converter = new showdown.Converter({
extensions: [showdownTaskLists]
});
const markdown = ‘- [ ] Task 1n- [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
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
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
const showdown = require(‘showdown’);
const showdownAudioEmbed = require(‘showdown-audio-embed’);
const converter = new showdown.Converter({
extensions: [showdownAudioEmbed]
});
const markdown = ‘!(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
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
const showdown = require(‘showdown’);
const showdownContainer = require(‘showdown-container’);
const converter = new showdown.Converter({
extensions: [showdownContainer]
});
const markdown = ‘::: warningn*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
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
const showdown = require(‘showdown’);
const showdownAlert = require(‘showdown-alert’);
const converter = new showdown.Converter({
extensions: [showdownAlert]
});
const markdown = ‘::: alertn*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
const showdown = require(‘showdown’);
const showdownCopyCodeButton = require(‘showdown-copy-code-button’);
const converter = new showdown.Converter({
extensions: [showdownCopyCodeButton]
});
const markdown = ‘“`
javascriptnconsole.log(“Hello, world!”);n
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 = ‘“`
mermaidngraph 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.