繁体   English   中英

Highlight.js 不呈现 HTML

[英]Highlight.js doesn't render HTML

基本上我根本无法渲染 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 年 8 月 12 日更新:

我找到了解决方法,但仍未解决问题。 显然有一个名为SublimeStringEncode的 Sublime 文本插件,它将对您的 HTML 标签进行编码。

在此处输入图片说明

在此处输入图片说明

但是,正如您所看到的,该解决方案在标记中看起来很混乱,虽然我很容易理解,但对于共享我的 CMS 的其他人来说可能很难“获得”......而且我无法显示水平滚动条.. .

我做了类似于你在更新中所说的事情。 我正在为我的 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>

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM