【应用】Markdown 在线阅读器

前言

一款在线的 Markdown 阅读器，主要用来展示 Markdown 内容。支持 HTML 导出，同时可以方便的添加扩展功能。在这个阅读器的基础又做了一款在线 Github Pages 页面生成器，可以方便的生成不同主题风格的 GitHub Page 页面。

功能

阅读器

• 支持文件拖拽
• 兼容移动端
• Prism.js / Highlight.js 代码高亮
• 自动生成目录
• 本地图片显示
• 导出 Html （包含样式）
• 扩展功能
  
  • Toto 列表
  • MathJax
  • 时序图 (Js sequence diagrams)
  • Emoji (Emojify.js)
  • 图表 (ECharts)

Github Page 生成器

在上面的基础上加上了下面的功能

• 支持多种页面主题
  
  • Architect
  • Cayman
  • Minimal
  • Modernist
  • Slate
  • Time machine
• 评论
  
  • 多说
  • Disqus

地址

阅读器
在线地址　　效果预览　　源码

生成器
在线地址　　效果预览　　源码

效果

阅读器

生成器

实现

文件解析

程序使用 marked 将 markdown 格式转为 html 格式，这是一个 js 的库，可以直接在浏览器端使用。下面是一个基本的示例

var htmlContent = marked(mdContent);
$("#content").html(htmlContent);

同时 marked 提供了一些接口，让我们可以方便的定制自己的功能。具体的可以参考它的 说明文件 。在下面我们会介绍我们是如何利用这些接口来实现扩展功能。

文件上传

自定义上传按钮样式

原始的上传按钮太丑了，所以我们需要自定义自己的样式。这里使用的方式是使用在 input 上面覆盖一个 button，用 button 来显示样式。同时我们将 button 的 pointer-events 设为 none，就可以阻止 button 的事件响应（具体可以参考这里）。下面是具体的实现代码：
html:

<div class="upload-area" id="upload-area">
    <input type="file" id="select-file" class="select-file">
    <button class="select-file-style" id="drop">选择或者拖拽 Markdown 文件到此</button>
 </div>

css

.upload-area {
  width: auto;
  height: 200px;
  margin: 0 2.6em 0 0.4em;
  padding: 0;
  position: relative;
  cursor: pointer;
  transition: height 0.5s;
}
.upload-area .select-file {
  border-width: 0px;
  width: 100%;
  height: 200px;
  margin: 0;
  cursor: pointer;
}
.upload-area .select-file-style {
  background: #F5F7FA;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  border: 0px;
  pointer-events: none;
  color: #AAB2BD;
  font-size: 2em;
  line-height: 2em;
  font-family: "Microsoft YaHei", "Tahoma", arial;
}

下面是效果图

读取文件内容

因为程序完全是运行在浏览器端，所以我们使用 html5 的 FileReader 来读取本地文件。FileReader 提供 4 种读取文件的方式:

• readAsBinaryString(Blob|File)
• readAsText(Blob|File, opt_encoding)
• readAsDataURL(Blob|File)
• readAsArrayBuffer(Blob|File)

其中 readAsText 用来读取文本文件，readAsDataUrl 可以用来读取图片。具体的介绍可以参考 这里 。FileReader 一般结合文件选择事件或者拖拽事件使用，因为通过这两个事件可以获得源文件。另外 FileReader 是异步读取的，通过 onload 事件可以监听文件是否读取完毕。下面是一个示例, 通过点击 <input type= "file"> 选择文件，然后读取文件内容。

document.getElementById("file-select").addEventListener("change", function(e) {
   
    e.stopPropagation();
    e.preventDefault();
    var reader = new FileReader();
    reader.readAsText(this.files[0]);
    reader.onload = function (e) {
   
        var content = e.ta