Markdown converter, convert Markdwon content to HTML format, and provide code line number display and code highlighting effect (currently support javascript, HTML and other languages, later will support C, C++, Java, JS, TS, Ruby, Rust, PHP, GO, ...).
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.
pnpm install markdown-transform-html
or
npm install markdown-transform-html
or
yarn add markdown-transform-html
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;
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 });
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 |
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();
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 ~
MIT © coderlei