14

How do I put my HTML code so that highlight.js prettify it ?

I tried

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

I did put at the end of my file :

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

But everything is shown as plain HTML.

Kalzem
  • 7,320
  • 6
  • 54
  • 79
  • 1
    Did you include one of the stylesheets? And, come to think of it, the highlightjs JS itself? It's also possible that HLJS can't figure out what the language is -- try setting it manually using `hljs.configure({ 'languages': ['html'] });` before the initialization line. – Cameron Feb 27 '14 at 17:46

4 Answers4

31

Oh, I think I understand the problem. You need to escape the HTML within the <code> element, otherwise it will be interpreted as HTML instead of text (you want the HTML displayed literally, not interpreted as part of the webpage structure).

Change every < to &lt; and > to &gt;, as well as any other special HTML characters in your code sample. (If you're generating the page on the fly, most languages have a utility function to escape the HTML for you.)

Cameron
  • 96,106
  • 25
  • 196
  • 225
12

user2932428 solution without 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;");
});
pjehan
  • 820
  • 10
  • 18
  • Thanks! This saved me a lot of time. – Matt West Mar 14 '19 at 17:06
  • This is fine. but, does not work for `....` `...` `...` etc tag. any fix available for that? Thanks. – HDP May 18 '20 at 14:22
  • 3
    Disclaimer: I am the current maintainer of Highlight.js. This is just asking for an HTML or JS injection style attack security issue. Please DO NOT do this. The code needs to be escaped on the server - before it ever reaches the client, not afterwards. – Josh Goebel May 19 '20 at 14:18
  • @JoshGoebel I personnaly used this lines of code to replace code I have written myself in an HTML file inside tags so the data isn't coming from a database or any other external sources. But you are right, NEVER ESCAPE YOUR CODE ON THE CLIENT SIDE (if you didn't write that code yourself). – pjehan Mar 28 '22 at 10:31
3

To add to @Cameron's answer on escaping your html:

If you have a large amount of code that you want to highlight and don't want to resort manually escaping everything, one option is to save it as a variable using heredoc syntax and use a variant of htmlspecialchars() (PHP) to escape it. Heredoc lets you save a multi-line string as a variable without having to use concatenation operators.

Then it's just a matter of echoing it within your <pre><code>...</code></pre> block.

The benefit of using this method is the code remains readable in your document.

Example:

<?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>

One thing to note about using heredoc is that your closing EOT must be completely left-aligned.

Community
  • 1
  • 1
Jonny
  • 1,001
  • 6
  • 13
  • 35
1

you have to escape the content in <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();
user2932428
  • 59
  • 7