highlight.js不支持语言几种常用的解决方法

在前端技术文章或代码展示中，highlight.js 可以说是代码高亮的首选工具。它支持 Ja vaScript、TypeScript、HTML、CSS 等大部分主流语言，但一旦遇到 conf 配置文件、特定 DSL 这类冷门或自定义语言，就难免会“摆烂”。

具体来说，你可能会遇到这么几个尴尬场景：代码直接显示为纯文本，毫无高亮效果；为了避免错误提示，临时用其他语言替代，结果高亮得像“张冠李戴”；更头疼的是，后续想新增一种语言，还得满世界去找逻辑、加判断，维护成本直线上升。

好在这种问题并非无解。这里整理了几种方案，看看哪种更适合你的场景。

一、方法一：语言替代（折中方案）

先说说最简单的做法——用已有语言去“替代”不支持的。比如把 conf 配置文件当作 bash 来处理高亮：

md.options.highlight = (str: string, lang: string) => {
  if (lang === 'conf') {
    lang = 'bash'
  }
  lang = lang || 'plaintext' // highlight 支持 plaintext
  if (hljs.getLanguage(lang)) {
    return hljs.highlight(str, { language: lang }).value
  }
  return hljs.highlightAuto(str).value
}

优点很明显：简单、快捷，不需要额外注册任何语言。但缺点也同样突出——高亮语法可能完全不准确，而且扩展性很差，每新增一种语言就得写一个 if 分支，代码很快会变得臃肿。

二、方法二：使用 registerLanguage 注册语言别名（推荐）

那更好的做法呢？利用 highlight.js 提供的 registerLanguage API，把不支持的语言“注册”成已有语言规则，或者干脆自定义一套规则。

1. 注册已有语言作为别名

import hljs from 'highlight.js/lib/core'
import bash from 'highlight.js/lib/languages/bash'

hljs.registerLanguage('bash', bash)
hljs.registerLanguage('conf', bash) // 将 conf 注册为 bash 的语法

然后在 markdown-it 的高亮函数里直接使用，不需要再写任何 if 判断：

md.options.highlight = (str: string, lang: string) => {
  if (lang && hljs.getLanguage(lang)) {
    return hljs.highlight(str, { language: lang }).value
  }
  return hljs.highlightAuto(str).value
}

这么做的好处是代码逻辑清晰，维护起来也方便，新增别名只需要一次注册。但需要注意的是，高亮语法依然复用已有语言，所以如果目标语言有独特的语法结构，高亮效果可能还是不够精确。

2. 注册自定义语言

如果你追求的是“完全匹配”的高亮，那就得下点功夫——自定义语言规则：

import hljs from 'highlight.js/lib/core'

const confLang = function (hljs: any) {
  return {
    name: 'conf',
    contains: [
      hljs.COMMENT('#', '$'),
      { className: 'keyword', begin: '\\b(server|port|timeout)\\b' },
      { className: 'string', begin: '"', end: '"' },
    ]
  }
}

hljs.registerLanguage('conf', confLang)

注册之后，无论走 markdown-it 还是直接调用 hljs.highlight，都能准确识别。高亮精准、扩展性强，唯一的代价就是需要花点时间写规则。

三、方法三：按需加载语言（优化体积）

如果你的项目用了 Vite 或 Webpack，引入完整版 highlight.js 可能会导致打包体积偏大。这时候可以走 core + registerLanguage 的按需加载路线：

import hljs from 'highlight.js/lib/core'
import ja vascript from 'highlight.js/lib/languages/ja vascript'
import bash from 'highlight.js/lib/languages/bash'

hljs.registerLanguage('ja vascript', ja vascript)
hljs.registerLanguage('bash', bash)
hljs.registerLanguage('conf', bash) // 别名

这样一来，只打包项目中实际用到的语言，体积自然就下来了。

这里需要说明一下 highlight.js 的两个安装版本：

• 完整版（highlight.js）：默认包含所有常见语言的解析器，即使你不注册语言，hljs.highlight(str, { language: 'js' }) 也能直接工作。所以“没注册也能用”的原因，就是这些语言已经在 bundle 里内置了。
• 核心版（highlight.js/core）：不包含任何语言解析器，必须手动通过 registerLanguage 注册才能生效。适合按需加载、优化打包体积的场景。

四、总结

五、推荐实践

综合来看，可以这样选：

• 快速出图，不追求完美高亮 → 语言替代或注册别名就够了。
• 写技术文章，需要精准语法高亮 → 自定义语言注册，效果最可控。
• 前端项目优化 → 用 core + 按需注册语言，减小体积。
• markdown-it 集成 → 高亮函数统一调用 hljs.highlight，避免在逻辑里写太多 if。

这些方法基本能覆盖日常开发中遇到的大部分场景，让代码高亮既优雅又灵活。