如何在VS Code中为HTML文件的语法关键词添加高亮效果？

有两种常用的实现方式可以满足你的需求，具体如下： #

方案1：基于现有语法高亮库扩展规则 #

市面上主流的语法高亮库都支持自定义语言规则，可以在原有编程语言的高亮逻辑基础上，追加你需要的特定关键词高亮配置：

• 操作流程：
  • 首先定义专属的高亮样式类，指定你需要的背景色、文字色、内边距、圆角等效果
  • 在高亮库的语言注册接口中，继承原有编程语言的全部匹配规则，额外增加你要高亮的关键词匹配规则，给匹配到的内容绑定你刚才定义的样式类
  • 后续代码块渲染时，高亮库就会自动识别你指定的关键词，渲染对应的高亮效果
• 示例代码：

/* 自定义高亮样式 */
.custom-highlight {
  color: #ffffff;
  background: #f5222d;
  padding: 2px 4px;
  border-radius: 3px;
}

// 示例为基于Highlight.js扩展规则
hljs.registerLanguage('custom-lang', function (hljs) {
  // 继承原有语言的所有规则，这里以JavaScript为例
  const originLang = hljs.getLanguage('javascript');
  return {
    ...originLang,
    keywords: {
      ...originLang.keywords,
      // 追加你要高亮的自定义关键词
      custom: '关键词1 关键词2 关键词3'
    },
    contains: [
      ...originLang.contains,
      // 也可以用正则匹配更复杂的自定义规则
      {
        className: 'custom-highlight',
        begin: /自定义正则匹配规则/
      }
    ]
  }
})

方案2：轻量DOM匹配实现关键词高亮 #

如果你不需要完整的语法高亮能力，只是要给页面上已有的代码块追加指定关键词的高亮效果，可以直接通过DOM操作实现：

• 操作流程：
  • 选中所有需要处理的代码块DOM节点
  • 遍历节点的文本内容，用正则匹配所有目标关键词，将匹配到的关键词替换为包裹了<span class="custom-highlight">标签的内容
  • 注意处理时避开已经被HTML标签包裹的内容，避免破坏原有DOM结构

内容的提问来源于stack exchange，提问作者Grizzly