高亮js代码不工作



我试着使用highlight.js但是它不起作用

我像他们在网站上说的那样工作,但我不知道哪里出错了

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

//测试代码

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

结果在浏览器中是一个正常的文本框没有代码如何解决这个问题?

您的HTML代码不被highlight.js视为代码的原因是因为浏览器解析了HTML标记。解决方法是将<替换为&lt;,将>替换为&gt;以避免尖括号。如果您正确地包含了.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>

BTW,不需要使用jQuery,如果你在HTML <head>中包含。js文件。该脚本将在页面加载后运行。

如果你在后端使用php,你可以使用php函数htmlspecialchars以编程方式转换特殊符号。

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

最新更新