July 6, 2024

Top ShowdownJS Extensions and Their Usage

Claudio Ctin011 mins
RMAG news

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

– **Usage**:
“`javascript
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

– **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 = ‘!(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 = ‘::: 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

– **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 = ‘::: 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

– **Usage**:
“`javascript
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

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 = ‘“`

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.

Stiri similare