将 markdown 转化为 html。 不用区分前端框架（如：react、vue、vue3、vanilla 等），适用于所有的能够使用 js/ts 的环境！
// npm
npm install md-to-web@latest
//yarn
yarn add md-to-web@latest
// umdjs
<script src="https://cdn.jsdelivr.net/npm/md-to-web@latest/dist/mtw.umd.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
/>
<script src="https://cdn.jsdelivr.net/npm/md-to-web@latest/dist/mtw.umd.js"></script>
<title></title>
<style>
#app {
height: 100px;
width: 800px;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
<script>
mtw.mdRender("app", "## 测试标题", "fancy");
</script>
</html>
提供如下方法：
将 markdown 字符串转化为 html 格式文本
| 参数 | 必须 | 类型 | 描述 |
|---|---|---|---|
| mdstr | ✅ | string | 传入的 markdown 字符串 |
接收 dom 到 id，将 markdown 字符串转化为 html 格式文本，并渲染到指定 id 的 dom 上；
| 参数 | 必须 | 类型 | 描述 |
|---|---|---|---|
| id | ✅ | string | 将转化的内容渲染到 id 的元素上 |
| mdstr | ✅ | string | 传入的 markdown 字符串 |
| theme | string | 渲染内容到主题样式，默认 github |
theme 提供的样式： channing-cyan, condensed-night-purple, cyanosis, fancy, github, hydrogen, juejin, smartblue, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate, orange, scrolls-light, simplicity-green, arknights, vuepress, Chinese-red, nico, devui-blue
本库提供主题的枚举类型：Themes，可以通过引入 Themes 来选择主题样式，如下；也可以直接输入上述提供的字符：
import { mdRender, Themes } from "md-to-web";
// 页面id为markdown_id元素渲染子节点<h1>一级标题</h1>， "Themes.Github"为markdown内容的主题样式
mdRender("markdown_id", "# 一级标题", Themes.Github);
// 或者
mdRender("markdown_id", "# 一级标题", "github");
根据 markdown_id 渲染节点内容生成目录数据，并渲染在 catalog_id 的 dom 上，第三个参数 true 表示点击目录定位到 md 内容位置
| 参数 | 必须 | 类型 | 描述 |
|---|---|---|---|
| sourceId | ✅ | string | 需要进行生成目录的 markdownid 的元素 |
| targetId | ✅ | string | 生成目录渲染的 catalogid |
| isClickAnchor | boolean | md 内容是否可以点击目录进行定位，默认 true |
注意：生成的目录层级默认为： h1,h2,h3，对应 markdown 标题等级：'#','##','###'
import { mdToHtml, mdRender, Themes } from "md-to-web";
// 输出：<h1>一级标题</h1>
let html = mdToHtml("# 一级标题");
// 页面id为markdown_id元素渲染子节点<h1>一级标题</h1>， "fancy"为markdown内容的主题样式
mdRender("markdown_id", "# 一级标题", Themes.Github);
// 根据markdown渲染节点内容生成目录数据，并渲染在catalog_id的dom上，第三个参数 true 表示点击目录项定位到md内容位置
setCatalog("markdown_id", "catalog_id", true);
FAQs
将markdown转化为html
We found that md-to-web demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.