使用editor.md渲染markdown并自定义目录

使用editor.md渲染markdown并自定义目录

一、需求

最近在开发个人博客，在做文章详情页的时候，需要将markdown格式的文本字符串渲染成html页面，于是逛github的时候发现了这一款markdown在线编辑器，它支持将markdown文本解析成html字符串。

二、Editor.md简介

Editor.md是一款基于CodeMirror & jQuery & Marked的开源在线markdown编辑器。在GitHub上斩获12.1k starts。
github链接
官网地址

它具有以下特性：

• 支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法，也可变身为代码编辑器；
• 支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
• 支持 ToC（Table of Contents）、Emoji表情、Task lists、@链接等 Markdown 扩展语法；
• 支持 TeX 科学公式（基于 KaTeX）、流程图 Flowchart 和 时序图 Sequence Diagram;
• 支持识别和解析 HTML 标签，并且支持自定义过滤标签及属性解析，具有可靠的安全性和几乎无限的扩展性；
• 支持 AMD / CMD 模块化加载（支持 Require.js & Sea.js），并且支持自定义扩展插件；
  兼容主流的浏览器（IE8+）和 Zepto.js，且支持 iPad 等平板设备；
  
  

三、使用Editor.md

Editor.md使用起来非常简单，首先使用github download下载Editor.md

然后在项目根目录下新建editor.md文件夹，将下载得到的下列文件复制粘贴到该文件夹中。

使用前我们需要将editor.md对应的文件引入页面

<!-- 引入editor.md相关样式 -->
<link rel="stylesheet" href="../editor.md/css/editormd.preview.css" />

<!-- 引入editor.md js文件 -->
<script src="../editor.md/jquery.min.js"></script>
<script src="../editor.md/editormd.js"></script>
<script src="../editor.md/lib/marked.min.js"></script>
<script src="../editor.md/lib/prettify.min.js"></script>

准备一个容器，用于渲染markdown文本

<div id="article-md-body" class="article-md-body"></div>

//目录容器
<div class="pannel article-toc" id="article-toc"></div>

渲染markdown，调用editormd.markdownToHTML(id , config)传入容器id和配置对象即可。

var editor = editormd.markdownToHTML('article-md-body', {
  markdown: ’‘, //待渲染的markdown文本字符串
  tocContainer: '#article-toc',	//指定目录容器的id
  tocDropdown: false
})

效果如下图（当然这里的效果图添加了一些自己编写的额外样式，本文只列出与editor.md相关的代码）

可以自己给目录编辑一些样式，美化一下，目录本身是没有缩进的,我们可以自己使用js给目录添加缩进用来展示层级关系

// 目录层级
const tocLink = document.querySelectorAll('a[level]')	//目录的每一项就是一个包含level属性的a标签
tocLink.forEach((item) => {
  const level = parseInt(item.getAttribute('level'))
  item.style.paddingLeft = (level - 1) * 10 + 'px'	//利用level属性的值设置左padding
})

最终效果