SyntaxHighlighter 解析不正确答案

【问题标题】：SyntaxHighlighter gets parsed incorrectlySyntaxHighlighter 解析不正确
【发布时间】：2016-01-15 18:00:28
【问题描述】：

我的 SyntaxHighlighter 被解析错误，将带有<pre class="brush: lang">...</pre> 的代码块插入到 Markdown 中，例如：

案例一：删除</body>

`</body>` parse as ``

案例 2：错误配对

<pre class="brush: java">
private class MaxPropComparator implements Comparator<message> {
    ...
}
</pre>

被解析为（添加</message>）：

<pre class="brush: java">
private class MaxPropComparator implements Comparator<message> {
    ...
}
</message></pre>

案例 3：嵌入式代码块

<pre class="brush: xml; smart-tabs: false">
<pre class="brush: js; highlight: [2, 4, 6]">
...
</pre>
</pre>

被解析为：

<pre class="brush: xml; smart-tabs: false">
</pre><pre class="brush: js; highlight: [2, 4, 6]">
...
</pre>

因此显示为：

案例4：以此类推

# messages: event-type org-node (loc-x,loc-y) (anchor-x,anchor-y) r=<core> a=<availability> ttl size [node-snd ( loc-x loc-y ) [node-rcv (     loc-x loc-y)]]

被解析为（添加</availability></core>）：

# messages: event-type org-node (loc-x,loc-y) (anchor-x,anchor-y) r=<core> a=<availability> ttl size [node-snd ( loc-x loc-y ) [node-rcv (     loc-x loc-y)]]
</availability></core>

【问题讨论】：

SyntaxHighlighter 在客户端呈现，而 Markdown 通常在服务器端完成以正确呈现 HTML，您是否将 Markdown 发送到浏览器？
@Capilé 我相信服务器会将 HTML 发送到浏览器。我用jp-markdown，不改动WordPress的核心代码。
嗯，你需要另一个 markdown 插件，jetpack 不再受支持，否则你需要手动转义这些标签 -- 正在为你安装另一个 markdown parser am 选项吗？
@Capilé 其实和markdown插件无关，而是语法高亮。我将 SyntaxHighligter 转移到 Google Code Prettify 并且效果很好。

标签： syntax-highlighting syntaxhighlighter

【解决方案1】：

原因：

问题：此方法的主要问题是所有左尖括号必须进行 HTML 转义，例如所有 &lt; 必须替换为 &lt; 这将确保正确呈现。

我的解决方案： 将SyntaxHighlighter 转换为Google Code Prettify 并使之前的代码与Google Code Prettify 兼容。这是我的工作：

<script>
jQuery(document).ready(function(){
    jQuery('pre').each(function(){
        var el = jQuery(this).find('code');
        var code_block = el.html(); // remove the pairwise tag of <code></code>
        var lang = el.attr('class');

        if (el.length > 0) { // <pre>...</pre> with <code>...</code> inside
            if (lang) {
                jQuery(this).addClass('prettyprint linenums lang-' + lang).html(code_block);
            } else {
                jQuery(this).addClass('prettyprint linenums').html(code_block);
            }
        } else { // <pre>...</pre> without <code>...</code> inside
            jQuery(this).removeClass().addClass('prettyprint linenums'); // take over SyntaxHighlighter
        }
    });
});
</script>

【讨论】：