让 emlog 支持 Markdown

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

删除自带编辑器

emlog 自带的 KindEditor 不实用,首先功能半残不说,从 HTML 源代码模式切换过来还有 BUG。所以为了防止 KindEditor 坏事,我们要删除它。 删除 KindEditor 非常简单,我们只需要在博客主目录下 admin/views 下的 add_log.phpadd_page.phpedit_log.phpedit_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   : "10
            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 库是 MathJaxKaTeX。我对比了一下,老牌的 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: " [", right: " ]", display: true},
              {left: "$", right: "$", display: false},
              {left: " (", right: " )", display: false}
          ]
      }
  );
</script>

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

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注