CODEWITHSUNDEEP
javascriptjquery
mhmd
mhmd

Reputation: 254

highlight.js code not working

I try to use the highlight.js but it didn't work

i work like they say in the website but i don't know what's wrong

<link rel="stylesheet" href="styles/default.css">
<script src="js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
 <title></title>  
 </head>

//test the code

 <pre><code class="html"><input type="text" name="test" id="test" value=""></code></pre>


<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js"></script>

the result in the browser is a normal textbox not the code how to solve this ?

Upvotes: 7

Views: 12045

Answers (2)

Ivan Frolov
Ivan Frolov

Reputation: 476

In a case if you're using php on backend you can use php function htmlspecialchars to convert special symbols programatically.

<pre><code class='language-php'>
<?php echo htmlspecialchars( 
'<input type="text" name="test" id="test" value="">' );
?>
</code></pre>

Upvotes: 0

WangYudong
WangYudong

Reputation: 4423

The reason your HTML code is not treated as code by highlight.js is because the browser parsed the HTML tags. The solution is to replace < with &lt; and > with &gt; to escape angle brackets. If you included your .js and .css file correctly, make these change will help:

HTML version:

<pre><code class="html">&lt;input type="text" name="test" id="test" value=""&gt;</code></pre>

PHP version:

<pre><code class="php">&lt;?php echo"test";?&gt;</code></pre>

BTW, no need to use jQuery if you include .js file in HTML <head>. The script will run after the page loaded.

Upvotes: 19

Related Questions