code标签不能直接显示Java代码,因其仅语义化、不转义、不阻止解析、不支持高亮;含<、>、"、&的代码需转义为、"、&,或用textContent安全注入。

为什么code标签不能直接显示Java代码
因为code只是语义化标签,不处理转义、不阻止解析、不支持语法高亮。如果你把含<public class Test>的Java代码直接塞进<code></code>里,浏览器会把<public当成未闭合标签去解析,轻则错位渲染,重则整个页面结构崩坏。
必须转义尖括号和引号才能用pre+code
原始Java代码中的<、>、"、&必须手动或自动替换成HTML实体,否则会被当作标签或属性解析。常见错误是只转义<却漏掉&——比如System.out.println("Hello");里的"不转义,会导致"被解析为属性边界,破坏DOM结构。
-
<→ -
>→> -
"→" -
&→&
示例正确写法:
public class HelloWorld { public static void main(String[] args) { System.out.println("Hello, World!"); }}
用textContent动态插入最安全
手写转义容易漏,尤其在调试阶段频繁改代码时。更稳的方式是把原始Java字符串交给JavaScript,用textContent注入——它天然跳过HTML解析,所有字符原样上屏。
立即学习“Java免费学习笔记(深入)”;
HTML中预留容器:
<pre id="java-code"></pre>
JS中注入(无需转义):
document.getElementById("java-code").textContent = `public class Demo {\n public static void main(String[] args) {\n System.out.println("Done.");\n }\n}`;
注意:必须用textContent,不是innerHTML;后者会二次解析,前功尽弃。
加highlight.js实现高亮但别跳过转义
想加行号、关键字着色?highlight.js确实能办到,但它**不自动转义**。很多人误以为加了hljs.highlightAll()就万事大吉,结果Java代码里一个<T>直接让页面挂掉。
正确流程只有两步:
① 先确保<pre><code class="java">里的内容已转义(或用textContent注入);
② 再调用hljs.highlightAll()。
别信“自动识别语言就能防崩”——高亮库只管染色,不管安全。最容易忽略的是:你复制粘贴进编辑器的Java代码,根本没经过任何转义,直接丢进innerHTML等于埋雷。



















