try nuxt-shiki for command blocks

app/components/global/Pm-x.vue

@@ -17,21 +17,26 @@ onMounted(() => {
  useSyncedPackageManager(codeBlocks, toRef(codeGroup.value, 'selectedIndex'))
  }
 })
+
+const themes = {
+ dark: 'min-dark',
+ light: 'min-light',
+}
 </script>
 
 <template>
  <CodeGroup ref="codeGroup">
  <ProseCode v-bind="codeBlocks[0]">
- <pre><code>{{ codeBlocks[0].code }}</code></pre>
+ <Shiki :code="codeBlocks[0].code" lang="sh" :themes="themes" as="span" />
  </ProseCode>
  <ProseCode v-bind="codeBlocks[1]">
- <pre><code>{{ codeBlocks[1].code }}</code></pre>
+ <Shiki :code="codeBlocks[0].code" lang="sh" :themes="themes" as="span" />
  </ProseCode>
  <ProseCode v-bind="codeBlocks[2]">
- <pre><code>{{ codeBlocks[2].code }}</code></pre>
+ <Shiki :code="codeBlocks[0].code" lang="sh" :themes="themes" as="span" />
  </ProseCode>
  <ProseCode v-bind="codeBlocks[3]">
- <pre><code>{{ codeBlocks[3].code }}</code></pre>
+ <Shiki :code="codeBlocks[0].code" lang="sh" :themes="themes" as="span" />
  </ProseCode>
  </CodeGroup>
 </template>

app/nuxt.config.ts

@@ -13,6 +13,7 @@ const isPrepare = Boolean(process.env.NUXT_DOCS_PREPARE)
 export default defineNuxtConfig({
  ssr,
  modules: [
+ 'nuxt-shiki',
  '@nuxt/content',
  '@nuxtjs/fontaine',
  !isPrepare && '@nuxtjs/google-fonts',
@@ -59,6 +60,10 @@ export default defineNuxtConfig({
  langs: ['json5', 'jsonc', 'toml', 'yaml', 'html', 'sh', 'shell', 'bash', 'mdc', 'markdown', 'md'],
  },
  },
+ shiki: {
+ langs: ['json5', 'jsonc', 'toml', 'yaml', 'html', 'sh', 'shell', 'bash', 'mdc', 'markdown', 'md'],
+ themes: ['min-dark', 'min-light'],
+ },
  routeRules: {
  '/api/search.json': { prerender: true },
  },

package.json

@@ -48,6 +48,7 @@
  "nuxi": "^3.10.1",
  "nuxt": "^3.10.3",
  "nuxt-build-cache": "^0.1.1",
+ "nuxt-shiki": "^0.1.2",
  "pkg-types": "^1.0.3",
  "scule": "^1.3.0",
  "tailwindcss": "^3.4.1",