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

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