Remarkable 为 < 创建 <

Remarkable creates &lt; for <

我用Remarkable把Markdown改成了HTML; https://github.com/jonschlinkert/remarkable

目标是创建一个包含代码片段的知识库,存储在 .md 文件中,在网络浏览器中 HTML 中显示。

我遇到的问题是在代码块内,有一个或三个反引号。 <> 符号被翻译成 &lt;&gt; 甚至以其他方式,使代码块对非 HTML 无用。奇怪的是,已知的 HTML 标签在 pre/code 块中保持不变,因此显示正确。

就像在 Powershell 中一样,您可以使用以下块注释:

<#
  some text
#>

但是使用Remarkable,在一个pre/code块中,这变成了

&lt;#
  some text
#&gt;

此外,如果我使用 ```powershell 将代码块标记为 powershell,那么这会使代码片段无用。

但是代码块中的 <strong>someText</strong> 保持相同的方式,因此将正确显示。

Markdown 数据在 div 块中由 PHP 回显:

<div id="markdown"><?php echo $data; ?></div>

Javascript:

var md = new Remarkable();
var result = md.render(document.getElementById("markdown").innerHTML);
document.getElementById("markdown").innerHTML = result;

HTML 中的每个“<”字符都必须编码为 &lt; 除非它是标记的开头。 你所拥有的不是标签的开头,它只是一个“<”字符。您希望“<”字符呈现为“<”,而不是被解释为 HTML 标记。所以它被编码为 &lt;.

这个:

&lt;#
  some text
  some other text
#&gt;

将在浏览器中呈现为:

<#
  some text
  some other text
#>

证明:

<pre>
<code>
&lt;#
  some text
  some other text
#&gt;
</code>
</pre>


内联 HTML 是 explicitly allowed in Markdown,因此合法的 <br> 标签等 未编码 :

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.

放弃Remarkable后,我尝试了MarkedJS和Markdown-it,结果是一样的。。。后来我发现,不是Remarkable做的难,而是我阅读方式的问题数据;通过使用 innerHTML.

innerHTML 在某些情况下 会更改 <> 以及其他字符... <?php 也是例如,更改为 <!--php。这对我来说完全是个惊喜!

通过在我的小 JS 代码中添加 console.log(result);,我可以使用 Google Inspect (F12),选项卡 Console 查看 result 的实际内容,然后再将其发送到了不起。

因为我自己无法“修复”这个问题,所以我选择不通过 div 中的 PHP 读取文件内容来“避免”这个问题,而是使用Javascript读取文件,将内容转换为html,然后将结果发送给一个空的div。

<div id="markdown"></div>
<script type="text/javascript">
    function loadFile(filePath) {
        var result = null;
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", filePath, false);
        xmlhttp.send();
        if (xmlhttp.status==200) {
            result = xmlhttp.responseText;
        }
        return result;
    }

    var md = new Remarkable();
    var source = loadFile("<?php echo $file; ?>");
    var result = md.render(source);
    document.getElementById("markdown").innerHTML = result;
</script>

⚠️ 我知道通过这种方式,我的源文件很容易看到和阅读,在我的情况下没问题,但是如果你想阅读 Javascript 中的文件,请记住这一点方式。