change(highlighter) use shiki instead of shikiji (#30)

* change(highlighter) use shiki instead of shikiji

* change(docs) markdown highlight

* chore: release

* feat(gh actions) run test

.github/workflows/publish-commit.yml

@@ -12,7 +12,7 @@ on:
     types: [submitted]
 
 jobs:
-  build:
+  publish:
     runs-on: ubuntu-latest
 
     steps:

.github/workflows/run-test.yml

@@ -0,0 +1,29 @@
+name: Run Test
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    types: [opened, synchronize]
+
+  pull_request_review:
+    types: [submitted]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Install pnpm
+        uses: pnpm/[email protected]
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Run test
+        run: pnpm test:run

docs/layouts/all-operations.md

@@ -7,7 +7,7 @@ outline: false
 
 You can use the `OASpec` component to render all operations in a single page layout.
 
-```vue
+```markdown
 ---
 aside: false
 outline: false

docs/layouts/custom-slots.md

@@ -11,7 +11,7 @@ The `OAOperation` component provides several slots for customizing the operation
 
 The `description` slot allows you to customize the operation description.
 
-```vue
+```markdown
 ---
 aside: false
 outline: false

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vitepress-theme-openapi",
   "type": "module",
-  "version": "0.0.3-alpha.25",
+  "version": "0.0.3-alpha.26",
   "packageManager": "[email protected]",
   "homepage": "https://vitepress-theme-openapi.vercel.app/",
   "repository": {
@@ -35,7 +35,9 @@
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
     "docs:dev": "vitepress dev docs",
-    "docs:build": "npm run build && vitepress build docs"
+    "docs:build": "npm run build && vitepress build docs",
+    "test": "vitest",
+    "test:run": "vitest --run"
   },
   "peerDependencies": {
     "vue": "^3.4.29"
@@ -65,7 +67,7 @@
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
     "scule": "^1.3.0",
-    "shikiji": "0.10.2",
+    "shiki": "^1.16.1",
     "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4",
     "typescript-eslint": "^8.3.0",

src/components/Common/OACodeBlock.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { codeToHtml } from 'shikiji'
 import { ref, watch } from 'vue'
+import { useShiki } from 'vitepress-theme-openapi/composables/useShiki'
 import VueJsonPretty from 'vue-json-pretty';
 import 'vue-json-pretty/lib/styles.css';
 
@@ -29,6 +29,8 @@ const props = defineProps({
 
 const html = ref(null)
 
+const shiki = useShiki()
+
 watch(
   [() => props.code, () => props.lang, () => props.isDark],
   async () => {
@@ -37,11 +39,11 @@ watch(
     }
 
     if (props.disableHtmlTransform) {
-      html.value = props.code
+      html.value = `<pre><code>${props.code}</code></pre>`
       return
     }
 
-    html.value = await codeToHtml(props.code, {
+    html.value = shiki.renderShiki(props.code, {
       lang: props.lang,
       theme: props.isDark ? 'vitesse-dark' : 'vitesse-light',
     })

src/composables/useShiki.ts

@@ -0,0 +1,47 @@
+import { ref } from 'vue';
+import { createHighlighterCoreSync, createJavaScriptRegexEngine } from 'shiki/core'
+import { useTheme } from 'vitepress-theme-openapi/composables/useTheme';
+import { type Highlighter } from 'shiki/bundle/web';
+
+import js from 'shiki/langs/javascript.mjs'
+import ts from 'shiki/langs/typescript.mjs'
+import markdown from 'shiki/langs/markdown.mjs'
+import json from 'shiki/langs/json.mjs'
+import xml from 'shiki/langs/xml.mjs'
+import python from 'shiki/langs/python.mjs'
+import bash from 'shiki/langs/bash.mjs'
+import php from 'shiki/langs/php.mjs'
+
+const langs = [js, ts, markdown, json, xml, python, bash, php];
+
+let shiki: Highlighter | null = null;
+
+const loading = ref(true);
+const themeConfig = useTheme();
+
+export function useShiki() {
+  const initShiki = () => {
+    if (shiki) {
+      return;
+    }
+    shiki = createHighlighterCoreSync({
+      themes: [themeConfig.highlighterTheme.light, themeConfig.highlighterTheme.dark],
+      langs,
+      engine: createJavaScriptRegexEngine()
+    })
+  };
+
+  const renderShiki = (content: string, { lang, theme }: { lang: string; theme: string }) => {
+    if (shiki && shiki.getLoadedLanguages().includes(lang)) {
+      const result = shiki.codeToHtml(content, {
+        lang,
+        theme,
+      });
+      return result;
+    } else {
+      return `<pre><code>${content}</code></pre>`;
+    }
+  };
+
+  return { loading, renderShiki, initShiki };
+}

src/composables/useTheme.ts

@@ -1,11 +1,18 @@
 import { ref } from 'vue'
+import vitesseLight from 'shiki/themes/vitesse-light.mjs'
+import vitesseDark from 'shiki/themes/vitesse-dark.mjs'
 
 const locale: Ref<'es' | 'en'> = ref('en')
 
 const schemaDefaultView: Ref<'schema' | 'json'> = ref('json')
 
 const showBaseURL: Ref<boolean> = ref(false)
 
+const highlighterTheme = {
+  light: vitesseLight,
+  dark: vitesseDark,
+}
+
 export function useTheme() {
   function getLocale() {
     return locale.value
@@ -32,6 +39,7 @@ export function useTheme() {
   }
 
   return {
+    highlighterTheme,
     schemaDefaultView,
     getLocale,
     setLocale,

src/index.ts

@@ -1,17 +1,22 @@
-import 'tailwindcss/tailwind.css'
-import './style.css'
-import * as VueI18n from 'vue-i18n'
-import type { EnhanceAppContext, Theme } from 'vitepress/client'
-import type { Component } from 'vue'
-import type { Awaitable } from 'vitepress'
 import { useTheme } from './composables/useTheme'
+import { useShiki } from './composables/useShiki'
 import * as components from './components'
+
+import * as VueI18n from 'vue-i18n'
 import es from './locales/es.json'
 import en from './locales/en.json'
 
+import type { EnhanceAppContext, Theme } from 'vitepress/client'
+import type { Component } from 'vue'
+import type { Awaitable } from 'vitepress'
+
+import 'tailwindcss/tailwind.css'
+import './style.css'
+
 export { useSidebar } from './composables/useSidebar'
 export { useOpenapi } from './composables/useOpenapi'
 export { useTheme } from './composables/useTheme'
+export { useShiki } from './composables/useShiki'
 
 interface VPTheme {
   Layout: Component
@@ -37,6 +42,8 @@ export const theme = {
       // @ts-expect-error: no index signature
       app.component(key, components[key])
     }
+
+    useShiki().initShiki();
   },
 } as VPTheme