# markdown-transform-html

> markdown-transform-html 2.x: a CommonMark-compliant Markdown to HTML engine (markdown-it based) with resume layout extensions — multi-column/head/main containers, icon & svg inline syntax, image size syntax. (基于 markdown-it 的标准 Markdown 转 HTML 引擎，扩展简历多列布局

Latest version **2.0.2** (published 2026-09-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install markdown-transform-html
pnpm add markdown-transform-html
yarn add markdown-transform-html
bun add markdown-transform-html
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2026-09-01 |
| First published | 2022-09-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 369.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | coderlei |
| Maintainers | codelei |
| Keywords | markdown-parser, markdown-transform, markdown-html, code-line-number, highlight, syntax-high |

## Links

- npm: https://www.npmjs.com/package/markdown-transform-html
- Repository: https://github.com/Acmenlei/markdown-plus
- Homepage: https://github.com/Acmenlei/markdown-plus#readme
- Issues: https://github.com/acmenlei/markdown-plus/issues
- npm.io page: https://npm.io/package/markdown-transform-html

## Dependencies (2)

- [markdown-it](https://npm.io/package/markdown-it.md) ^14.1.0
- [markdown-it-cjk-friendly](https://npm.io/package/markdown-it-cjk-friendly.md) ^3.0.0

## Alternatives

- [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads
- [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads
- [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads
- [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads
- [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads

## Recent versions

- 2.0.2 (latest) — 2026-09-01
- 2.0.1 — 2026-09-01
- 2.0.0 — 2026-08-31
- 1.8.4 — 2025-08-16
- 1.8.3 — 2025-04-14
- 1.8.2 — 2025-04-14
- 1.8.1 — 2024-07-06
- 1.8.0 — 2024-06-26
- 1.7.9 — 2024-06-26
- 1.7.8 — 2023-11-13
- 1.7.7 — 2023-11-13
- 1.7.6 — 2023-11-12
- 1.7.5 — 2023-10-24
- 1.7.4 — 2023-10-24
- 1.7.3 — 2023-10-24
- … 48 more at https://npm.io/package/markdown-transform-html/versions

## README

<div align="center">
	<h3>markdown-transform-html</h3>
	<p align="center">
	    <a href="https://github.com/Acmenlei/markdown-to-html/tree/master" target="_blank">
	        <img src="https://img.shields.io/badge/markdown--transform--html-%3E1.3-ff69b4" alt="markdown-transform-html">
	    </a>
		<a href="https://www.tslang.cn/" target="_blank">
	        <img src="https://img.shields.io/badge/typescript-%3E4.0.0-blue" alt="typescript">
	    </a>
	</p>
	<p>&nbsp;</p>
</div>

## 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 ~

<div style="display: flex; gap: 20px;" >
<div style="text-align: center">
<p>WeChat</p>
<img style="width: 165px; height: 165px" src="./docs/wechat.jpg "alt=" wechat" />
</div>
<div style="text-align: center">
<p>Alipay</p>
<img style="width: 165px; height: 165px" src="./docs/alipay.jpg "alt=" alipay" />
</div>
</div>

## License

MIT © [coderlei](./license)

---
_Source: https://npm.io/package/markdown-transform-html · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._