chore: upgrade @nuxtjs/mdc

docs/components/content/CodeGroup.vue

@@ -0,0 +1,113 @@
+<script lang="ts">
+import TabsHeader from '@nuxt-themes/elements/components/globals/TabsHeader.vue'
+
+const isTag = (slot: any, tag: string) => {
+  return slot.type && slot.type.tag && slot.type.tag === tag
+}
+
+export default defineComponent({
+  data () {
+    return {
+      activeTabIndex: 0,
+      /**
+       * A simple number that increases on every changes
+       */
+      counter: 0
+    }
+  },
+  render () {
+    const slots = this.$slots?.default?.() || []
+    const tabs = slots
+      .map((slot, index) => {
+        return {
+          label: slot?.props?.filename || slot?.props?.label || `${index}`,
+          active: slot?.props?.active || false,
+          component: slot
+        }
+      })
+
+    return h(
+      'div',
+      {
+        class: {
+          'code-group': true,
+          'first-tab': this.activeTabIndex === 0
+        }
+      },
+      [
+        h(TabsHeader, {
+          ref: 'tabs-header',
+          activeTabIndex: this.activeTabIndex,
+          tabs,
+          'onUpdate:activeTabIndex': $event => (this.activeTabIndex = $event)
+        }),
+        h(
+          'div',
+          {
+            class: 'code-group-content',
+            text: this.activeTabIndex
+          },
+          // Map slots to content children
+          slots.map((slot, index) =>
+            h(
+              'div',
+              {
+                // Current slot is displayed, others are hidden
+                style: {
+                  display: index === this.activeTabIndex ? 'block' : 'none',
+                  padding: isTag(slot, 'pre') ? '1rem' : '0'
+                },
+                class: {
+                  '': !isTag(slot, 'pre')
+                }
+              },
+              // Display direct children if not a ```code``` block
+              [
+                isTag(slot, 'code') || isTag(slot, 'pre')
+                  ? slot
+                  : h(
+                    'div',
+                    {
+                      class: {
+                        'preview-canvas': true
+                      }
+                    },
+                    [(slot.children as any)?.default?.() || slot.children]
+                  )
+              ]
+            )
+          )
+        )
+      ]
+    )
+  }
+})
+</script>
+
+<style scoped lang="ts">
+css({
+  '.code-group': {
+    border: '1px solid {elements.border.secondary.static}',
+    borderRadius: '{radii.md}',
+    overflow: 'hidden',
+    ':deep(.prose-code)': {
+      margin: 0,
+      border: 'none',
+      borderRadius: 0,
+    },
+    ':deep(.filename)': {
+      display: 'none'
+    },
+    '.preview-canvas': {
+      padding: '{space.4}',
+      '&:has(.sandbox)': {
+        padding: 0,
+        ':deep(.sandbox)': {
+          border: 0,
+          borderRadius: 0
+        }
+      }
+    }
+  }
+})
+</style>

docs/components/content/Playground.vue

