Highlight.js 不呈现 HTML答案

【问题标题】：Highlight.js doesn't render HTMLHighlight.js 不呈现 HTML
【发布时间】：2021-03-18 09:49:26
【问题描述】：

基本上我根本无法渲染 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 的其他人来说可能很难“获得”......而且我无法获得水平滚动条出现...

【问题讨论】：

我想你错过了结束标记，很抱歉改用 html 类
其实在我的文档里，但是在这里忘记了......
在我的 xml 类建议错误的问题中使用 html 类。也许有人会发现什么是真正的错误

标签： javascript html highlight.js

【解决方案1】：

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

解决方法如您所建议的那样。我使用&lt; 和&gt; 将代码呈现为我想要显示的HTML 代码。例如：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

@AntonioOrtiz 你能粘贴你试图突出显示的 html