diff --git a/.github/workflows/publish-commit.yml b/.github/workflows/publish-commit.yml
index 7b95cb5d..aac48f3e 100644
--- a/.github/workflows/publish-commit.yml
+++ b/.github/workflows/publish-commit.yml
@@ -12,7 +12,7 @@ on:
     types: [submitted]
 
 jobs:
-  build:
+  publish:
     runs-on: ubuntu-latest
 
     steps:
diff --git a/.github/workflows/run-test.yml b/.github/workflows/run-test.yml
new file mode 100644
index 00000000..9e78d8bc
--- /dev/null
+++ b/.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/action-setup@v4.0.0
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Run test
+        run: pnpm test:run
diff --git a/docs/layouts/all-operations.md b/docs/layouts/all-operations.md
index 7636fe94..8340bc8c 100644
--- a/docs/layouts/all-operations.md
+++ b/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
diff --git a/docs/layouts/custom-slots.md b/docs/layouts/custom-slots.md
index 09b0c9cf..4a16c9af 100644
--- a/docs/layouts/custom-slots.md
+++ b/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
diff --git a/package.json b/package.json
index db0ea3df..f21d0bce 100644
--- a/package.json
+++ b/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": "pnpm@9.1.1",
   "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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aa47fd3f..e80c06c2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -75,9 +75,9 @@ importers:
       scule:
         specifier: ^1.3.0
         version: 1.3.0
-      shikiji:
-        specifier: 0.10.2
-        version: 0.10.2
+      shiki:
+        specifier: ^1.16.1
+        version: 1.16.1
       tailwindcss:
         specifier: ^3.4.10
         version: 3.4.10
@@ -552,9 +552,15 @@ packages:
   '@shikijs/core@1.15.2':
     resolution: {integrity: sha512-hi6XZuwHYn6bU4wtXZxST8ynM55aiU2+rVU9aPIrSxqKmEKl4d65puwGsggwcZWTET+7zGXKe7AUj46iQ8Aq8w==}
 
+  '@shikijs/core@1.16.1':
+    resolution: {integrity: sha512-aI0hBtw+a6KsJp2jcD4YuQqKpeCbURMZbhHVozDknJpm+KJqeMRkEnfBC8BaKE/5XC+uofPgCLsa/TkTk0Ba0w==}
+
   '@shikijs/transformers@1.15.2':
     resolution: {integrity: sha512-J+3kFFXb4hN3esMzdDBGb2GhBsMPX8UC3o/U9G4Jognb8k0ADQAzZkShTARwS76O0g2VFoMu4vnIchiVE6x/uw==}
 
+  '@shikijs/vscode-textmate@9.2.0':
+    resolution: {integrity: sha512-5FinaOp6Vdh/dl4/yaOTh0ZeKch+rYS8DUb38V3GMKYVkdqzxw53lViRKUYkVILRiVQT7dcPC7VvAKOR73zVtQ==}
+
   '@sindresorhus/slugify@2.2.1':
     resolution: {integrity: sha512-MkngSCRZ8JdSOCHRaYd+D01XhvU3Hjy6MGl06zhOk614hp9EOAp5gIkBeQg7wtmxpitU6eAL4kdiRMcJa2dlrw==}
     engines: {node: '>=12'}
@@ -1648,11 +1654,8 @@ packages:
   shiki@1.15.2:
     resolution: {integrity: sha512-M+7QZQZiZw/cZeizrC/yryG3eeG8pTUhu7ZaHxVyzPNFIRIlN46YBciquoNPCiXiwLnx6JB62f3lSuSYQrus1w==}
 
-  shikiji-core@0.10.2:
-    resolution: {integrity: sha512-9Of8HMlF96usXJHmCL3Gd0Fcf0EcyJUF9m8EoAKKd98mHXi0La2AZl1h6PegSFGtiYcBDK/fLuKbDa1l16r1fA==}
-
-  shikiji@0.10.2:
-    resolution: {integrity: sha512-wtZg3T0vtYV2PnqusWQs3mDaJBdCPWxFDrBM/SE5LfrX92gjUvfEMlc+vJnoKY6Z/S44OWaCRzNIsdBRWcTAiw==}
+  shiki@1.16.1:
+    resolution: {integrity: sha512-tCJIMaxDVB1mEIJ5TvfZU7kCPB5eo9fli5+21Olc/bmyv+w8kye3JOp+LZRmGkAyT71hrkefQhTiY+o9mBikRQ==}
 
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
@@ -2378,10 +2381,17 @@ snapshots:
     dependencies:
       '@types/hast': 3.0.4
 
+  '@shikijs/core@1.16.1':
+    dependencies:
+      '@shikijs/vscode-textmate': 9.2.0
+      '@types/hast': 3.0.4
+
   '@shikijs/transformers@1.15.2':
     dependencies:
       shiki: 1.15.2
 
+  '@shikijs/vscode-textmate@9.2.0': {}
+
   '@sindresorhus/slugify@2.2.1':
     dependencies:
       '@sindresorhus/transliterate': 1.6.0
@@ -3536,11 +3546,11 @@ snapshots:
       '@shikijs/core': 1.15.2
       '@types/hast': 3.0.4
 
-  shikiji-core@0.10.2: {}
-
-  shikiji@0.10.2:
+  shiki@1.16.1:
     dependencies:
-      shikiji-core: 0.10.2
+      '@shikijs/core': 1.16.1
+      '@shikijs/vscode-textmate': 9.2.0
+      '@types/hast': 3.0.4
 
   siginfo@2.0.0: {}
 
@@ -3745,7 +3755,7 @@ snapshots:
       focus-trap: 7.5.4
       mark.js: 8.11.1
       minisearch: 7.1.0
-      shiki: 1.15.2
+      shiki: 1.16.1
       vite: 5.4.2(@types/node@22.5.1)
       vue: 3.4.38(typescript@5.5.4)
     optionalDependencies:
diff --git a/src/components/Common/OACodeBlock.vue b/src/components/Common/OACodeBlock.vue
index 0f7ba5e6..9af9fbd2 100644
--- a/src/components/Common/OACodeBlock.vue
+++ b/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',
     })
diff --git a/src/composables/useShiki.ts b/src/composables/useShiki.ts
new file mode 100644
index 00000000..60fb3495
--- /dev/null
+++ b/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 };
+}
diff --git a/src/composables/useTheme.ts b/src/composables/useTheme.ts
index ec69d5c8..1b8230b3 100644
--- a/src/composables/useTheme.ts
+++ b/src/composables/useTheme.ts
@@ -1,4 +1,6 @@
 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')
 
@@ -6,6 +8,11 @@ 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,
diff --git a/src/index.ts b/src/index.ts
index 607ec293..61566324 100644
--- a/src/index.ts
+++ b/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