support twoslash transformers

Author: dks333

packages/mdx/package.json

@@ -68,6 +68,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
+    "@shikijs/transformers": "^3.6.0",
     "hast-util-to-string": "^3.0.1",
     "mdast-util-mdx-jsx": "^3.2.0",
     "next-mdx-remote-client": "^1.0.3",

packages/mdx/src/plugins/rehype/rehypeSyntaxHighlighting.ts

@@ -17,6 +17,7 @@ import {
   DEFAULT_LIGHT_THEME,
   DEFAULT_THEMES,
   DEFAULT_LANGS,
+  SHIKI_TRANSFORMERS,
 } from './shiki-constants.js';
 import { getLanguage } from './utils.js';
 
@@ -126,6 +127,7 @@ const traverseNode = (
       colorReplacements: shikiColorReplacements,
       tabindex: false,
       tokenizeMaxLineLength: 1000,
+      transformers: SHIKI_TRANSFORMERS,
     });
 
     const codeElement = hast.children[0] as Element;

packages/mdx/src/plugins/rehype/shiki-constants.ts

@@ -1,6 +1,18 @@
+import {
+  transformerNotationHighlight,
+  transformerNotationFocus,
+  transformerMetaHighlight,
+  transformerNotationDiff,
+} from '@shikijs/transformers';
+import type { ShikiTransformer } from '@shikijs/types';
 import { createCssVariablesTheme } from 'shiki/core';
 import type { BundledLanguage, ThemeRegistration } from 'shiki/types';
 
+export const LINE_HIGHLIGHT_CLASS_NAME = 'line-highlight';
+export const LINE_FOCUS_CLASS_NAME = 'line-focus';
+export const LINE_DIFF_ADD_CLASS_NAME = 'line-diff line-add';
+export const LINE_DIFF_REMOVE_CLASS_NAME = 'line-diff line-remove';
+
 export type ShikiLang = BundledLanguage | 'text';
 export type ShikiTheme = (typeof SHIKI_THEMES)[number];
 
@@ -493,3 +505,26 @@ export const DEFAULT_LANGS = [
   'tsx',
   'yaml',
 ];
+
+export const matchAlgorithm = {
+  matchAlgorithm: 'v3',
+} as const;
+
+export const SHIKI_TRANSFORMERS: ShikiTransformer[] = [
+  transformerMetaHighlight({
+    className: LINE_HIGHLIGHT_CLASS_NAME,
+  }),
+  transformerNotationHighlight({
+    ...matchAlgorithm,
+    classActiveLine: LINE_HIGHLIGHT_CLASS_NAME,
+  }),
+  transformerNotationFocus({
+    ...matchAlgorithm,
+    classActiveLine: LINE_FOCUS_CLASS_NAME,
+  }),
+  transformerNotationDiff({
+    ...matchAlgorithm,
+    classLineAdd: LINE_DIFF_ADD_CLASS_NAME,
+    classLineRemove: LINE_DIFF_REMOVE_CLASS_NAME,
+  }),
+];

yarn.lock

@@ -433,6 +433,7 @@ __metadata:
     "@mintlify/eslint-config-typescript": "npm:^1.0.9"
     "@mintlify/prettier-config": "npm:^1.0.1"
     "@mintlify/ts-config": "npm:^2.0.2"
+    "@shikijs/transformers": "npm:^3.6.0"
     "@trivago/prettier-plugin-sort-imports": "npm:^4.3.0"
     "@tsconfig/recommended": "npm:1.x"
     "@types/hast": "npm:^3.0.4"
@@ -693,6 +694,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@shikijs/transformers@npm:^3.6.0":
+  version: 3.6.0
+  resolution: "@shikijs/transformers@npm:3.6.0"
+  dependencies:
+    "@shikijs/core": "npm:3.6.0"
+    "@shikijs/types": "npm:3.6.0"
+  checksum: 10c0/c08d65bffe2c484ce2e6b0b3016379833fa79d53e22fdfa575c10d0b6c3a35580742a2e9ef2032288178d87c99505544f62bde01434d79c87f0ff9b2c4f03fb6
+  languageName: node
+  linkType: hard
+
 "@shikijs/types@npm:3.6.0":
   version: 3.6.0
   resolution: "@shikijs/types@npm:3.6.0"