markdown-transform-html

Introduce

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, ...).

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

npm install markdown-transform-html

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 ~

WeChat

Alipay

markdown-transform-html