highlight.js代码不工作

Question

我试着用highlight.js，但没有用

我像网站上说的那样工作，但我不知道怎么了

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

结果在浏览器中是一个普通的文本框而不是代码，如何解决这个问题？

Answer 1

highlight.js不将您的HTML代码视为代码的原因是浏览器解析了这些HTML标记。解决方案是将<替换为<，将>替换为>以转义尖括号。如果您正确地包含了您的.js和.css文件，那么进行这些更改将有帮助：

HTML版本：

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

PHP版本：

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

顺便说一句，如果在HTML中包含jQuery文件，就不需要使用.js。脚本将在加载页面后运行。

Answer 2

在这种情况下，如果在后端htmlspecialchars上使用php，则可以使用php函数编程转换特殊符号。

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