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

Question

在这个例子中，我试图将#fileDisplayArea所有内容都转换为#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>

运行此代码会正确转换 markdown 元素，但不会读取原始 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>

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

Answer 1

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

Answer 2

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

    let md = window.markdownit();

具有以下内容：

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