markdown-transform-html

Introduce

Markdown converter, convert Markdwon content to HTML format.

v2.0 起默认引擎基于 markdown-it（100% CommonMark 兼容），保留全部业务扩展语法（::: 布局容器、icon:/svg: 行内图标、图片尺寸），并修复 v1 的正确性问题与 XSS 风险。公开 API 不变：markdownToHTML(template, options)。

详见 docs/v2-migration.md。

The online demo

The online demo

Prompt

To make the style apply only to the part that needs to be parsed, be sure to add a 'markdown-transform-html' class declaration to the parsed container.

Use

install

pnpm install markdown-transform-html

or

npm install markdown-transform-html

or

yarn add markdown-transform-html

Example

import { markdownToHTML } from "markdown-transform-html"
import  "markdown-transform-html/lib/styles/index.css";

const markdownContent = `#### level 4`;
const html = markdownToHTML(markdownContent);
(document.querySelector("#app") as Element).innerHTML = html;

Highlighting

If you want to highlight code, then you need to introduce the following css styles and configure options, which is optional.

markdownToHTML(markdownContent, { highlight: true });

MarkdownToHTML Options

Configure the markdownToHTML options

property name	type	default value	meaning
lineNumber	Boolean	false	If you need line numbers, turn this option on
highlight	Boolean	false	If you need to highlight code in markdown, turn this option on
xss	Boolean	true	To prevent users from xss attacks on your application, xss is used by default. If you want to turn it off, you can set it to false

Problems

Q: Why does highlighting fail after code changes?

A: After the content has been modified you should re-highlight the code using the reHighlight method

// example
import { reHighlight } from "markdown-transform-html"
reHighlight();

Sponsorship

If you think this project is helpful to you and circumstances permit, you can give me a little support. In short, thank you very much for your support ~

License

MIT coderlei