web页面 js 加载和显示Markdown .md文件总结
段阳夏
Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。Markdown的语法简洁明了、学习容易，而且功能比纯文本更强，因此有很多技术博客都采用Markdown来显示，如：简书、csdn等。Markdown编辑器主要有两类，都可以导出.md文件：
- 客户端：Typora，有道笔记等
- 在线编辑器：简书、CSDN等
本文讨论web页面（html、jsp等）如何用js显示md文件，基本流程如下：
- ajax 请求加载md文件
- js解析md文件内容，将md文本转换成html dom
- 网页加载转换后的html dom
- 加载md 匹配的css
这里有2个关键技术点：
- md格式内容解析
- 匹配md格式、美观的css
1、md格式内容解析
github上有很多开源的md解析框架，star比较多的有：
- markedjs
- markdown
- showdown
- remark
使用方法都大同小异，将md文本内容转换成html dom，但是转换结果却差异很大，个人推荐marked
2、匹配的css
上述框架都没有提供详尽的css，要想实现类似简书等美观的展示效果，需要UI团队自行实现，网上倒是有github的markdown css可以参考：
https://cdn.bootcss.com/github-markdown-css/3.0.1/github-markdown.css
3、一个来自有道的markdown在线编辑、预览器
下面看一个来在有道笔记的markdown在线编辑、预览器，html代码如下：
<!DOCTYPE html>
<html manifest="index.appcache">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="referrer" content="none">
<title>有道云笔记</title>
</head>
<body data-mode="edit">
<div class="ui-layout-toggler" id="north-toggler"></div>
<div class="ui-layout-south">
<div class="ui-layout-center">
<div id="editor"></div> <!-- 编辑器 -->
</div>
<div class="ui-layout-toggler" id="east-toggler"></div>
<div class="ui-layout-east">
<article class="markdown-body" id="preview" data-open-title="Hide Preview" data-closed-title="Show Preview">
</article> <!-- 实时预览 -->
</div>
</div>
<div class="theme-list"></div>
<script src="https://note.youdao.com/md/vendor-c7413287a3.js"></script>
<script src="https://note.youdao.com/md/index-3abeeca70a.js"></script>
</body>
</html>
类似资料：