@shikijs/transformers 1.22.1 → 1.23.0

package/dist/index.d.mts

@@ -13,6 +13,34 @@ interface TransformerCompactLineOption {
  */
 declare function transformerCompactLineOptions(lineOptions?: TransformerCompactLineOption[]): ShikiTransformer;
 
+declare function parseMetaHighlightString(meta: string): number[] | null;
+interface TransformerMetaHighlightOptions {
+    /**
+     * Class for highlighted lines
+     *
+     * @default 'highlighted'
+     */
+    className?: string;
+}
+/**
+ * Allow using `{1,3-5}` in the code snippet meta to mark highlighted lines.
+ */
+declare function transformerMetaHighlight(options?: TransformerMetaHighlightOptions): ShikiTransformer;
+
+declare function parseMetaHighlightWords(meta: string): string[];
+interface TransformerMetaWordHighlightOptions {
+    /**
+     * Class for highlighted words
+     *
+     * @default 'highlighted-word'
+     */
+    className?: string;
+}
+/**
+ * Allow using `/word/` in the code snippet meta to mark highlighted words.
+ */
+declare function transformerMetaWordHighlight(options?: TransformerMetaWordHighlightOptions): ShikiTransformer;
+
 interface TransformerNotationDiffOptions {
     /**
      * Class for added lines
@@ -124,34 +152,34 @@ interface TransformerRenderWhitespaceOptions {
  */
 declare function transformerRenderWhitespace(options?: TransformerRenderWhitespaceOptions): ShikiTransformer;
 
-declare function parseMetaHighlightString(meta: string): number[] | null;
-interface TransformerMetaHighlightOptions {
+interface TransformerStyleToClassOptions {
     /**
-     * Class for highlighted lines
-     *
-     * @default 'highlighted'
+     * Prefix for class names.
+     * @default '__shiki_'
      */
-    className?: string;
-}
-/**
- * Allow using `{1,3-5}` in the code snippet meta to mark highlighted lines.
- */
-declare function transformerMetaHighlight(options?: TransformerMetaHighlightOptions): ShikiTransformer;
-
-declare function parseMetaHighlightWords(meta: string): string[];
-interface TransformerMetaWordHighlightOptions {
+    classPrefix?: string;
     /**
-     * Class for highlighted words
-     *
-     * @default 'highlighted-word'
+     * Suffix for class names.
+     * @default ''
      */
-    className?: string;
+    classSuffix?: string;
+    /**
+     * Callback to replace class names.
+     * @default (className) => className
+     */
+    classReplacer?: (className: string) => string;
+}
+interface ShikiTransformerStyleToClass extends ShikiTransformer {
+    getClassRegistry: () => Map<string, Record<string, string> | string>;
+    getCSS: () => string;
+    clearRegistry: () => void;
 }
 /**
- * Allow using `/word/` in the code snippet meta to mark highlighted words.
+ * Remove line breaks between lines.
+ * Useful when you override `display: block` to `.line` in CSS.
  */
-declare function transformerMetaWordHighlight(options?: TransformerMetaWordHighlightOptions): ShikiTransformer;
+declare function transformerStyleToClass(options?: TransformerStyleToClassOptions): ShikiTransformerStyleToClass;
 
 declare function createCommentNotationTransformer(name: string, regex: RegExp, onMatch: (this: ShikiTransformerContext, match: string[], line: Element, commentNode: Element, lines: Element[], index: number) => boolean, removeEmptyLines?: boolean): ShikiTransformer;
 
-export { type TransformerCompactLineOption, type TransformerMetaHighlightOptions, type TransformerMetaWordHighlightOptions, type TransformerNotationDiffOptions, type TransformerNotationErrorLevelOptions, type TransformerNotationFocusOptions, type TransformerNotationHighlightOptions, type TransformerNotationWordHighlightOptions, type TransformerRenderWhitespaceOptions, createCommentNotationTransformer, parseMetaHighlightString, parseMetaHighlightWords, transformerCompactLineOptions, transformerMetaHighlight, transformerMetaWordHighlight, transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight, transformerNotationWordHighlight, transformerRemoveLineBreak, transformerRemoveNotationEscape, transformerRenderWhitespace };
+export { type ShikiTransformerStyleToClass, type TransformerCompactLineOption, type TransformerMetaHighlightOptions, type TransformerMetaWordHighlightOptions, type TransformerNotationDiffOptions, type TransformerNotationErrorLevelOptions, type TransformerNotationFocusOptions, type TransformerNotationHighlightOptions, type TransformerNotationWordHighlightOptions, type TransformerRenderWhitespaceOptions, type TransformerStyleToClassOptions, createCommentNotationTransformer, parseMetaHighlightString, parseMetaHighlightWords, transformerCompactLineOptions, transformerMetaHighlight, transformerMetaWordHighlight, transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight, transformerNotationWordHighlight, transformerRemoveLineBreak, transformerRemoveNotationEscape, transformerRenderWhitespace, transformerStyleToClass };

package/dist/index.d.ts

@@ -13,6 +13,34 @@ interface TransformerCompactLineOption {
  */
 declare function transformerCompactLineOptions(lineOptions?: TransformerCompactLineOption[]): ShikiTransformer;
 
+declare function parseMetaHighlightString(meta: string): number[] | null;
+interface TransformerMetaHighlightOptions {
+    /**
+     * Class for highlighted lines
+     *
+     * @default 'highlighted'
+     */
+    className?: string;
+}
+/**
+ * Allow using `{1,3-5}` in the code snippet meta to mark highlighted lines.
+ */
+declare function transformerMetaHighlight(options?: TransformerMetaHighlightOptions): ShikiTransformer;
+
+declare function parseMetaHighlightWords(meta: string): string[];
+interface TransformerMetaWordHighlightOptions {
+    /**
+     * Class for highlighted words
+     *
+     * @default 'highlighted-word'
+     */
+    className?: string;
+}
+/**
+ * Allow using `/word/` in the code snippet meta to mark highlighted words.
+ */
+declare function transformerMetaWordHighlight(options?: TransformerMetaWordHighlightOptions): ShikiTransformer;
+
 interface TransformerNotationDiffOptions {
     /**
      * Class for added lines
@@ -124,34 +152,34 @@ interface TransformerRenderWhitespaceOptions {
  */
 declare function transformerRenderWhitespace(options?: TransformerRenderWhitespaceOptions): ShikiTransformer;
 
-declare function parseMetaHighlightString(meta: string): number[] | null;
-interface TransformerMetaHighlightOptions {
+interface TransformerStyleToClassOptions {
     /**
-     * Class for highlighted lines
-     *
-     * @default 'highlighted'
+     * Prefix for class names.
+     * @default '__shiki_'
      */
-    className?: string;
-}
-/**
- * Allow using `{1,3-5}` in the code snippet meta to mark highlighted lines.
- */
-declare function transformerMetaHighlight(options?: TransformerMetaHighlightOptions): ShikiTransformer;
-
-declare function parseMetaHighlightWords(meta: string): string[];
-interface TransformerMetaWordHighlightOptions {
+    classPrefix?: string;
     /**
-     * Class for highlighted words
-     *
-     * @default 'highlighted-word'
+     * Suffix for class names.
+     * @default ''
      */
-    className?: string;
+    classSuffix?: string;
+    /**
+     * Callback to replace class names.
+     * @default (className) => className
+     */
+    classReplacer?: (className: string) => string;
+}
+interface ShikiTransformerStyleToClass extends ShikiTransformer {
+    getClassRegistry: () => Map<string, Record<string, string> | string>;
+    getCSS: () => string;
+    clearRegistry: () => void;
 }
 /**
- * Allow using `/word/` in the code snippet meta to mark highlighted words.
+ * Remove line breaks between lines.
+ * Useful when you override `display: block` to `.line` in CSS.
  */
-declare function transformerMetaWordHighlight(options?: TransformerMetaWordHighlightOptions): ShikiTransformer;
+declare function transformerStyleToClass(options?: TransformerStyleToClassOptions): ShikiTransformerStyleToClass;
 
 declare function createCommentNotationTransformer(name: string, regex: RegExp, onMatch: (this: ShikiTransformerContext, match: string[], line: Element, commentNode: Element, lines: Element[], index: number) => boolean, removeEmptyLines?: boolean): ShikiTransformer;
 
-export { type TransformerCompactLineOption, type TransformerMetaHighlightOptions, type TransformerMetaWordHighlightOptions, type TransformerNotationDiffOptions, type TransformerNotationErrorLevelOptions, type TransformerNotationFocusOptions, type TransformerNotationHighlightOptions, type TransformerNotationWordHighlightOptions, type TransformerRenderWhitespaceOptions, createCommentNotationTransformer, parseMetaHighlightString, parseMetaHighlightWords, transformerCompactLineOptions, transformerMetaHighlight, transformerMetaWordHighlight, transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight, transformerNotationWordHighlight, transformerRemoveLineBreak, transformerRemoveNotationEscape, transformerRenderWhitespace };
+export { type ShikiTransformerStyleToClass, type TransformerCompactLineOption, type TransformerMetaHighlightOptions, type TransformerMetaWordHighlightOptions, type TransformerNotationDiffOptions, type TransformerNotationErrorLevelOptions, type TransformerNotationFocusOptions, type TransformerNotationHighlightOptions, type TransformerNotationWordHighlightOptions, type TransformerRenderWhitespaceOptions, type TransformerStyleToClassOptions, createCommentNotationTransformer, parseMetaHighlightString, parseMetaHighlightWords, transformerCompactLineOptions, transformerMetaHighlight, transformerMetaWordHighlight, transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight, transformerNotationWordHighlight, transformerRemoveLineBreak, transformerRemoveNotationEscape, transformerRenderWhitespace, transformerStyleToClass };

package/dist/index.mjs

@@ -10,6 +10,82 @@ function transformerCompactLineOptions(lineOptions = []) {
   };
 }
 
+function parseMetaHighlightString(meta) {
+  if (!meta)
+    return null;
+  const match = meta.match(/\{([\d,-]+)\}/);
+  if (!match)
+    return null;
+  const lines = match[1].split(",").flatMap((v) => {
+    const num = v.split("-").map((v2) => Number.parseInt(v2, 10));
+    if (num.length === 1)
+      return [num[0]];
+    else
+      return Array.from({ length: num[1] - num[0] + 1 }, (_, i) => i + num[0]);
+  });
+  return lines;
+}
+const symbol = Symbol("highlighted-lines");
+function transformerMetaHighlight(options = {}) {
+  const {
+    className = "highlighted"
+  } = options;
+  return {
+    name: "@shikijs/transformers:meta-highlight",
+    line(node, line) {
+      var _a;
+      if (!this.options.meta?.__raw) {
+        return;
+      }
+      (_a = this.meta)[symbol] || (_a[symbol] = parseMetaHighlightString(this.options.meta.__raw));
+      const lines = this.meta[symbol] || [];
+      if (lines.includes(line))
+        this.addClassToHast(node, className);
+      return node;
+    }
+  };
+}
+
+function parseMetaHighlightWords(meta) {
+  if (!meta)
+    return [];
+  const match = Array.from(meta.matchAll(/\/((?:\\.|[^/])+)\//g));
+  return match.map((v) => v[1].replace(/\\(.)/g, "$1"));
+}
+function transformerMetaWordHighlight(options = {}) {
+  const {
+    className = "highlighted-word"
+  } = options;
+  return {
+    name: "@shikijs/transformers:meta-word-highlight",
+    preprocess(code, options2) {
+      if (!this.options.meta?.__raw)
+        return;
+      const words = parseMetaHighlightWords(this.options.meta.__raw);
+      options2.decorations || (options2.decorations = []);
+      for (const word of words) {
+        const indexes = findAllSubstringIndexes(code, word);
+        for (const index of indexes) {
+          options2.decorations.push({
+            start: index,
+            end: index + word.length,
+            properties: {
+              class: className
+            }
+          });
+        }
+      }
+    }
+  };
+}
+function findAllSubstringIndexes(str, substr) {
+  const indexes = [];
+  let i = -1;
+  while ((i = str.indexOf(substr, i + 1)) !== -1)
+    indexes.push(i);
+  return indexes;
+}
+
 function createCommentNotationTransformer(name, regex, onMatch, removeEmptyLines = false) {
   return {
     name,
@@ -364,80 +440,80 @@ function transformerRenderWhitespace(options = {}) {
   };
 }
 
-function parseMetaHighlightString(meta) {
-  if (!meta)
-    return null;
-  const match = meta.match(/\{([\d,-]+)\}/);
-  if (!match)
-    return null;
-  const lines = match[1].split(",").flatMap((v) => {
-    const num = v.split("-").map((v2) => Number.parseInt(v2, 10));
-    if (num.length === 1)
-      return [num[0]];
-    else
-      return Array.from({ length: num[1] - num[0] + 1 }, (_, i) => i + num[0]);
-  });
-  return lines;
-}
-const symbol = Symbol("highlighted-lines");
-function transformerMetaHighlight(options = {}) {
+function transformerStyleToClass(options = {}) {
   const {
-    className = "highlighted"
+    classPrefix = "__shiki_",
+    classSuffix = "",
+    classReplacer = (className) => className
   } = options;
-  return {
-    name: "@shikijs/transformers:meta-highlight",
-    line(node, line) {
-      var _a;
-      if (!this.options.meta?.__raw) {
-        return;
-      }
-      (_a = this.meta)[symbol] || (_a[symbol] = parseMetaHighlightString(this.options.meta.__raw));
-      const lines = this.meta[symbol] || [];
-      if (lines.includes(line))
-        this.addClassToHast(node, className);
-      return node;
+  const classToStyle = /* @__PURE__ */ new Map();
+  function stringifyStyle(style) {
+    return Object.entries(style).map(([key, value]) => `${key}:${value}`).join(";");
+  }
+  function registerStyle(style) {
+    const str = typeof style === "string" ? style : stringifyStyle(style);
+    let className = classPrefix + cyrb53(str) + classSuffix;
+    className = classReplacer(className);
+    if (!classToStyle.has(className)) {
+      classToStyle.set(
+        className,
+        typeof style === "string" ? style : { ...style }
+      );
     }
-  };
-}
-
-function parseMetaHighlightWords(meta) {
-  if (!meta)
-    return [];
-  const match = Array.from(meta.matchAll(/\/((?:\\.|[^/])+)\//g));
-  return match.map((v) => v[1].replace(/\\(.)/g, "$1"));
-}
-function transformerMetaWordHighlight(options = {}) {
-  const {
-    className = "highlighted-word"
-  } = options;
+    return className;
+  }
   return {
-    name: "@shikijs/transformers:meta-word-highlight",
-    preprocess(code, options2) {
-      if (!this.options.meta?.__raw)
+    name: "@shikijs/transformers:style-to-class",
+    pre(t) {
+      if (!t.properties.style)
         return;
-      const words = parseMetaHighlightWords(this.options.meta.__raw);
-      options2.decorations || (options2.decorations = []);
-      for (const word of words) {
-        const indexes = findAllSubstringIndexes(code, word);
-        for (const index of indexes) {
-          options2.decorations.push({
-            start: index,
-            end: index + word.length,
-            properties: {
-              class: className
-            }
-          });
+      const className = registerStyle(t.properties.style);
+      delete t.properties.style;
+      this.addClassToHast(t, className);
+    },
+    tokens(lines) {
+      for (const line of lines) {
+        for (const token of line) {
+          if (!token.htmlStyle)
+            continue;
+          const className = registerStyle(token.htmlStyle);
+          token.htmlStyle = {};
+          token.htmlAttrs || (token.htmlAttrs = {});
+          if (!token.htmlAttrs.class)
+            token.htmlAttrs.class = className;
+          else
+            token.htmlAttrs.class += ` ${className}`;
         }
       }
+    },
+    getClassRegistry() {
+      return classToStyle;
+    },
+    getCSS() {
+      let css = "";
+      for (const [className, style] of classToStyle.entries()) {
+        css += `.${className}{${typeof style === "string" ? style : stringifyStyle(style)}}`;
+      }
+      return css;
+    },
+    clearRegistry() {
+      classToStyle.clear();
     }
   };
 }
-function findAllSubstringIndexes(str, substr) {
-  const indexes = [];
-  let i = -1;
-  while ((i = str.indexOf(substr, i + 1)) !== -1)
-    indexes.push(i);
-  return indexes;
+function cyrb53(str, seed = 0) {
+  let h1 = 3735928559 ^ seed;
+  let h2 = 1103547991 ^ seed;
+  for (let i = 0, ch; i < str.length; i++) {
+    ch = str.charCodeAt(i);
+    h1 = Math.imul(h1 ^ ch, 2654435761);
+    h2 = Math.imul(h2 ^ ch, 1597334677);
+  }
+  h1 = Math.imul(h1 ^ h1 >>> 16, 2246822507);
+  h1 ^= Math.imul(h2 ^ h2 >>> 13, 3266489909);
+  h2 = Math.imul(h2 ^ h2 >>> 16, 2246822507);
+  h2 ^= Math.imul(h1 ^ h1 >>> 13, 3266489909);
+  return (4294967296 * (2097151 & h2) + (h1 >>> 0)).toString(36).slice(0, 6);
 }
 
-export { createCommentNotationTransformer, parseMetaHighlightString, parseMetaHighlightWords, transformerCompactLineOptions, transformerMetaHighlight, transformerMetaWordHighlight, transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight, transformerNotationWordHighlight, transformerRemoveLineBreak, transformerRemoveNotationEscape, transformerRenderWhitespace };
+export { createCommentNotationTransformer, parseMetaHighlightString, parseMetaHighlightWords, transformerCompactLineOptions, transformerMetaHighlight, transformerMetaWordHighlight, transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight, transformerNotationWordHighlight, transformerRemoveLineBreak, transformerRemoveNotationEscape, transformerRenderWhitespace, transformerStyleToClass };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shikijs/transformers",
   "type": "module",
-  "version": "1.22.1",
+  "version": "1.23.0",
   "description": "Collective of common transformers transformers for Shiki",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "dist"
   ],
   "dependencies": {
-    "shiki": "1.22.1"
+    "shiki": "1.23.0"
   },
   "scripts": {
     "build": "unbuild",