markdown-it
markdown-it是一个流行的JavaScript库，用于将Markdown文本转换为HTML格式。它基于CommonMark规范，一个广泛使用的Markdown解析标准。markdown-it 提供了简单易用的AP
主要特点包括：
- 强大的解析能力：它能够准确地将 Markdown 文本转换为 HTML 格式，支持常见的 Markdown 语法元素，如标题、段落、列表、链接、图片、代码块等。
- 可扩展性：允许通过插件进行扩展，可以添加自定义的功能和语法支持。例如，可以添加对特定的数学公式渲染、任务列表、图表等的支持。
- 简洁高效：代码简洁，性能高效，能够快速处理大量的 Markdown 文本。
- 易于使用：在前端开发中，可以很容易地集成到各种项目中。通常只需要引入
markdown-it的库文件，然后创建一个实例并调用其方法即可将 Markdown 文本转换为 HTML。
安装&使用
node.js & bower:
代码语言：bash复制npm install markdown-it --save
bower install markdown-it --save用法示例
简单用法
代码语言：js复制// node.js, 用“类”的方式：
var MarkdownIt = require('markdown-it'),
md = new MarkdownIt();
var result = md.render('# markdown-it rulezz!');
// 还是 node.js, 但使用更爽的方式：
var md = require('markdown-it')();
var result = md.render('# markdown-it rulezz!');
// 没有 AMD 的浏览器环境，在 js 脚本加载时才添加到“window”
// 注意，“markdownit” 中没有破折号。
var md = window.markdownit();
var result = md.render('# markdown-it rulezz!');单行渲染，不进行段落换行：
代码语言：js复制var md = require('markdown-it')();
var result = md.renderInline('__markdown-it__ rulezz!');插件加载
代码语言：js复制var md = require('markdown-it')()
.use(plugin1)
.use(plugin2, opts, ...)
.use(plugin3);语法高亮
使用 highlight 选项给围栏代码块应用语法高亮功能：
var hljs = require('highlight.js'); // https://highlightjs.org/
// 通常的默认值们
var md = require('markdown-it')({
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(lang, str).value;
} catch (__) {}
}
return ''; // 使用额外的默认转义
}
});或者使用完全的包裹器覆盖（如果你需要复制 class 到 <pre>）：
var hljs = require('highlight.js'); // https://highlightjs.org/
// 通常的默认值们
var md = require('markdown-it')({
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return '<pre class="hljs"><code>'
hljs.highlight(lang, str, true).value
'</code></pre>';
} catch (__) {}
}
return '<pre class="hljs"><code>' md.utils.escapeHtml(str) '</code></pre>';
}
});实现打字机AI对话效果
自定义插件光标cursor
代码语言：js复制// ### 自定义插件 光标
function plugin(md, options) {
md.core.ruler.after("replacements", "cursor", (state) => {
const cursor = new state.Token("html_inline", "span", 0);
cursor.content = `<span class="${options.class || "curour"}" />`;
let index = -1;
for (let i = state.tokens.length - 1; i >= 0; i--) {
if (state.tokens[i].type.indexOf("_close") === -1) {
index = i;
break;
}
}
const item = state.tokens[index];
if (item) {
if (item.tag && item.tag !== "text") {
item.attrs = [["class", options.class || "curour"]];
} else {
state.tokens.splice(index 1, 0, cursor);
}
}
});
}
md.use(plugin, {
class: "cursor",
});setInterval模拟延迟数据流
通过isEnd模拟标记数据流完成，给content 加上对应className隐藏光标
代码语言：js复制 // setInterval模拟延迟数据流
const printEffect = setInterval(() => {
if (index < content.length) {
c = content[index];
index ;
} else {
isEnd = true;
document.getElementById("content").classList.add("isEnd");
clearInterval(printEffect);
}
document.getElementById("content").innerHTML = renderMarkDown(c);
}, 50);完整代码
代码语言：html复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Markdown-it实现打字机AI对话效果</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.1/markdown-it.min.js"></script>
<style>
* {
}
.content {
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
}
.cursor {
display: inline-block;
content: "";
width: 10px;
height: 10px;
background: #141414;
animation: blink 1s infinite;
}
.isEnd {
.cursor {
display: none;
}
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div id="content"></div>
<script>
const md = new markdownit();
const content = `
清华大学是中国顶尖的综合性研究型大学，属于中国的“C9联盟”成员之一，这是中国版的常春藤联盟，代表着中国最高水平的大学。清华大学也是“985工程”和“211工程”的重点建设高校。
学校招生信息：
- 招生办电话：010－62770334
- 学校官网URL：[清华大学官网](http://www.tsinghua.edu.cn)
专业实力和排名：
清华大学在工程学、计算机科学、建筑学、管理学等领域的专业实力在全球范围内都非常突出。例如，其工程技术学科在2023年QS世界大学专业排名中位列全球第一。此外，清华大学的其他许多专业也在国内外排名中位居前列。
师资力量：
清华大学拥有一支高水平的教师队伍，包括众多中国科学院和中国工程院院士。学校注重引进和培养高水平的教师，不断提升教学和科研水平。`;
const renderMarkDown = (text) => {
return md.render(text);
};
let index = 0;
let c = "";
let isEnd = false;
// setInterval模拟延迟数据流
const printEffect = setInterval(() => {
if (index < content.length) {
c = content[index];
index ;
} else {
isEnd = true;
document.getElementById("content").classList.add("isEnd");
clearInterval(printEffect);
}
document.getElementById("content").innerHTML = renderMarkDown(c);
}, 50);
</script>
</body>
</html>
最后
Markdown-it还有很多拓展插件，比如和mathjax结合一起渲染输出公式等等。
