Md-to-web NPM | npm.io

md-to-web

将 markdown 转化为 html。不用区分前端框架（如：react、vue、vue3、vanilla 等），适用于所有的能够使用 js/ts 的环境！

安装

npm 方式

// npm
npm install md-to-web@latest

//yarn
yarn add md-to-web@latest

cdn 方式

// 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>

使用

提供如下方法：

1、mdToHtml

将 markdown 字符串转化为 html 格式文本

参数	必须	类型	描述
mdstr	✅	string	传入的 markdown 字符串

2、mdRender

接收 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");

3、setCatalog

根据 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);