@@ -1,6 +1,5 @@
-<script setup>
-import { transformContent } from '@nuxt/content/transformers'
-import { ref, useAsyncData, shallowRef, computed, onMounted, watch, useRoute } from '#imports'
+<script setup lang="ts">
+import { ref, shallowRef, onMounted, useRoute } from '#imports'
 
 const INITIAL_CODE = `---
 title: MDC
@@ -18,7 +17,7 @@ This syntax supercharges regular Markdown to write documents interacting deeply
 - [Explore the MDC syntax](/guide/writing/mdc)
 
 ::code-group
-  \`\`\`markdown [Source]
+  \`\`\`mdc [Source]
   ::alert{type="success"}
     Hooray!
   ::
@@ -36,26 +35,13 @@ const route = useRoute()
 
 const content = ref(route.query.content || INITIAL_CODE)
 
-const { data: doc, refresh } = await useAsyncData('playground-' + content.value, async () => {
-  try {
-    const parsed = await transformContent('content:index.md', content.value)
-    return parsed
-  } catch (e) {
-    return doc.value
-  }
-})
-
 const tab = ref(0)
 
 const tabs = ref([{ label: 'Preview' }, { label: 'AST' }])
 
 const astEditorComponent = shallowRef()
 
-const docJSON = computed(() => {
-  return JSON.stringify(doc.value, null, 2)
-})
-
-const updateTab = async (index) => {
+const updateTab = async (index: number) => {
   tab.value = index
   if (tab.value === 1 && !astEditorComponent.value) {
     const { default: component } = await import('~/editor/Editor.vue')
@@ -66,13 +52,28 @@ const updateTab = async (index) => {
 
 const editorComponent = shallowRef()
 
+const mdcOptions = shallowRef({})
 onMounted(async () => {
   const { default: component } = await import('~/editor/Editor.vue')
 
   editorComponent.value = component
-})
 
-watch(content, refresh)
+  // @ts-ignore
+  const { useShikiHighlighter } = await import('@nuxtjs/mdc/runtime')
+  const shikiHighlighter = useShikiHighlighter({})
+  mdcOptions.value = {
+    highlight: {
+      highlighter: (code: string, lang: string, theme: any, highlights: any) => {
+        return shikiHighlighter.getHighlightedAST(code, lang, theme, { highlights })
+      },
+      theme: {
+        light: 'material-theme-lighter',
+        default: 'material-theme',
+        dark: 'material-theme-palenight'
+      }
+    }
+  }
+})
 </script>
 
 <template>
@@ -91,33 +92,30 @@ watch(content, refresh)
           </Alert>
         </div>
       </div>
-      <div>
-        <ContentRenderer v-if="tab === 0" :key="doc.updatedAt" class="content" :value="doc">
-          <template #empty>
-            <div class="p-8">
-              <Alert type="warning">
-                <p class="font-semibold">
-                  Content is empty!
-                </p>
-                <br><br>
-                <p>
-                  Type any
-                  <span class="font-semibold">Markdown</span> or
-                  <span class="font-semibold">MDC code</span>
-                  in editor to see it replaced by rendered nodes in this panel.
-                </p>
-              </Alert>
-            </div>
-          </template>
-        </ContentRenderer>
+      <MDC v-slot="{ data, body }" :value="content" :parser-options="mdcOptions">
+        <div v-if="body?.children?.length == 0" class="p-8">
+          <Alert type="warning">
+            <p class="font-semibold">
+              Content is empty!
+            </p>
+            <br><br>
+            <p>
+              Type any
+              <span class="font-semibold">Markdown</span> or
+              <span class="font-semibold">MDC code</span>
+              in editor to see it replaced by rendered nodes in this panel.
+            </p>
+          </Alert>
+        </div>
+        <MDCRenderer v-if="tab === 0" :key="data?.updatedAt" class="content" :body="body" :data="data" />
         <component
           :is="astEditorComponent"
           v-else-if="astEditorComponent"
           language="json"
           read-only
-          :model-value="docJSON"
+          :model-value="JSON.stringify(body, null, 2)"
         />
-      </div>
+      </MDC>
     </div>
   </div>
 </template>

docs/content-v1/en/1.getting-started/3.writing.md

@@ -575,7 +575,7 @@ Rows will be assigned to body variable.
 
 A file `content/home.csv`:
 
-```csv
+```
 title, description
 Home, Welcome!
 ```
@@ -605,7 +605,7 @@ XML will be parsed
 
 A file `content/home.xml`:
 
-```xml
+```html
 <xml>
   <item prop="abc">
     <title>Title</title>

docs/content-v1/fr/1.getting-started/3.writing.md

@@ -413,7 +413,7 @@ Les lignes seront assignée à la variable `body`.
 
 Un fichier `content/accueil.csv`:
 
-```csv
+```
 titre, description
 Accueil, Bienvenue!
 ```

docs/content-v1/ja/1.getting-started/3.writing.md

@@ -437,7 +437,7 @@ title: Home
 
 `content/home.csv`ファイル
 
-```csv
+```
 title, description
 Home, Welcome!
 ```
@@ -467,7 +467,7 @@ XMLも解析できます。
 
 `content/home.xml`ファイル
 
-```xml
+```html
 <xml>
   <item prop="abc">
     <title>Title</title>

docs/content-v1/ru/1.getting-started/3.writing.md

@@ -474,7 +474,7 @@ title: Главная
 
 Файл `content/home.csv`:
 
-```csv
+```
 title, description
 Главная, Добро пожаловать!
 ```
@@ -504,7 +504,7 @@ title, description
 
 Файл `content/home.xml`:
 
-```xml
+```html
 <xml>
   <item prop="abc">
     <title>Заголовок</title>

docs/content/3.guide/1.writing/6.csv.md

@@ -9,7 +9,7 @@ The `body` of the output is an array containing every row as objects.
 ## Example
 
 ::code-group
-```csv [content/hello.csv]
+``` [content/hello.csv]
 title,description,category
 Hello Content v2!,The writing experience for Nuxt 3,announcement
 ```

docs/content/3.guide/2.displaying/2.querying.md

@@ -152,7 +152,7 @@ The API root path `/api/_content/query` accepts query parameters such as:
 # Hello Content v2!
 ```
 
-```text [Endpoint]
+``` [Endpoint]
 /api/_content/query?path=/hello
 ```
 

docs/content/4.api/2.composables/2.fetch-content-navigation.md

@@ -5,7 +5,7 @@ The `fetchContentNavigation` utility returns a tree of items based on the `conte
 ## Usage
 
 ::code-group
-```Text [Directory structure]
+``` [Directory structure]
 content/
   index.md
   sub-folder