markdown-transform-html
## Introduce
Markdown converter, convert Markdwon content to HTML format.
> **v2.0** 起默认引擎基于 [markdown-it](https://github.com/markdown-it/markdown-it)（100% CommonMark 兼容），保留全部业务扩展语法（`:::` 布局容器、`icon:`/`svg:` 行内图标、图片尺寸），并修复 v1 的正确性问题与 XSS 风险。公开 API 不变：`markdownToHTML(template, options)`。
>
> 详见 [docs/v2-migration.md](./docs/v2-migration.md)。
[The online demo](https://acmenlei.github.io/markdown-transform-html-demo/dist/)
[The online demo](https://acmenlei.github.io/markdown-transform-html-demo/dist/)
## 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
```shell
pnpm install markdown-transform-html
```
or
```shell
npm install markdown-transform-html
```
or
```shell
yarn add markdown-transform-html
```
## Example
```ts
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.
```ts
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
```js
// 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
## License
MIT © [coderlei](./license)