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/ajax/libs/highlight.js/9.7.0/styles/default.min.css">
<script src="//cdnjs.cloudflare/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 ?
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 ?
Share Improve this question edited Sep 23, 2016 at 7:07 mhmd asked Sep 23, 2016 at 6:29 mhmdmhmd 2542 gold badges3 silver badges14 bronze badges 15- what are you trying to highlight? – Martin Gardener Commented Sep 23, 2016 at 6:30
- Any live demo to show your problem? – WangYudong Commented Sep 23, 2016 at 6:31
- @DanyalImran i put it under test code – mhmd Commented Sep 23, 2016 at 6:33
- @WangYudong the problem like i say it didn't show the code it run the code show the output of the code – mhmd Commented Sep 23, 2016 at 6:34
- 1 Have you included your .css and .js file correctly? Any error shows in browser console? If you have a live website, it's more easier for us to resolve your problem. – WangYudong Commented Sep 23, 2016 at 6:37
2 Answers
Reset to default 19The 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 < and > with > to escape angle brackets. If you included your .js and .css file correctly, make these change will help:
HTML version:
<pre><code class="html"><input type="text" name="test" id="test" value=""></code></pre>
PHP version:
<pre><code class="php"><?php echo"test";?></code></pre>
BTW, no need to use jQuery if you include .js file in HTML <head>. The script will run after the page loaded.
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>