MarkdownIt Extra JS Plugin

This project is currently under development. It is not yet ready for official release, and the functionality or API may change.

Overview

This project is designed to enable JavaScript for UnoCSS, Mermaid, and Font Awesome in Markdown and Marp.

For detailed documentation and updates, please refer to the documentation at vscode-markdown-extrajs.

Utilities

This module includes utility plugins for markdown-it. These plugins are intended solely for outputting tags, and it is assumed that they will be used in combination with markdown-it-attrs.

block-tag-plugin

src:

1import MarkdownIt from "markdown-it";
2import markdownItAttrs from "markdown-it-attrs";
3import blockTagPlugin from "@morish000/markdown-it-extrajs/block-tag-plugin";
4
5const md = new MarkdownIt();
6md
7  .use(blockTagPlugin, "test-div", { tag: "div", marker: ":", markerCount: 3 })
8  .use(blockTagPlugin, "test-pre", {
9    tag: "pre",
10    marker: "[",
11    endMarker: "]",
12    markerCount: 3,
13  })
14  .use(markdownItAttrs);
15
16console.log(md.render(`::: test-div {#sample1 .class1-a .class1-b}
17example.
18:::`));
19
20console.log(md.render(`[[[ test-pre {#sample2 .class2-a .class2-b}
21example.
22]]]`));

output:

1<div data-block-tag-name="test-div" id="sample1" class="class1-a class1-b">
2<p>example.</p>
3</div>
4
5<pre data-block-tag-name="test-pre" id="sample2" class="class2-a class2-b">
6example.
7</pre>

inline-tag-plugin

src:

1import MarkdownIt from "markdown-it";
2import markdownItAttrs from "markdown-it-attrs";
3import inlineTagPlugin from "@morish000/markdown-it-extrajs/inline-tag-plugin";
4
5const md = new MarkdownIt();
6md.use(inlineTagPlugin, "test-span", {
7  tag: "span",
8  marker: "=",
9  endMarker: "=",
10  markerCount: 2,
11}).use(markdownItAttrs);
12
13console.log(md.render("This is a ==test=={.class1-a .class1-b}."));

output:

1<p>This is a <span data-inline-tag-name="test-span" class="class1-a class1-b">test</span>.</p>

void-tag-plugin

src:

1import MarkdownIt from "markdown-it";
2import markdownItAttrs from "markdown-it-attrs";
3import voidTagPlugin from "@morish000/markdown-it-extrajs/void-tag-plugin";
4
5const md = new MarkdownIt();
6md.use(voidTagPlugin, "test-br", {
7  tag: "br",
8  marker: "$",
9  isVoidElement: true,
10  markerCount: 2,
11})
12  .use(voidTagPlugin, "test-i", {
13    tag: "i",
14    marker: "@",
15    isVoidElement: false,
16    markerCount: 2,
17  })
18  .use(markdownItAttrs);
19
20console.log(md.render("123$$!456"));
21console.log(md.render("Icon: @@!{.icon1 .icon2} test."));

output:

1<p>123<br data-void-tag-name="test-br">456</p>
2
3<p>Icon: <i data-void-tag-name="test-i" class="icon1 icon2"></i> test.</p>

License

This project is licensed under the MIT License - see the LICENSE file for details.