highlight.js: как мне сказать, игнорировать CSS по умолчанию

Я пытаюсь реализовать 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 и разрушает страницу, также основной тег, используемый на странице, применяется к тегам внутри

В заголовок моего index.html я включил<link rel="stylesheet" type="text/css" href="../css/highlight.css">

и перед закрывающим тегом тела я включил

<script src="../scripts/highlight.pack.js"></script>
<script>
  $(document).ready(function() {
    $('pre code').each(function(i, block) {
      hljs.highlightBlock(block);
     });
   });
</script>

Я продолжаю читать документацию, но не могу понять, что я пропустил.

Источник

1 ответ

Так что я только что узнал, что при попытке отобразить html внутри пред тега все символы html должны быть убраны. Сохраняя все как есть, я настроил скрипт на

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

и это делает трюк. (беря каждый из элементов кода, захватывая внутренний html и анализируя его обратно как текст)

Источник
Другие вопросы по тегам