准备工作
- 从官网下载资源包
- 将下载的压缩包解压,复制下图中的文件到项目中
katex.min.css和katex.min.js这两个文件不是原先下载包里就有的,点击文件名单独下载并放到上图中所示位置 - 修改
editormd.min.js文件的t.katexURL的值,原先是从网络上请求的,但是资源在国外,这个明显用不了,所以我们把它换成本地的文件
t.katexURL = {
css: "lib/editormd/css/katex.min",
js: "lib/editormd/katex.min"
}
编辑器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Editor.md Example</title>
<link rel="stylesheet" href="./editormd/css/editormd.min.css">
</head>
<body>
<div class="field">
<div id="md-content" style="z-index: 1 !important;">
<textarea placeholder="博客内容" content="content" style="display: none">
#### Disabled options
- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;
</textarea>
</div>
</div>
<script src="./jquery.min.js"></script>
<script src="./editormd/editormd.min.js"></script>
<script type="text/javascript">
//初始化Markdown编辑器
$(function () {
var contentEditor = editormd("md-content", {
width: "100%",
height: 640,
syncScrolling: "single",
path: "./editormd/lib/"
});
});
</script>
</body>
</html>
编辑器只需要 editormd.min.css和 editormd.min.js这两个就行,如果有使用jQuery,jquery.min.js要放在 editormd.min.js之前,最后初始化编辑器时需要指定lib的目录位置
Markdown转html预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Editor.md 预览</title>
<link rel="stylesheet" href="./editormd/css/editormd.min.css">
<link rel="stylesheet" href="./editormd/css/editormd.preview.css">
<script src="./jquery.min.js"></script>
<script src="./editormd/lib/marked.min.js"></script>
<script src="./editormd/lib/prettify.min.js"></script>
<script src="./editormd/lib/raphael.min.js"></script>
<script src="./editormd/lib/underscore.min.js"></script>
<script src="./editormd/lib/flowchart.min.js"></script>
<script src="./editormd/lib/jquery.flowchart.min.js"></script>
<script src="./editormd/lib/sequence-diagram.min.js"></script>
<script src="./editormd/editormd.min.js"></script>
</head>
<body>
<div id="window-content" class="window-content" style="display: flex;flex-direction: row;width: 80%;">
<div id="article-md-body" class="window-box" style="flex: 1;"></div>
<div id="article-toc" class="toc-container" style="min-width: 300px;margin-left: 20px;"></div>
</div>
<script type="text/javascript">
var content = '#### Disabled options\r\n\t- TeX (Based on KaTeX);\r\n\t- Emoji;\r\n\t- Task lists;\r\n\t- HTML tags decode;\r\n\t- Flowchart and Sequence Diagram;'
//初始化Markdown编辑器
$(function () {
editormd.markdownToHTML("article-md-body", {
markdown: content,
htmlDecode: "style,script,iframe", // 可以在这里设置允许渲染的 HTML 标签
tocm: true,
tocContainer: "#article-toc",
tocTitle: "目录",
emoji: false,
taskList: true,
tex: true, // 默认不解析
flowChart: true, // 默认不解析
sequenceDiagram: true, // 默认不解析
});
});
</script>
<style>
/* 为目录容器添加一些通用样式 */
#article-toc {
font-family: 'Arial', sans-serif;
font-size: 14px;
line-height: 1.6;
color: #555;
}
/* 优化列表项 */
#article-toc .markdown-toc-list {
list-style-type: none;
/* 移除项目符号 */
padding-left: 0;
/* 移除默认的内边距 */
}
/* 优化列表项之间的间距 */
#article-toc .markdown-toc-list li {
margin-bottom: 5px;
}
/* 添加悬停效果 */
#article-toc .markdown-toc-list li a:hover {
color: #000;
text-decoration: underline;
}
/* 活动项样式 */
#article-toc .markdown-toc-list li.active a {
color: #017ACD;
/* 您可以选择一个适合您站点的颜色 */
font-weight: bold;
}
</style>
</body>
</html>
这里做了一些目录样式效果的优化
评论区