0

在此示例中,我试图将所有内容都转换#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更改to的最后一个实例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>

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

4

2 回答 2

0

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

于 2020-03-07T09:01:32.433 回答
0

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

    let md = window.markdownit();

具有以下内容:

    let md = window.markdownit({ 
        html: true, 
    });
于 2020-03-07T17:15:45.707 回答