@expressive-code/plugin-shiki - npm Package Compare versions

Comparing version 0.26.2 to 0.27.0

dist/index.js

@@ -41,5 +41,3 @@ // src/index.ts
     hooks: {
-      performSyntaxAnalysis: async ({ codeBlock, theme }) => {
-        const cacheKey = getThemeCacheKey(theme);
-        const highlighter = await getCachedHighlighter({ theme, cacheKey });
+      performSyntaxAnalysis: async ({ codeBlock, styleVariants }) => {
         const codeLines = codeBlock.getLines();
@@ -50,26 +48,32 @@ let code = codeBlock.code;
         }
-        const tokenLines = codeBlock.language === "ansi" ? highlighter.ansiToThemedTokens(code, cacheKey) : highlighter.codeToThemedTokens(code, codeBlock.language, cacheKey, { includeExplanation: false });
-        tokenLines.forEach((line, lineIndex) => {
-          if (codeBlock.language === "ansi")
-            removeAnsiSequencesFromCodeLine(codeLines[lineIndex], line);
-          let charIndex = 0;
-          line.forEach((token) => {
-            const tokenLength = token.content.length;
-            const tokenEndIndex = charIndex + tokenLength;
-            const fontStyle = token.fontStyle || FontStyle.None;
-            codeLines[lineIndex].addAnnotation(
-              new InlineStyleAnnotation({
-                color: token.color || theme.fg,
-                italic: (fontStyle & FontStyle.Italic) === FontStyle.Italic,
-                bold: (fontStyle & FontStyle.Bold) === FontStyle.Bold,
-                underline: (fontStyle & FontStyle.Underline) === FontStyle.Underline,
-                inlineRange: {
-                  columnStart: charIndex,
-                  columnEnd: tokenEndIndex
-                }
-              })
-            );
-            charIndex = tokenEndIndex;
+        for (let styleVariantIndex = 0; styleVariantIndex < styleVariants.length; styleVariantIndex++) {
+          const theme = styleVariants[styleVariantIndex].theme;
+          const cacheKey = getThemeCacheKey(theme);
+          const highlighter = await getCachedHighlighter({ theme, cacheKey });
+          const tokenLines = codeBlock.language === "ansi" ? highlighter.ansiToThemedTokens(code, cacheKey) : highlighter.codeToThemedTokens(code, codeBlock.language, cacheKey, { includeExplanation: false });
+          tokenLines.forEach((line, lineIndex) => {
+            if (codeBlock.language === "ansi" && styleVariantIndex === 0)
+              removeAnsiSequencesFromCodeLine(codeLines[lineIndex], line);
+            let charIndex = 0;
+            line.forEach((token) => {
+              const tokenLength = token.content.length;
+              const tokenEndIndex = charIndex + tokenLength;
+              const fontStyle = token.fontStyle || FontStyle.None;
+              codeLines[lineIndex].addAnnotation(
+                new InlineStyleAnnotation({
+                  styleVariantIndex,
+                  color: token.color || theme.fg,
+                  italic: (fontStyle & FontStyle.Italic) === FontStyle.Italic,
+                  bold: (fontStyle & FontStyle.Bold) === FontStyle.Bold,
+                  underline: (fontStyle & FontStyle.Underline) === FontStyle.Underline,
+                  inlineRange: {
+                    columnStart: charIndex,
+                    columnEnd: tokenEndIndex
+                  }
+                })
+              );
+              charIndex = tokenEndIndex;
+            });
           });
-        });
+        }
       }
@@ -76,0 +80,0 @@ }

package.json

 {
   "name": "@expressive-code/plugin-shiki",
-  "version": "0.26.2",
+  "version": "0.27.0",
   "description": "Shiki syntax highlighting plugin for Expressive Code, a text marking & annotation engine for presenting source code on the web.",
@@ -26,3 +26,3 @@ "keywords": [],
   "dependencies": {
-    "@expressive-code/core": "^0.26.2",
+    "@expressive-code/core": "^0.27.0",
     "shiki": "^0.14.1"
@@ -32,3 +32,3 @@ },
     "hast-util-to-html": "^8.0.4",
-    "@internal/test-utils": "^0.2.19"
+    "@internal/test-utils": "^0.2.20"
   },
@@ -35,0 +35,0 @@ "scripts": {

README.md

@@ -35,3 +35,3 @@ # @expressive-code/plugin-shiki
 
-This plugin will automatically highlight your code blocks using the current theme of Expressive Code.
+This plugin will automatically highlight your code blocks using all themes defined in the Expressive Code configuration.
 
@@ -52,5 +52,5 @@ You only need to ensure that your opening code fences have a language identifier, e.g. `js` for JavaScript:
 
-This plugin does not have any configuration options. It automatically uses the current theme of Expressive Code, which you can select using its `theme` configuration option.
+This plugin does not have any configuration options. It automatically uses all themes defined in the Expressive Code configuration under the option `themes`.
 
-Here are configuration examples on how to select a theme in some popular site generators:
+Here are configuration examples on how to select themes in some popular site generators:
 
@@ -70,6 +70,6 @@ ### Astro configuration example
 const astroExpressiveCodeOptions = {
-  // You can set this to any of the themes bundled with Shiki,
+  // You can use any of the themes bundled with Shiki by name,
   // specify a path to JSON theme file, or pass an instance
   // of the `ExpressiveCodeTheme` class here:
-  theme: 'dracula',
+  themes: ['dracula', 'solarized-light'],
 }
@@ -93,6 +93,6 @@
 const remarkExpressiveCodeOptions = {
-  // You can set this to any of the themes bundled with Shiki,
+  // You can use any of the themes bundled with Shiki by name,
   // specify a path to JSON theme file, or pass an instance
   // of the `ExpressiveCodeTheme` class here:
-  theme: 'nord',
+  themes: ['dracula', 'solarized-light'],
 }
@@ -99,0 +99,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

38526

decreased by-9.34%

Number of package files

8

decreased by-11.11%

Lines of code

275

decreased by-32.27%

Dependency changes

• + Added@expressive-code/core@0.27.1(transitive)

• - Removed@expressive-code/core@0.26.2(transitive)

• Updated@expressive-code/core@^0.27.0