Highlight.js 插件开发指南：扩展语法高亮功能-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00337/article/details/148361452

Highlight.js 插件开发指南：扩展语法高亮功能

highlight.js 项目地址: https://gitcode.com/gh_mirrors/hig/highlight.js

前言

Highlight.js 是一个强大的语法高亮库，支持多种编程语言。除了内置功能外，它还提供了灵活的插件系统，允许开发者扩展和定制高亮行为。本文将深入解析 Highlight.js 的插件 API，帮助开发者掌握插件开发技巧。

插件基础

Highlight.js 支持两种形式的插件：

类形式插件：适合需要处理配置选项或管理状态的复杂插件
函数形式插件：适合简单的功能扩展

类形式插件示例

class CustomHighlighter {
  constructor(options) {
    this.options = options;
  }

  'after:highlightElement'({ el, result }) {
    // 自定义高亮后处理逻辑
    el.dataset.highlighted = 'true';
  }
}

// 注册插件
hljs.addPlugin(new CustomHighlighter({ theme: 'dark' }));

函数形式插件示例

hljs.addPlugin({
  'before:highlight': ({ code, language }) => {
    // 预处理代码
    return { code: code.trim(), language };
  }
});

插件生命周期钩子

Highlight.js 提供了多个生命周期钩子，让插件可以在高亮过程的不同阶段介入。

before:highlight

触发时机：在高亮开始前触发（自动语言检测时不触发）

参数：

code: 待高亮的原始代码
language: 将要使用的语言语法

用途：修改原始代码或更改使用的语言

hljs.addPlugin({
  'before:highlight': ({ code, language }) => {
    // 移除代码中的前导/尾随空格
    return { code: code.trim(), language };
  }
});

after:highlight

触发时机：在高亮完成后触发（自动语言检测时不触发）

参数：

result: 高亮结果对象

用途：修改最终的高亮结果

hljs.addPlugin({
  'after:highlight': (result) => {
    // 添加自定义元数据到结果中
    result.metadata = { processedAt: new Date() };
    return result;
  }
});

before:highlightElement

触发时机：在元素高亮开始前触发

参数：

el: 将要被高亮的HTML元素
language: 从class属性确定的语言（可能为undefined）

用途：在元素高亮前进行预处理

hljs.addPlugin({
  'before:highlightElement': ({ el, language }) => {
    // 记录原始语言
    el.dataset.originalLanguage = language || 'auto';
  }
});

after:highlightElement

触发时机：在元素高亮完成后触发

参数：

el: 已被高亮的HTML元素
result: 高亮结果对象
text: 原始文本内容

用途：对高亮后的元素进行后处理

hljs.addPlugin({
  'after:highlightElement': ({ el, result }) => {
    // 添加语言标识到元素上
    if (result.language) {
      el.classList.add(`lang-${result.language}`);
    }
  }
});