Editor.md markdownToHTML 的使用以及自定义代码高亮样式

🏷️ Editor.md

Markdown 编辑器 Editor.md 还是很好用的，支持的功能也比较丰富。（不过貌似已经几年没有更新了，倒也不影响使用）

之前是在后台转成 HTML 代码然后到前端显示，但是对一些需要插件支持的功能（如流程图、数学公式等）的支持就不好了。

好在 Editor.md 还是支持在前端转换成 HTML 代码的，使用也很简单。

下面是当前我在 .NET MVC 中使用的代码：

<!-- Post Content -->
<div id="BlogContent" class="blog-content post">
    <textarea class="blog-content-original">@Model.BlogContent</textarea>
</div>

@section Scripts {
    <link rel="stylesheet" href="~/Scripts/editormd/css/editormd.preview.css" />
    <link rel="stylesheet" href="~/Scripts/editormd/lib/google-code-prettify/prettify.css">
    <link rel="stylesheet" href="~/Scripts/editormd/lib/google-code-prettify/skins/atelier-lakeside-light.css">

    <script src="~/Scripts/editormd/lib/marked.min.js"></script>
    <script src="~/Scripts/editormd/lib/google-code-prettify/prettify.js"></script>
    @*<script src="~/Scripts/editormd/lib/prettify.min.js"></script>*@
    <script src="~/Scripts/editormd/lib/raphael.min.js"></script>
    <script src="~/Scripts/editormd/lib/underscore.min.js"></script>
    <script src="~/Scripts/editormd/lib/sequence-diagram.min.js"></script>
    <script src="~/Scripts/editormd/lib/flowchart.min.js"></script>
    <script src="~/Scripts/editormd/lib/jquery.flowchart.min.js"></script>
    <script src="~/Scripts/editormd/editormd.js"></script>

    <script>
        $(function () {
            let blogConfig = {
                gfm: true,
                toc: true,
                tocm: false,
                tocStartLevel: 1,
                tocTitle: "目录",
                tocDropdown: true,
                tocContainer: "",
                markdownSourceCode: true,
                htmlDecode: true,
                autoLoadKaTeX: true,
                pageBreak: true,
                atLink: true,    // for @@link
                emailLink: true,    // for mail address auto link
                tex: true,
                taskList: false,   // Github Flavored Markdown task lists
                emoji: false,
                flowChart: true,
                sequenceDiagram: true,
                previewCodeHighlight: true,
            };

            var blog = editormd.markdownToHTML("BlogContent", blogConfig);
        });
    </script>
}

需要注意的是不要忘记 editormd.preview.css 文件的引用，否则代码高亮的样式会错乱。

Editor.md 的编辑器支持的配置参数比较多，完整版可以 editor.md - GitHub 上的说明文档，其中可以设置编辑器的主题，但是 editormd.markdownToHTML 支持的配置项比较少，只有上面列出的那些，不支持设置主题。

为了自定义代码高亮的样式，这里替换了默认的 /lib/prettify.min.js 改成了 /lib/google-code-prettify/prettify.js （从 google/code-prettify/distrib/prettify-small.zip 下载）。

自带的样式的示例： Gallery of themes for code prettify。

也可以从别的网站下载别人做好的主题样式，如 COLOR THEMES FOR GOOGLE CODE PRETTIFY。
需要注意的是由于 editormd.preview.css 定义的 pre 标签样式优先级比较高会导致从上面地址下载的样式背景色没有被应用，需要手动修改一下（在 .prettyprint 前指定 pre 标签类型以提高其优先级）。

修改前：

.prettyprint {
  background: #ebf8ff;
  font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
  border: 0 !important;
}

修改后：

pre.prettyprint {
  background: #ebf8ff;
  font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
  border: 0 !important;
}

如果需要隐藏代码前的行号，需要修改 editormd.js 中的 editormd.markdownToHTML 方法。

--- a/editormd/editormd.js
+++ b/editormd/editormd.js
@@ -3995,7 +3995,8 @@

         if (settings.previewCodeHighlight)
         {
-            div.find("pre").addClass("prettyprint linenums");
+            // div.find("pre").addClass("prettyprint linenums");
+            div.find("pre").addClass("prettyprint");
             prettyPrint();
         }