@sit-onyx/nuxt-docs 0.2.0-dev-20260114152822 → 0.2.0-dev-20260114161848

package/app/components/HighlightedCode.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  code: string;
+  language: string;
+}>();
+
+const snippet = computed(() => {
+  return `
+\`\`\`${props.language}
+${props.code}
+\`\`\`
+`;
+});
+
+const { data: ast } = await useAsyncData(snippet, () => parseMarkdown(snippet.value));
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <!--
+    We need to override the components here to force using the regular pre and code components.
+    This way, the renderer does not use the globally defined ProsePre and ProseCode components which have their own styling, features etc.
+     -->
+  <MDCRenderer
+    v-if="ast"
+    :body="ast.body"
+    :data="ast.data"
+    :components="{ pre: 'pre', code: 'code' }"
+  />
+</template>

package/app/components/PackageManagerCodeTabs.vue

@@ -4,6 +4,7 @@ import bunIcon from "~/assets/icons/bun.svg?raw";
 import npmIcon from "~/assets/icons/npm.svg?raw";
 import pnpmIcon from "~/assets/icons/pnpm.svg?raw";
 import yarnIcon from "~/assets/icons/yarn.svg?raw";
+import HighlightedCode from "./HighlightedCode.vue";
 
 type PackageManager = "pnpm" | "npm" | "yarn" | "bun";
 
@@ -29,20 +30,12 @@ const tabs = computed(() => {
 
   return tabs.filter((tab) => tab.code);
 });
-
-const getMDCValue = (code: string, language: string) => {
-  return `
-\`\`\`${language}
-${code}
-\`\`\`
-`;
-};
 </script>
 
 <template>
   <OnyxUnstableCodeTabs v-model="selectedTab">
     <OnyxUnstableCodeTab v-for="tab in tabs" v-bind="tab" :key="tab.value" :label="tab.value">
-      <MDC :value="getMDCValue(tab.code, tab.language)" />
+      <HighlightedCode :code="tab.code" :language="tab.language" />
     </OnyxUnstableCodeTab>
   </OnyxUnstableCodeTabs>
 </template>

package/app/components/content/ProseBr.global.vue

@@ -0,0 +1,13 @@
+<!--
+ Note: this component needs to marked as global so it is displayed correctly when building the app (since @nuxt/content does not include a ProseBr by default)
+-->
+<template>
+  <br aria-hidden="true" />
+</template>
+
+<style lang="scss" scoped>
+br {
+  display: block;
+  height: 1lh;
+}
+</style>

package/nuxt.config.ts

@@ -17,4 +17,11 @@ export default defineNuxtConfig({
     // Otherwise if we would e.g. add en here, the project would always be forced to register en, even if it does not plan to add en translations
     // which could conflict with e.g. "const { locales } = useI18n()" to render a language switch which would always include en then
   },
+  mdc: {
+    components: {
+      map: {
+        br: "ProseBr",
+      },
+    },
+  },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sit-onyx/nuxt-docs",
-  "version": "0.2.0-dev-20260114152822",
+  "version": "0.2.0-dev-20260114161848",
   "description": "Nuxt layer/template for creating documentations with the onyx design system",
   "type": "module",
   "author": "Schwarz IT KG",
@@ -31,9 +31,9 @@
     "@nuxtjs/mdc": ">= 0.17.2",
     "@nuxtjs/i18n": ">= 10",
     "sass-embedded": ">= 1",
-    "@sit-onyx/icons": "^1.4.0-dev-20260114152822",
+    "@sit-onyx/icons": "^1.4.0-dev-20260114161848",
     "@sit-onyx/nuxt": "^1.0.1",
-    "sit-onyx": "^1.6.0-dev-20260114152822"
+    "sit-onyx": "^1.6.0-dev-20260114161848"
   },
   "devDependencies": {
     "@fontsource-variable/source-code-pro": ">= 5",
@@ -49,10 +49,10 @@
     "sass-embedded": "1.97.2",
     "typescript": "5.9.3",
     "vue": "3.5.26",
-    "@sit-onyx/icons": "^1.4.0-dev-20260114152822",
+    "@sit-onyx/icons": "^1.4.0-dev-20260114161848",
     "@sit-onyx/nuxt": "^1.0.1",
     "@sit-onyx/shared": "^0.1.0",
-    "sit-onyx": "^1.6.0-dev-20260114152822"
+    "sit-onyx": "^1.6.0-dev-20260114161848"
   },
   "scripts": {
     "dev": "pnpm dev:prepare && nuxi dev playground",