Support accessing the Shiki code highlighter instance

[larsrickert]

Is your feature request related to a problem? Please describe

I am building a documentation website using Nuxt content and have a custom Vue component from my design system / UI library for displaying code tabs / code snippets. This works fine for things like ProsePre that already include code syntax highlighting.

However, I now want to build a custom Vue component in my application for displaying the typical "npm install" code tabs for common package managers (pnpm, npm, yarn and bun), see the screenshot below. Since I am using a custom Vue component, I don't have any syntax highlighting for the code and there seems to be currently no way to access the Shiki highlighter instance that @nuxt/content uses internally for e.g. ProsePre.

Describe the solution you'd like

I'd be awesome if @nuxt/content would provide a way to access the Shiki highlighter instance that is also used internally and that uses the highlight config so it can be used in a unified way.

Example usage:

// MyComponent.vue
<script lang="ts" setup>
import { useHighlighter } from "@nuxt/content";

const { highlighter } = useHighlighter();

const code = 'pnpm add sit-onyx @sit-onyx/icons' // input code
const html = await highlighter.codeToHtml(code);
</script>

<template>
  <pre v-html="code"></pre>
</template>

Additional context

Here is some code extracted from my custom "NpmInstallCodeTabs.vue" component (see screenshot):

const tabs = computed(() => {
  const command = `${props.dev ? "-D " : ""}${props.packages}`;

  return [
    { value: "pnpm", icon: pnpmIcon, code: `pnpm add ${command}`, language: "sh" },
    { value: "npm", icon: npmIcon, code: `npm install ${command}`, language: "sh" },
    { value: "yarn", icon: yarnIcon, code: `yarn add ${command}`, language: "sh" },
    { value: "bun", icon: bunIcon, code: `bun add ${command}`, language: "sh" },
  ] satisfies Tab[];
});

[farnabaz]

Hey
Nuxt Content is designed in a way to avoid including markdown parser in client bundle. In you case you can use nuxt-shiki. nuxt-shiki is designed to highlight code on runtime.