当前位置：首页 > JavaScript

js实现代码高亮显示

2026-01-30 19:55:24JavaScript

实现代码高亮的方法

使用第三方库（推荐）

最简便的方式是使用现成的代码高亮库，例如 highlight.js 或 Prism.js。这些库支持多种编程语言，并自动检测语言类型。

安装 highlight.js：

npm install highlight.js

引入并初始化：

import hljs from 'highlight.js';
import 'highlight.js/styles/github.css'; // 选择主题样式

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightElement(block);
  });
});

手动实现简单高亮

如果需要轻量级实现，可以通过正则表达式匹配关键字并添加样式类。

function highlightCode(code, language) {
  const keywords = {
    javascript: ['function', 'const', 'let', 'if', 'else', 'return'],
    html: ['<div>', '<p>', '<span>']
  };

  return code.replace(
    new RegExp(`\\b(${keywords[language].join('|')})\\b`, 'g'),
    '<span class="keyword">$1</span>'
  );
}

document.querySelector('pre code').innerHTML = highlightCode(
  'function example() { return true; }',
  'javascript'
);

CSS 样式示例

为高亮元素添加样式：

.keyword {
  color: #0077aa;
  font-weight: bold;
}

.comment {
  color: #999;
  font-style: italic;
}

动态加载语言包（高级用法）

highlight.js 支持按需加载语言包以减少体积：

js实现代码高亮显示

import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';

hljs.registerLanguage('javascript', javascript);
hljs.highlightAll();

注意事项

第三方库通常支持自动语言检测，但手动指定语言可以提高准确性：
```
<pre><code class="language-javascript">const a = 1;</code></pre>
```
对于服务端渲染（SSR），需在组件挂载后执行高亮逻辑。
深色/浅色主题切换时可能需要重新初始化高亮。