md-to-web

将markdown转化为html

1.0.8
latest
Source
npm

Version published: 2 years ago

Maintainers: 1

Created: 2 years ago

Source

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

Keywords

FAQs

What is md-to-web?

Is md-to-web well maintained?

Package last updated on 10 Dec 2022

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.

Install