digitalocean/do-markdownit

JavaScript

Open original ↗

Captured source

source ↗
published Feb 25, 2022seen 5dcaptured 12hhttp 200method plain

digitalocean/do-markdownit

Description: Markdown-It plugin for the DigitalOcean Community.

Language: JavaScript

License: Apache-2.0

Stars: 103

Forks: 26

Open issues: 13

Created: 2022-02-25T21:35:57Z

Pushed: 2026-02-14T04:01:24Z

Default branch: master

Fork: no

Archived: no

README:

do-markdownit

Markdown-It plugin for the DigitalOcean Community.

This plugin is what we use across the DigitalOcean Community site to extend the standard functionality of Markdown with additional features, such as automatic code syntax highlighting, video embeds, and more.

You can see this plugin in action and try it out on our Markdown sandbox page.

Getting Started

Install Markdown-It and the plugin:

npm install markdown-it @digitalocean/do-markdownit

Instantiate Markdown-It and the plugin, and render some Markdown:

const md = require('markdown-it')({}).use(require('@digitalocean/do-markdownit'), {});

md.render('# Hello, world!\n\n[info]do-markdownit is loaded!');

Plugin Features & Options

do-markdownit is composed of a set of individual plugins, with the ability to disable each if needed, and many having specific options that can be set. All plugins are enabled by default, except limit_tokens.

highlight

Add support for highlight markup across all Markdown, including inside code.

The syntax for highlighting text is `. E.g. hello world`. This syntax is treated as regular inline syntax, similar to bold or italics. However, when used within code the opening and closing tags must be on the same line.

Example Markdown input:

test

hello
world
test

Example HTML output:

test

hello world test

Options:

Pass options for this plugin as the highlight property of the do-markdownit plugin options. Set this property to false to disable this plugin.

_No options are available for this plugin._

user_mention

Add support for mentioning users, using an @ symbol. Wraps the mention in a link to the user.

By default, any characters that are not a space or newline after an @ symbol will be treated as a mention.

Example Markdown input:

Hello @test

Example HTML output:

Hello @test

Options:

Pass options for this plugin as the user_mention property of the do-markdownit plugin options. Set this property to false to disable this plugin.

  • pattern (RexExp, optional): A pattern to match user mentions, applied to the string after the @ symbol.
  • path (function(string): string, optional): A function to get the URL path for a user mention.

html_comment

Removes all HTML comments from Markdown.

This treats HTML comments as Markdown syntax, so expects them to either be inline, or a full block. Comments that start inline and then span a block will not be removed.

By default, removal is loose, meaning that it does not need to explicitly find the end of a comment to remove it. If no closing mark is found, the end of the line or block is assumed. This behaviour can be disabled with the strict setting, which will require finding the end of the comment.

Example Markdown input:

Hello world

Example HTML output:

Hello world

Options:

Pass options for this plugin as the html_comment property of the do-markdownit plugin options. Set this property to false to disable this plugin.

  • strict (boolean, optional, defaults to false): If the end of a comment must be explicitly found.

image_caption

Wrap singleton images that have title text in a figure with a rendered caption.

Example Markdown input:

![alt text](test.png "title text")

![alt text](test.png "title text _with Markdown_")

Example HTML output:

title text

title text with Markdown

Options:

Pass options for this plugin as the image_caption property of the do-markdownit plugin options. Set this property to false to disable this plugin.

_No options are available for this plugin._

table_wrapper

Add wrapper element around Markdown tables for better controlled overflow.

No new syntax added. This just wraps normal Markdown | a | tables with a div that has a default class of table-wrapper.

Example Markdown input:

| a | |---|

Example HTML output:

a

Options:

Pass options for this plugin as the table_wrapper property of the do-markdownit plugin options. Set this property to false to disable this plugin.

  • className (string, optional, defaults to 'table-wrapper'): Class to use for the table wrapper.

collapsible_heading

Wrap specific headings in detail tag and make the content collapsible

If an array of heading tags is provided, all those tags and the related content will be wrapped in a details tag, with the heading as the summary.

Nesting multiple collapsible sections is supported.

Example Markdown input:

H1 header

Test row

Example HTML output:

H1 header

Test row

Options:

Pass options for this plugin as the collapsible_heading property of the do-markdownit plugin options. This plugin is disabled by default, pass an object to enable it.

  • levels (number[], optional, defaults to [ 1, 2, 3, 4, 5, 6 ]): List of heading tags to wrap (ex: 2).
  • open (boolean, optional, defaults to true): Flag indicating if the wrapped sections should be expanded by default.
  • className (string, optional, defaults to 'collapsible'): Class name to use on the collapsed section.

callout

Add support for callout embeds in Markdown, as block syntax.

The basic syntax is []. E.g. [hello]world. The class must be in square brackets, and must come immediately after the opening ``. Newlines are allowed in the text, as is any other Markdown syntax (both block and inline).

Callouts can also have a label set within them. The label should be in the format [label ]. The label must be on the first newline after the opening ``. The label cannot contain any newlines, but does support inline Markdown syntax.

Example Markdown input:

[info] test

[info] [label hello] world

Example HTML output:

test

hello

world

Options:

Pass options for this plugin as the callout property of the do-markdownit plugin options. Set this property to false to disable this plugin.

  • allowedClasses (string[], optional): List of case-sensitive classes that are allowed. If not an array, all classes are…

Excerpt shown — open the source for the full document.