Highlight.js 不呈现 HTML

Question

基本上我根本无法渲染 HTML。

HTML:

<head>
    <link rel="stylesheet" href="/path/to/default.css">
    <script src="/path/to/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</head>

<pre>
    <code class="html">
    <!-- markup goodness here -->
    </code>
</pre>

我尝试了 javaScript，它完美无缺...

有什么想法吗？

更新：

我插入了有问题的标记。

<pre>
    <code class="xml">
         <div class="card-img-container">
            <div class="card-img-row">
                <div class="card ">
                    <div class="col-xs-12 col-sm-6 col-md-6 card-vertical-center">
                        <h1>Curabitur gravida vestibulum imperdiet.</h1>
                        <p>Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
                        <p>Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
                        <a href="#" class="btn btn-primary style-guide">Read More</a>
                    </div> 
                    <div class="hidden-xs col-sm-6 col-md-6 card-vertical-center">
                        <img class="center-block card-img-responsive" style="display:table-cell;" src="/path/to/image.jpg" alt="">
                    </div> 
                </div> 
            </div> 
        </div> 
    </code>
</pre>

2016 年 12 月 8 日更新：

我找到了变通方法，但仍未解决问题。显然有一个名为 SublimeStringEncode 的 Sublime 文本插件，它将编码你的 HTML 标签。

然而，正如您所见，该解决方案在标记中看起来很混乱，虽然对我来说很容易理解，但对于共享我的 CMS 的其他人来说可能很难 'get'...而且我无法获得出现水平滚动条...

Answer 1

您必须对 html 和 xml 语法使用 <code class="xml">。

Answer 2

我做了与您在更新中所说的类似的事情。我正在为我的 WP 博客使用 WP-Code-Highlight.js。尝试格式化 HTML 代码时，它一直呈现为 HTML，而不是仅显示代码。意思是我没有看到 <h1>Hello</h1>，而是看到了一个很大的渲染 h1。

解决方法如您所建议。我使用 < 和 > 使代码呈现为我想要显示的 HTML 代码。例如：

<pre>
    <code class="xml">
        &lt;h1&gt;hello>&lt;/h1&gt;
    </code>
</pre>

我希望有更好的解决方案，但我还没有找到。

Highlight.js 不呈现 HTML

Highlight.js doesn't render HTML

html

javascript

highlight.js