安装 Markdown 编辑器 + 显示 Markdown 内容

🏷️ Editor.md Markdown

安装 markdown 编辑器

使用了 Editor.md 插件。这是一个国产的 Markdown 编辑器，用起来相当不错。

1. 下载后解压到项目中

2. 页面中添加文本控件

<div id="test-editormd">
    <textarea style="display:none;">
    </textarea>
</div>

3. 添加 js 引用及初始化编辑器代码

<script src="js/jquery.min.js"></script>
<script src="../editormd.min.js"></script>
<script type="text/javascript">
    var testEditor;

    $(function() {
        testEditor = editormd("test-editormd", {
            width   : "90%",
            height  : 640,
            syncScrolling : "single",
            path    : "../lib/"
        });

        /*
        // or
        testEditor = editormd({
            id      : "test-editormd",
            width   : "90%",
            height  : 640,
            path    : "../lib/"
        });
        */
    });
</script>

4. OK 啦,打开页面就可以看到效果了.

显示 Markdown 格式的文本

使用 MarkdownSharp 插件

本来是想使用 MarkdownSharp 插件，在后台转换成 HTML 代码之后再输出到前台，但是实际使用时代码之类的显示会有问题。代码块中的标签没有做 Encode，导致如果是 html 代码的话，会变成页面控件而不是代码块显示。

虽然后来卸载了，但还是写一下它的安装和使用方法。

1. 通过 NuGet 安装插件

Install-Package MarkdownSharp

2. 转换 Markdown 文本为 HTML 代码

new MarkdownSharp.Markdown().Transform(strMarkdown);

使用 Editor.md 插件的 Markdown to HTML 功能

后来还是使用了 Editor.md 自带的 Markdown to HTML 功能，在前端将 Markdown 文本转成 HTML 显示。用法如下：

<script src="../../Scripts/editormd/lib/marked.min.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.min.js"></script>

<script type="text/javascript">
    $(function() {
        //editormd.classPrefix = "lm-blog-";

        var blogCOntentView = editormd.markdownToHTML("divContent", {
            htmlDecode: "style,script,iframe",  // you can filter tags decode
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true,  // 默认不解析
        });
    });
</script>

参考

1. editor.md 实现 Markdown 编辑器

2. editor.md 官方网站

3. 在 ASP.NET MVC 中使用 MarkDown