MarkDown 源码转 HTML 显示

最新推荐文章于 2025-02-23 14:22:42 发布

tianlunvip

最新推荐文章于 2025-02-23 14:22:42 发布

阅读量781

点赞数

本文链接：https://blog.youkuaiyun.com/tianlunvip/article/details/103377177

版权

本文介绍了如何将Markdown源码转换成HTML显示，重点讲解了`markdownToHTML`函数的使用，包括需要的参数、配置选项以及注意事项。在转换过程中，强调了正确处理<p>元素和防止自动实体转换的问题，提供了PHP的解决方案和另一种取值方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般我们是将 MarkDown 源码存入数据库，这样取出数据后利于再次编辑

获取 MarkDown 源码后，转换成 HTML 要使用的函数

方法

editormd.markdownToHTML(id, options);

用于显示 HTML 的容器 ID（字符串）

options

配置选项

{
	gfm                  : true,
	toc                  : true,
	tocm                 : false,   // 是否开启 [TOCM] 功能
	tocStartLevel        : 1,
	tocTitle             : "目录",
	tocDropdown          : false,
	tocContainer         : "",      // 自定义 ToC 容器层
	markdown             : "",      // MarkDown 源码
	markdownSourceCode   : false,   // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
	htmlDecode           : false,   // 开启 HTML 标签解析，为了安全性，默认不开启
	autoLoadKaTeX        : true,
	pageBreak            : true,
	atLink               : true,    // 网址 URL 自动添加链接
	emailLink            : true,    // 邮件地址自定添加链接
	tex                  : false,
	taskList             : false,   // Github Flavored Markdown task lists
	emoji                : false,
	flowChart            : false,
	sequenceDiagram      : false,
	previewCodeHighlight : true
}

markdownToHTML 函数解析

首先通过容器 ID 创建一个 JQuery 对象 $("#"+id)
然后搜寻容器里有没有<textarea>元素，，有，就取其内容，没有则创建
如果设置了选项markdown，则使用markdown内容作为被解析的源码，如果为空，则使用容器下<textarea>元素内容
其它选项根据需求配置

注意事项

1. 不使用<p>代码块显示 <p> 元素

如果在编辑器中直接写入 <p> ，预览是无法显示的，必须要先将实体转换成 <p>
如果从数据库中取出源码放入 <textarea> 区域中，如下

<textarea># &lt;p> 教程 &lt;/p></textarea >

通过 $(“textarea”).val() 取值则为

# <p> 教程 </p>

并不是想要获取的源码数据

# &lt;p> 教程 &lt;/p>

因为在取值时，textarea 自动实体转换为了字符，所以，在将源码放入 textarea 区域前，先进行特殊字符转换为实体，PHP 中使用htmlspecialchars函数

# &amp;lt;canvas&gt; 教程 &amp;lt;canvas&gt;

这样，取值才正常，使用 markdownToHTML 函数成功解析

还有一种方法：不需要实体转换，可通过 $("textarea").html() 取值即可

示例

$(function() {
    var testEditormdView, testEditormdView2;
    
    $.get("test.md", function(markdown) {
        
	    testEditormdView = editormd.markdownToHTML("test-editormd-view", {
            markdown        : markdown ,//+ "\r\n" + $("#append-test").text(),
            //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
            htmlDecode      : "style,script,iframe",  // you can filter tags decode
            //toc             : false,
            tocm            : true,    // Using [TOCM]
            //tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
            //gfm             : false,
            //tocDropdown     : true,
            // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
            emoji           : true,
            taskList        : true,
            tex             : true,  // 默认不解析
            flowChart       : true,  // 默认不解析
            sequenceDiagram : true,  // 默认不解析
        });
        
        //console.log("返回一个 jQuery 实例 =>", testEditormdView);
        
        // 获取Markdown源码
        //console.log(testEditormdView.getMarkdown());
        
        //alert(testEditormdView.getMarkdown());
    });
        
    testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", {
        htmlDecode      : "style,script,iframe",  // you can filter tags decode
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默认不解析
        flowChart       : true,  // 默认不解析
        sequenceDiagram : true,  // 默认不解析
    });
});