Question

我正在尝试实现highlight.js。我有和index.html。身体是

<p>Example code</p>
<pre>
  <code class="html">
      <title>Title</title>

      <style>body {width: 500px;}</style>

      <script type="application/javascript">
        function $init() {return true;}
      </script>

      <body>
      <p checked class="title" id='title'>Title</p>
      <!-- comment to be highlighte -->
      </body>
  </code>
</pre>

但是当我加载页面时，<pre>内的任何内容都被处理为真正的html并且它会破坏页面，页面上使用的主要css im也会应用于{{1}内的标签}

在我的index.html的头部，我已经包括在内

在我收录的身体结束标签之前

<link rel="stylesheet" type="text/css" href="../css/highlight.css">

我一直在阅读文档，但似乎无法找出我错过的内容。

Answer 1

所以我发现，如果试图在pre标签内显示html，则需要搜索所有html字符。保持一切尽可能我将脚本调整为

$(document).ready(function() {
    $('pre code').each(function(i, block) {
        var string = $(this).html();
        $(this).text(string);
        hljs.highlightBlock(block);
    });
});

这就是诀窍。（获取每个代码元素，抓取内部html并将其解析为文本）

highlight.js：我怎么告诉它忽略默认的css

1 个答案: