做前端开发时，经常要在网页中展示 ref="/tag/137/" style="color:#2B406D;font-weight:bold;">JavaScript 代码片段，比如在文档页面说明某个路由的配置方式。如果只是把代码原样贴上去，颜色单一，看起来费劲，用户也容易看错。这时候，给 JavaScript 代码加上高亮显示就很有必要了。
为什么需要代码高亮
想象一下，你在写一个 Vue 或 React 项目的路由文档，想告诉团队成员如何定义动态路由。直接贴一段代码：
const routes = [
{ path: '/user/:id', component: UserComponent }
];没有颜色区分，关键字、字符串、括号全都一个颜色，读起来吃力。而加上高亮后，关键词变蓝，字符串变红，结构清晰，一眼就能看出路由路径和组件的对应关系。
常见的实现方式
目前最常用的方案是使用 Prism.js 或 highlight.js。它们都是轻量级的 JavaScript 库，引入后自动扫描页面上的代码块并添加高亮。
以 Prism.js 为例，先在 HTML 中引入它的样式和脚本：
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>然后在你要高亮的代码块上加上 language-javascript 类：
<pre><code class="language-javascript">
const router = new VueRouter({
routes: [
{ path: '/dashboard', component: Dashboard },
{ path: '/profile/:userId', component: Profile }
]
});
</code></pre>页面加载后，Prism 就会自动把这段 JavaScript 代码染色，函数名、字符串、冒号、括号各有颜色，结构一目了然。
结合路由设置的实际场景
在“汇知百科”的“路由设置”栏目中，很多文章会讲解如何配置前端路由。比如说明 beforeEach 守卫的用法：
<pre><code class="language-javascript">
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login');
} else {
next();
}
});
</code></pre>有了高亮，if、!、=> 这些逻辑符号更醒目，字符串路径也更容易识别，读者能更快理解路由守卫的控制流程。
如果不加高亮，整段代码灰扑扑的，重点不突出，学习成本无形中就提高了。
小技巧：支持 JSX 和 TypeScript
如果你的项目用的是 React 路由，代码里有 JSX，Prism 默认可能不支持。这时候可以引入额外的插件，比如 prism-jsx，然后把类名改成 language-jsx：
<pre><code class="language-jsx">
<Route path="/home" element={<Home />} />
</code></pre>TypeScript 路由配置也一样，用 language-typescript 即可获得正确高亮。
代码高亮不只是“好看”，它让技术文档更易读，降低理解门槛。尤其是在讲解路由这种结构敏感的内容时，颜色就是一种视觉导航，帮读者快速定位关键信息。