highlightjs с HTML-кодом

Как мне поместить мой HTML-код так, чтобы выделить.js приукрасить его ?

Я пытался 

<pre>
    <code>
        <!-- HTML Prettify -->
        <div>
            <pre class="pre-code-ception"><code> haha </code></pre>
        </div>
    </code>
</pre>

Я поставил в конце моего файла: 

<script type="text/javascript">
    hljs.initHighlightingOnLoad();
</script>

Но все показано как обычный HTML.

4 5
javascript html syntax-highlighting prettify

4 ответа:

О, я думаю, что понимаю проблему. Вам нужно экранировать HTML в элементе <code>, иначе он будет интерпретирован как HTML вместо текста (вы хотите, чтобы HTML отображался буквально, а не интерпретировался как часть структуры веб-страницы).

Измените все < на &lt; и > на &gt;, а также любые другие специальные символы HTML в вашем примере кода. (Если вы создаете страницу на лету, в большинстве языков есть служебная функция, чтобы избежать HTML для вас.)

14

User2932428 решение без jQuery: 

document.querySelectorAll("code").forEach(function(element) {
    element.innerHTML = element.innerHTML.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
});
4

Чтобы добавить к ответу @Cameron на экранирование вашего html:

Если у вас есть большой объем кода, который вы хотите выделить и не хотите прибегать к ручному экранированию всего, один из вариантов-сохранить его как переменную с помощью синтаксиса heredoc и использовать Вариант htmlspecialchars() (PHP) для экранирования. Heredoc позволяет сохранить многострочную строку в качестве переменной без использования операторов конкатенации.

Тогда это просто вопрос echo в вашем блоке <pre><code>...</code></pre>.

В преимущество использования этого метода заключается в том, что код остается читаемым в вашем документе.

Пример: 

<?php

$code = <<< EOT

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>

    <body>

        <img src="image.png" />

    </body>
</html>

EOT;

?>

<pre>
    <code class="html">
        <?php echo htmlspecialchars( $code ); ?>
    </code>
</pre>

Одна вещь, которую следует отметить при использовании heredoc, заключается в том, что ваше закрытие EOT должно быть полностью выровнено по левому краю.

3

Вы должны избежать содержания в <code class="html"> 

$('code').each(function() {
  var that = $(this);
  // cache the content of 'code'
  var html = that.html().trim();
  that.empty();
  // escape the content
  that.text(html);
});
hljs.initHighlightingOnLoad();
1