feat: Support to use transformers in https://shiki.style/packages/transformers

README.md

@@ -34,13 +34,20 @@ shiki:
 The complete configuration is as follows:
 ```yaml
 shiki:
-  theme: one-dark-pro # see https://shiki.style/themes for supported themes.
+  theme: one-dark-pro # Please refer to https://shiki.style/themes for supported themes.
   line_number: false # default: false
   strip_indent: true # default: true
   tab_replace: "  " # default: "  "
   pre_style: true # Preserve the style of the <pre> tag, i.e., the theme's `background-color`. default: true
   default_color: light # Only take effect when using multiple themes. default: light
   css_variable_prefix: --shiki- # Only take effect when using multiple themes. default: --shiki-
+  transformers: # List of transformers to be enabled. Please refer to https://shiki.style/packages/transformers for the list of supported transformers.
+    - "transformerNotationDiff" # You can omit name and option when no settings are required, directly using the string.
+    - name: transformerNotationFocus # When settings are required, please explicitly set name and option.
+      option: # Options for the transformer, please check the transformer's source code to get the list of supported options
+      # Source code of transformers: https://github.com/shikijs/shiki/tree/main/packages/transformers/src/transformers
+        classActiveLine: focused
+        classActivePre: has-focused
   additional:
     themes: # List of the TextMate theme json to be added.
       - path/to/theme.json

README_zh-CN.md

@@ -40,6 +40,13 @@ shiki:
   pre_style: true # 保留 <pre> 标签的样式，即主题的 `background-color`。
   default_color: light # 仅在同时使用多个主题时生效。默认值：light
   css_variable_prefix: --shiki- # 仅在同时使用多个主题时生效。默认值：--shiki-
+  transformers: # 需要启用的转换器列表。请参阅 https://shiki.style/packages/transformers 以获取支持的转换器列表。
+    - "transformerNotationDiff" # 不需要设置选项时，可省略 name 与 option，直接使用字符串。
+    - name: transformerNotationFocus # 需要设置选项时，请显式设置 name 与 option。
+      option: # 转换器的选项，请查看转换器的源码以获取支持的选项列表
+      # 转换器源码：https://github.com/shikijs/shiki/tree/main/packages/transformers/src/transformers
+        classActiveLine: focused
+        classActivePre: has-focused
   additional:
     themes: # 要添加的主题的 TextMate 主题 json 列表。
     langs: # 要添加的语言的 TextMate 语法 json 列表。

src/main.ts

@@ -4,6 +4,33 @@ import type Hexo from "hexo";
 import { HighlightOptions } from "hexo/dist/extend/syntax_highlight";
 import { stripIndent, htmlTag } from "hexo-util";
 import { readFileSync } from "fs";
+import {
+  transformerCompactLineOptions,
+  transformerMetaHighlight,
+  transformerMetaWordHighlight,
+  transformerNotationDiff,
+  transformerNotationErrorLevel,
+  transformerNotationFocus,
+  transformerNotationHighlight,
+  transformerNotationWordHighlight,
+  transformerRemoveLineBreak,
+  transformerRemoveNotationEscape,
+  transformerRenderWhitespace,
+} from "@shikijs/transformers";
+
+const supported_transformers = {
+  transformerCompactLineOptions,
+  transformerMetaHighlight,
+  transformerMetaWordHighlight,
+  transformerNotationDiff,
+  transformerNotationErrorLevel,
+  transformerNotationFocus,
+  transformerNotationHighlight,
+  transformerNotationWordHighlight,
+  transformerRemoveLineBreak,
+  transformerRemoveNotationEscape,
+  transformerRenderWhitespace,
+};
 
 export async function init(hexo: Hexo) {
   const config = Object.assign(
@@ -15,6 +42,7 @@ export async function init(hexo: Hexo) {
       pre_style: true,
       default_color: "light",
       css_variable_prefix: "--shiki-",
+      transformers: [],
       additional: {
         themes: [],
         langs: [],
@@ -44,6 +72,22 @@ export async function init(hexo: Hexo) {
     )
   );
 
+  // 处理 transformers
+  const transformers = config.transformers
+    .map((transformer) => {
+      if (typeof transformer === "string") {
+        let tfm = supported_transformers[transformer];
+        if (!tfm) return null;
+        return tfm();
+      }
+      let tfm = supported_transformers[transformer["name"]];
+      if (!tfm) return null;
+      let option = transformer["option"];
+      if (!option) return tfm();
+      return tfm(option);
+    })
+    .filter((tfm) => tfm !== null);
+
   // 创建 highlighter
   let highlighter_options = {
     langs: langs,
@@ -91,13 +135,13 @@ export async function init(hexo: Hexo) {
         pre = highlighter.codeToHtml(code, {
           lang,
           theme: config.theme,
-          transformers: [transformerMarkedLine()],
+          transformers: [transformerMarkedLine()].concat(transformers),
         });
       else
         pre = highlighter.codeToHtml(code, {
           lang,
           themes: config.theme,
-          transformers: [transformerMarkedLine()],
+          transformers: [transformerMarkedLine()].concat(transformers),
           defaultColor: config.default_color,
           cssVariablePrefix: config.css_variable_prefix,
         });