Login/Register
highlightjs with html code
Asked Answered
Solved javascripthtmlsyntax-highlightingprettify
R

4

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.

Ross answered 27/2, 2014 at 17:41 Comment(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. – Nowhither
N
33

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.)

Nowhither answered 27/2, 2014 at 17:53 Comment(1)
just using notepad in windows solved me for this – Broomstick
H
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;");
});
Halicarnassus answered 24/7, 2017 at 16:9 Comment(4)
Thanks! This saved me a lot of time. – Spirit
This is fine. but, does not work for <html>....</html> <body>...</body> <head>...</head> etc tag. any fix available for that? Thanks. – Vamp
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. – Geriatric
@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). – Halicarnassus
H
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.

Heidy answered 27/5, 2015 at 17:3 Comment(0)
C
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();
Categorical answered 12/7, 2017 at 8:47 Comment(2)
Unfortunately this breaks new lines. – Gyroscope
This is fine. but, does not work for <html>....</html> <body>...</body> <head>...</head> etc tag. any fix available for that? Thanks. – Vamp

© 2022 - 2024 — McMap. All rights reserved.