让 emlog 支持 Markdown – Victor’s Blog

更新: 通过 Editor.md 可以获得更好的 Parse 效果，所以 Markdown Parser 部分已经弃用。
现在很多博客系统比如 Typecho、Hexo 等等都支持 Markdown 写作，然而 emlog 竟然不支持，这不够科学，不够优雅，所以我们要让它优雅起来。
接下来就要实战解决 Markdown 的问题。

删除自带编辑器

emlog 自带的 KindEditor 不实用，首先功能半残不说，从 HTML 源代码模式切换过来还有 BUG。所以为了防止 KindEditor 坏事，我们要删除它。
删除 KindEditor 非常简单，我们只需要在博客主目录下 admin/views 下的 add_log.php、add_page.php、edit_log.php、edit_page.php 中删除/注释掉下列代码:

<script charset="utf-8" src="./editor/kindeditor.js?v=<?php echo Option::EMLOG_VERSION; ?>"></script>
<script charset="utf-8" src="./editor/lang/zh_CN.js?v=<?php echo Option::EMLOG_VERSION; ?>"></script>

这样再修改文章、页面时，你就只会看到一个<textarea>，而不会看到编辑器的界面了。
这个文本框只会原封不动地显示博文的 HTML 代码，所以基本不可能用这个直接写作。
如果你希望简便一些，可以装个插件“Markdown for emlog”，不过有 bug，如果一般的写文字，这个插件就足够了，做《EMLOG 大前端》模板的“小草”封装的，封装了一个 Editor.md，下载链接 »。但是如果代码多，并且 h1-h6 如果连续且中间没有任何内容，就会无法解析。BUG 复现例子:

## 12345
### 67890

这样一定会出 BUG。所以如果你想用的爽，就 follow me 吧。如果你不在乎或者你不会出现上面的情况，下面就不用看了，直接用小草封装的插件即可。

安装 Markdown 编辑器

前面已经说过，去掉原有编辑器，基本无法直接在 Emlog 中编辑了。但是我们可以手动加入 Editor.md，只要它不把自己解析好的 HTML 发送就可以，因为我们是需要使用插件来解析 Markdown。
在之前提到过的四个 php 文件中加入如下代码:

<div id="layout">
    <div id="test-editormd">
        <textarea id="content" name="content" style="display:none;"><?php echo $content; //在 add_log.php 和 add_page.php 中请去掉这段 php 代码。 ?></textarea>
    </div>
</div>
<link rel="stylesheet" href="https://pandao.github.io/editor.md/css/editormd.css" />
<script src="https://pandao.github.io/editor.md/examples/js/jquery.min.js"></script>
<script src="https://pandao.github.io/editor.md/editormd.min.js"></script>
<script type="text/javascript">
    var testEditor;
    $(function() {
        testEditor = editormd("test-editormd", {
            width   : "100%",
            height  : 640,
            syncScrolling : "single",
            path    : "https://pandao.github.io/editor.md/lib/"
        });
    });
</script>

这样 Editor.md 就可以展示我们的代码了，但是它不会成为 Markdown Parser。它仅仅是作为预览 Markdown 代码并将 Markdown 代码原样提交的编辑器，而 Parse Markdown 将会在下一个部分提到。
虽然 Editor.md 可以使用，但是我并不建议仅使用它，因为我们下面的 Markdown Parser 在 Parse 后不会保留 Markdown 源码，所以推荐大家选择一个适合自己的编辑器。此处推荐 Moeditor。

Markdown Parser

上面我们说到 Editor.md 只是原样提交 Markdown 源文件，而 emlog 本身并不支持 Markdown，所以需要一个 Parser 插件。
我发现 “Mike” 写的 Markdown 增强插件很好，但是我们需要配合代码高亮，所以需要做一些修改，由于比较杂乱，我就不再一一叙述，大家可以下载我修改的版本和原版作对照。
我的版本的下载链接 »，原版的下载链接 »。
但是仅仅 Parse 之后是不够的，因为不够好看，我比较喜欢 GitHub Flavored 的主题，我是直接提取了 Moeditor 的 CSS 应用到我模板的样式中的。

代码高亮

用“Markdown 增强” Parse 出来的代码块是不会有代码高亮的。所以需要使用代码高亮模块，我选择的是 Highlight.js。
首先要对“Markdown 增强”进行修改，在 博客目录/content/plugins/advancemarkdown/lib/ 下找到 parsedown.php。查找内容language-并替换为空。
现在就可以加载 Highlight.js 了，在模板的 header.php 中 <head> 加入以下代码(我使用了 GitHub CDN，大家自己随意，把代码里的!!括起来内容换成自己的 CDN 路径即可):

<link href="!!CDN_PATH_HLJS!!/styles/github.css" rel="stylesheet" type="text/css" />
<script src="!!CDN_PATH_HLJS!!/highlight.pack.js" type="text/javascript"></script>
<script>hljs.initHighlightingOnLoad();</script>

这样就可以实现代码块的高亮了。

Parse TeX 公式

很多 Markdown 编辑器比如 Moeditor 都支持 TeX 公式的 Parse，虽然我有一个 API，但是没有必要用 API 解决这个问题，JavaScript 库就可以又快又好地完美解决。
行业内解析 TeX 公式并排版的常见的两个 JavaScript 库是 MathJax 和 KaTeX。我对比了一下，老牌的 MathJax 虽然功能强大但是速度太慢，我的博客又不需要过于强大的功能，所以 KaTeX 就足矣。
KaTeX 内置有一个扩展 Auto-Render，可以方便的解决这个问题。自然是要加载的。
如果需要加载 KaTeX 是非常简单的，在模板的 header.php 的 <head> 标签最后加入以下几行代码:

<script src="!!CDN_PATH_KATEX!!/katex.min.js"></script>
<script src="!!CDN_PATH_KATEX!!/contrib/auto-render.min.js"></script>

在模板的 footer.php 的 </body> 标签结束之前加入以下代码:

<script>
  renderMathInElement(
      document.body,
      {
          delimiters: [
              {left: "$$", right: "$$", display: true},
              {left: "
", display: true},
              {left: "$", right: "$", display: false},
              {left: "\\(", right: "\\)", display: false}
          ]
      }
  );
</script>

至此，我们就实现了令 emlog 支持全功能的 Markdown 了。今后可以优雅地用 Markdown 来写博文了。那滋味就是一个: 爽爽爽爽！

删除自带编辑器

安装 Markdown 编辑器

Markdown Parser

代码高亮

Parse TeX 公式

发表回复 取消回复

发表回复取消回复