JavaScript代码高亮显示：让编程更高效的小技巧

写前端ref="/tag/131/" style="color:#2B406D;font-weight:bold;">代码时，经常要在网页里展示 JavaScript 示例。如果只是贴一段纯文本代码，不仅难看，阅读起来也费劲。这时候，给代码加上高亮显示，效果立马不一样。

为什么需要代码高亮

想象你在看一篇教程，里面讲了一个实用的 JS 函数，但代码密密麻麻堆在一起，变量、字符串、注释全都一个颜色。你得一个字一个字去辨认，稍不注意就看错行。而一旦加上高亮，关键字变蓝、字符串变红、注释变灰，结构一目了然，理解速度自然提升。

用 Prism.js 快速实现高亮

Prism.js 是一个轻量又强大的代码高亮库，接入简单，主题丰富。只需要在页面引入它的 CSS 和 JS 文件：

<link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>

然后把你要展示的代码放进 pre 和 code 标签里，并加上 language-javascript 类：

<pre><code class="language-javascript">
function greet(name) {
    return `Hello, ${name}!`;
}

greet('Alice');
</code></pre>

页面加载后，Prism 会自动识别语言并为代码着色。不需要额外调用初始化函数，开箱即用。

支持多种语言和主题

除了 JavaScript，Prism 还支持 HTML、CSS、Python、SQL 等几十种语言。你还可以换主题，比如“夜黑模式”的 prism-tomorrow.css，适合长时间阅读。

避免常见坑点

有时候代码里的特殊字符没转义，会导致页面显示异常。比如 < 要写成 <，否则浏览器会当成标签解析。可以借助工具如 escape-html 处理，或者使用构建流程中的转义插件。

另外，如果页面动态插入代码（比如通过 AJAX 加载），需要手动触发 Prism 高亮：

Prism.highlightAll();

这样新加入的代码块也能正确着色。

小改动，大收益

别小看这个视觉优化。团队内部的技术文档加上高亮后，新人上手时间明显缩短。博客文章配上清晰的代码，读者停留时间更长，互动也多了。效率提升往往藏在这些细节里。