highlightjs with html code

Question

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.

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
– Cameron, Commented Feb 27, 2014 at 17:46

Cameron · Accepted Answer · 2014-02-27 17:53:16Z

36

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 < and > to >, 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.)

answered Feb 27, 2014 at 17:53

Cameron

99.3k29 gold badges206 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

redoc Over a year ago

just using notepad in windows solved me for this

pjehan · Accepted Answer · 2017-07-24 16:09:05Z

13

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;");
});

answered Jul 24, 2017 at 16:09

pjehan

85010 silver badges18 bronze badges

3 Comments

HDP Over a year ago

This is fine. but, does not work for <html>....</html> <body>...</body> <head>...</head> etc tag. any fix available for that? Thanks.

Josh Goebel Over a year ago

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.

pjehan Over a year ago

@JoshGoebel I personnaly used this lines of code to replace code I have written myself in an HTML file inside <code> 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).

Community · Accepted Answer · 2020-06-20 09:12:55Z

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.

user2932428 · Accepted Answer · 2017-07-12 09:23:04Z

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();

edited Jul 12, 2017 at 9:23

answered Jul 12, 2017 at 8:47

user2932428

597 bronze badges

2 Comments

onin Over a year ago

Unfortunately this breaks new lines.

HDP Over a year ago

This is fine. but, does not work for <html>....</html> <body>...</body> <head>...</head> etc tag. any fix available for that? Thanks.

Collectives™ on Stack Overflow

highlightjs with html code

4 Answers 4

1 Comment

3 Comments

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

Example:

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

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

Example:

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related