feat: adopt to mdc v0.4 (#2539)

README.md

@@ -20,7 +20,7 @@ Nuxt Content reads the `content/` directory in your project, parses `.md`, `.yml
 - [**Nuxt 3**](https://nuxt.com) support
 - A Markdown syntax made for Vue components ([**MDC**](https://content.nuxt.com/usage/markdown))
 - Navigation generation
-- Code highlighting with [**Shikiji**](https://github.com/antfu/shikiji)
+- Code highlighting with [**Shiki**](https://github.com/shikijs/shiki)
 - Blazing fast hot module replacement in development
 - Powerful query builder (MongoDB like)
 - Table of contents generation

docs/content/1.get-started/2.configuration.md

@@ -174,7 +174,7 @@ Toggles the [document-driven mode](/document-driven/introduction).
 
 - Type: `false | object`
 
-Nuxt Content uses [Shikiji](https://github.com/antfu/shikiji) to provide syntax highlighting for [`ProsePre`](/components/prose#prosepre) and [`ProseCodeInline`](/components/prose#prosecodeinline).
+Nuxt Content uses [Shiki](https://github.com/shikijs/shiki) to provide syntax highlighting for [`ProsePre`](/components/prose#prosepre) and [`ProseCodeInline`](/components/prose#prosecodeinline).
 
 | Option    |                     Type                     | Description                                                                                                         |
 | --------- | :------------------------------------------: | :------------------------------------------------------------------------------------------------------------------ |
@@ -238,7 +238,7 @@ export default defineNuxtConfig({
   content: {
     highlight: {
       preload: [
-        // Read more about shikiji languages: https://github.com/antfu/shikiji#fine-grained-bundle
+        // Read more about Shiki languages: https://shiki.style/guide/load-lang
         JSON.parse(
           readFileSync('./shiki/languages/gdscript.tmLanguage.json', 'utf-8'),
         ),

docs/content/2.usage/2.markdown.md

@@ -73,7 +73,7 @@ Example variables will be injected into the document:
 
 ## Code Highlighting
 
-Nuxt Content uses [Shikiji](https://github.com/antfu/shikiji), that colors tokens with VSCode themes.
+Nuxt Content uses [Shiki](https://github.com/shikijs/shiki), that colors tokens with VSCode themes.
 
 Code highlighting works both on [`ProsePre`](/components/prose#prosepre) and [`ProseCodeInline`](/components/prose#prosecodeinline).
 

package.json

@@ -66,7 +66,7 @@
     "ohash": "^1.1.3",
     "pathe": "^1.1.2",
     "scule": "^1.2.0",
-    "shikiji": "^0.10.2",
+    "shiki": "^1.0.0-beta.5",
     "slugify": "^1.6.6",
     "socket.io-client": "^4.7.4",
     "ufo": "^1.3.2",

playground/basic/content/2.features/3.mdc-highlighter.md

@@ -1,4 +1,4 @@
-```md
+```mdc
 ---
 title: title
 array:

playground/basic/nuxt.config.ts

@@ -15,7 +15,11 @@ export default defineNuxtConfig({
     ignores: [
       '\\.bak$',
       'ignored/folder'
-    ]
+    ],
+
+    highlight: {
+      langs: ['json', 'js', 'ts', 'html', 'css', 'vue', 'shell', 'mdc', 'md', 'yaml']
+    }
   },
   typescript: {
     includeWorkspace: true

playground/shared/nuxt.config.ts

@@ -37,7 +37,7 @@ export default defineNuxtConfig({
     },
     highlight: {
       theme: 'material-theme-palenight',
-      preload: ['json', 'js', 'ts', 'html', 'css', 'vue']
+      langs: ['json', 'js', 'ts', 'html', 'css', 'vue', 'shell', 'mdc', 'md', 'yaml']
     }
   }
 })

src/module.ts

@@ -18,7 +18,7 @@ import { listen } from 'listhen'
 import { type Options as MiniSearchOptions } from 'minisearch'
 import { hash } from 'ohash'
 import { join, relative } from 'pathe'
-import type { BuiltinLanguage as ShikiLang, BuiltinTheme as ShikiTheme } from 'shikiji'
+import type { BuiltinLanguage as ShikiLang, BuiltinTheme as ShikiTheme, LanguageRegistration, ThemeRegistrationAny } from 'shiki'
 import { joinURL, withLeadingSlash, withTrailingSlash } from 'ufo'
 import { createStorage, type WatchEvent } from 'unstorage'
 import { name, version } from '../package.json'
@@ -162,10 +162,29 @@ export interface ModuleOptions {
       default: ShikiTheme
       [theme: string]: ShikiTheme
     },
+
     /**
      * Preloaded languages that will be available for highlighting code blocks.
+     *
+     * @deprecated Use `langs` instead
+     */
+    preload?: (ShikiLang | LanguageRegistration)[],
+
+    /**
+     * Languages to be bundled loaded by Shiki
+     *
+     * All languages used has to be included in this list at build time, to create granular bundles.
+     *
+     * Unlike the `preload` option, when this option is provided, it will override the default languages.
+     *
+     * @default ['js','ts','vue','css','html','vue','shell']
+     */
+    langs?: (ShikiLang | LanguageRegistration)[]
+
+    /**
+     * Additional themes to be bundled loaded by Shiki
      */
-    preload?: ShikiLang[]
+    themes?: (ShikiTheme | ThemeRegistrationAny)[]
   },
   /**
    * Options for yaml parser.
@@ -754,7 +773,7 @@ export default defineNuxtModule<ModuleOptions>({
       hightlight: options.highlight
     })
 
-    // Process markdown plugins, resovle paths
+    // Process markdown plugins, resolve paths
     contentContext.markdown = processMarkdownOptions(contentContext.markdown)
 
     const nuxtMDCOptions = {

src/runtime/transformers/markdown.ts

@@ -16,8 +16,18 @@ export default defineTransformer({
     config.rehypePlugins = await importPlugins(config.rehypePlugins)
     config.remarkPlugins = await importPlugins(config.remarkPlugins)
 
+    const highlightOptions = options.highlight
+      ? {
+          ...options.highlight,
+          // Pass only when it's an function. String values are handled by `@nuxtjs/mdc`
+          highlighter: typeof options.highlight?.highlighter === 'function'
+            ? options.highlight.highlighter
+            : undefined
+        }
+      : undefined
+
     const parsed = await parseMarkdown(content as string, {
-      highlight: options.highlight,
+      highlight: highlightOptions,
       remark: {
         plugins: config.remarkPlugins
       },
@@ -32,7 +42,7 @@ export default defineTransformer({
       toc: config.toc
     })
 
-    return <MarkdownParsedContent> {
+    return <MarkdownParsedContent>{
       ...parsed.data,
       excerpt: parsed.excerpt,
       body: {