Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

highlightjs with html code

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.

like image 291
Kalzem Avatar asked Feb 27 '14 17:02

Kalzem


People also ask

How do you highlight code in HTML?

The HTML <mark> tag is used to mark or highlight text that is of special interest or relevance in an HTML document. Browsers traditionally render the text found within the <mark> tag as text with a yellow background color. This tag is also commonly referred to as the <mark> element.

What does highlight js do?

Basically, highlight. js lets you easily provide high-quality syntax highlighting without requiring a lot of effort on your part. We're going to show you how to include the code library on any page, and how you can do it in WordPress.


1 Answers

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

like image 175
Cameron Avatar answered Oct 05 '22 05:10

Cameron