Skip to main content

插件

Highlight.js 支持插件。您可以通过 addPlugin 方法来添加插件。

// a plugin can be a class
addPlugin(new SimplePlugin());
addPlugin(new MoreComplexPlugin(options));

// or simply a keyed object of functions
addPlugin({
  'after:highlightElement': ({ el, result, text }) => {
    // ...
  }
});

插件类型​

class方式插件​

这种方法对于需要处理配置选项或管理状态的更复杂的插件很有用。Highlight.js 将实例化您的类的单个实例并根据需要执行它的回调。

class DataLanguagePlugin {
  constructor(options) {
    self.prefix = options.dataPrefix;
  }

  'after:highlightElement'({ el, result, text }) {
    // ...
  }
}

hljs.addPlugin(new DataLanguagePlugin({ dataPrefix: 'hljs' }));

function方式插件​

这种方法最适合更简单的插件。

hljs.addPlugin({
  'after:highlightElement': ({ el, result }) => {
    // 将返回的语言放到元素的dataset属性上
    el.dataset.language = result.language;
  }
});

before:highlight​

hljs.addPlugin({
  'before:highlight': ({code, language}) => {
    // ...
  }
});

这个回调函数被传递一个带有两个键的上下文对象：

  • code：要高亮显示的代码。
  • language：应该用于高亮显示的语言语法。

您的插件可以修改任一值，这些新值将用作高亮显示引擎的输入。如果您 result 向对象添加键，则结果将作为整体结果返回，并且内部高亮显示代码甚至永远不会被调用。

如果您的插件计划对其进行递归调用，则 highlight 需要手动处理。每次 highlight 调用你的插件回调也将被调用 - 使其很容易进入无限循环。您可能需要使用基于类的插件并添加保护，以便您的插件代码仅在初始调用时触发，highlight 而不是在插件本身正在进行的任何内部调用时触发。

注意

此回调不会因自动语言检测导致的高亮显示而触发。

after:highlight​

hljs.addPlugin({
  'after:highlight': (result) => {
    // ...
  }
});

该回调函数 result 在高亮完成后传递给对象。您的插件可以对结果对象进行任何所需的更改，这将是初始调用的最终返回值 highlight。

注意

此回调不会因自动语言检测导致的高亮显示而触发。

after:highlightElement​

hljs.addPlugin({
  'after:highlightElement': ({ el, result, text }) => {
    // ...
  }
});

这个回调函数传递了一个带有两个键的对象：

  • el：高亮显示的 HTML 元素。
  • result：highlight 或 highlightAuto 返回的结果对象。
  • text：要高亮显示的原始文本。

before:highlightElement​

hljs.addPlugin({
  'before:highlightElement': ({ el, language }) => {
    // ...
  }
});

这个回调函数传递了一个带有两个键的对象：

  • code：要高亮显示的代码。
  • language：应该用于高亮显示的语言语法。