HTML/JS - 从 Markdown 转换时无法呈现 HTML答案

【问题标题】：HTML/JS - Unable to Render HTML while Converting from MarkdownHTML/JS - 从 Markdown 转换时无法呈现 HTML
【发布时间】：2020-03-07 05:08:36
【问题描述】：

在此示例中，我尝试将 #fileDisplayArea 中的所有内容转换为降价。但是，div 中的原始 HTML 未被应用。

    <div id="fileDisplayArea"># Title
    Lorem **ipsum** dolor sit amet, *consectetur adipiscing* elit

    <center>Consectetur libero id faucibus nisl tincidunt eget</center>

    In ornare quam viverra orci sagittis eu.
    </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/10.0.0/markdown-it.min.js"></script>
        <script>
            let md = window.markdownit();
            let txt = document.getElementById('fileDisplayArea').innerHTML;
                document.getElementById('fileDisplayArea').innerHTML = md.render(txt);
        </script>

运行此代码会正确转换降价元素，但不会读取原始 HTML，而是显示在输出中。将 innerHTML 的最后一个实例更改为 innerText 会提供以下输出：

    <p>Lorem <strong>ipsum</strong> dolor sit amet, 
    <em>consectetur adipiscing</em> elit</p>
    <p>&lt;center&gt;Consectetur libero id faucibus nisl tincidunt eget&lt;/center&gt;</p>
    <p>In ornare quam viverra orci sagittis eu.</p>

这表明小于/大于符号正在被转义。如何防止这种情况发生？

【问题讨论】：

标签： javascript html markdown-it

【解决方案1】：

您可以使用textContent 代替innerText 来跳过HTML 标记或将节点括在反引号中以将其显示为代码块，但innerText 将始终转换括号。发生这种情况是因为您使用的库监视字符串并且您正在尝试转换 HTML 节点。此外，没有使用 Markdown 使文本居中的原生方式。

【讨论】：

【解决方案2】：

对于任何可能偶然发现此问题的人，我设法找到了解决方案。在 markdown-it 的文档中，默认情况下禁用某些选项。能够实现原始 HTML 被禁用。要解决此问题，需要启用 html 标志。替换：

    let md = window.markdownit();

以下内容：

    let md = window.markdownit({ 
        html: true, 
    });

【讨论】：