Update GeneratorOptions shiki object type

- Use createHighlighter instead of deprecated getHighlighter - Allow dual theme field - Mark transformers as optional
Trinovantes · Aug 14, 2024 · fa16f5f · fa16f5f
1 parent bbced59
commit fa16f5f
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -204,12 +204,10 @@ import { RstToHtmlCompiler, RstGeneratorOptions } from 'rst-compiler'
 
 const generatorOptions: Partial<RstGeneratorOptions> = {
     shiki: {
-        defaultLanguage: 'python',
-        theme: 'min-dark',
-        transformers: [],
-        highlighter: await getHighlighter({
-            langs: ['py', 'js', 'cpp'],
-            themes: ['min-dark'],
+        theme: 'github-light',
+        highlighter: await createHighlighter({
+            langs: ['python', 'js'],
+            themes: ['github-light'],
         }),
     },
 }

diff --git a/demo/components/CodePreview.vue b/demo/components/CodePreview.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue'
-import { codeToHtml, getHighlighter } from 'shiki'
+import { codeToHtml, createHighlighter } from 'shiki'
 import { useQuasar } from 'quasar'
 import { RstGeneratorOptions, RstParserOptions, RstToHtmlCompiler, RstToMdCompiler } from '@/index.js'
 
@@ -70,8 +70,7 @@ watch(editorText, async(editorText) => {
         const generatorOptions: Partial<RstGeneratorOptions> = {
             shiki: {
                 theme: 'github-light',
-                transformers: [],
-                highlighter: await getHighlighter({
+                highlighter: await createHighlighter({
                     langs: ['python', 'js'],
                     themes: ['github-light'],
                 }),

diff --git a/demo/components/DefaultText.rst b/demo/components/DefaultText.rst
@@ -39,12 +39,10 @@ However, this demo is configured to use :code:`shiki` for syntax highlighting:
 
     const generatorOptions: Partial<RstGeneratorOptions> = {
         shiki: {
-            defaultLanguage: 'python',
-            theme: 'min-dark',
-            transformers: [],
-            highlighter: await getHighlighter({
-                langs: ['py', 'js', 'cpp'],
-                themes: ['min-dark'],
+            theme: 'github-light',
+            highlighter: await createHighlighter({
+                langs: ['python', 'js'],
+                themes: ['github-light'],
             }),
         },
     }

diff --git a/src/Generator/RstGeneratorOptions.ts b/src/Generator/RstGeneratorOptions.ts
@@ -1,6 +1,6 @@
 import merge from 'lodash.merge'
 import { KatexOptions } from 'katex'
-import { ShikiTransformer, getHighlighter } from 'shiki'
+import { createHighlighter, ShikiTransformer, CodeOptionsMultipleThemes } from 'shiki'
 
 export type RstGeneratorOptions = {
     disableWarnings: boolean
@@ -106,9 +106,9 @@ export type RstGeneratorOptions = {
      * If not set, code blocks will output as `<pre>` and inline code will output as `<code>`
      */
     shiki?: {
-        theme: string
-        transformers: Array<ShikiTransformer>
-        highlighter: Awaited<ReturnType<typeof getHighlighter>>
+        highlighter: Awaited<ReturnType<typeof createHighlighter>>
+        theme: string | CodeOptionsMultipleThemes['themes']
+        transformers?: Array<ShikiTransformer>
     }
 
     /**

diff --git a/src/Plugins/Code/renderCodeBlockHtml.ts b/src/Plugins/Code/renderCodeBlockHtml.ts
@@ -10,11 +10,21 @@ export function renderCodeBlockHtml(generatorState: RstGeneratorState, language:
             return
         }
 
-        const renderedCode = generatorState.opts.shiki.highlighter.codeToHtml(rawCode, {
-            lang: language,
-            theme: generatorState.opts.shiki.theme,
-            transformers: generatorState.opts.shiki.transformers,
-        })
+        let renderedCode: string
+
+        if (typeof generatorState.opts.shiki.theme === 'string') {
+            renderedCode = generatorState.opts.shiki.highlighter.codeToHtml(rawCode, {
+                lang: language,
+                theme: generatorState.opts.shiki.theme,
+                transformers: generatorState.opts.shiki.transformers,
+            })
+        } else {
+            renderedCode = generatorState.opts.shiki.highlighter.codeToHtml(rawCode, {
+                lang: language,
+                themes: generatorState.opts.shiki.theme,
+                transformers: generatorState.opts.shiki.transformers,
+            })
+        }
 
         generatorState.writeText(renderedCode)
     })

diff --git a/tests/playground/server.ts b/tests/playground/server.ts
@@ -2,7 +2,7 @@ import { RstToHtmlCompiler } from '@/RstCompiler.js'
 import fs from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
-import { getHighlighter } from 'shiki'
+import { createHighlighter } from 'shiki'
 
 const port = 8080
 
@@ -16,11 +16,10 @@ Bun.serve({
         const { body, header } = new RstToHtmlCompiler().compile(rst, {}, {
             defaultSyntaxLanguage: 'python',
             shiki: {
-                theme: 'min-dark',
-                transformers: [],
-                highlighter: await getHighlighter({
-                    langs: ['py', 'js', 'cpp', 'csharp'],
-                    themes: ['min-dark'],
+                theme: 'github-light',
+                highlighter: await createHighlighter({
+                    langs: ['python', 'js'],
+                    themes: ['github-light'],
                 }),
             },
         })