Merge branch 'vuejs:main' into doc-zh

2 years ago · 1442afc4fa
parent cb271de10b 9c20e3b5f8
commit 1442afc4fa
40 changed files with 1178 additions and 1111 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,44 @@
+# [1.0.0-rc.33](https://github.com/vuejs/vitepress/compare/v1.0.0-rc.32...v1.0.0-rc.33) (2023-12-26)
+
+### Features
+
+- allow explicitly mark code element as `.vp-copy-ignore` ([#3360](https://github.com/vuejs/vitepress/issues/3360)) ([93122ee](https://github.com/vuejs/vitepress/commit/93122eee20cb6586026c1ffac04d9787861cc2f3))
+- **build:** enable VUE_PROD_HYDRATION_MISMATCH_DETAILS when DEBUG is truthy ([f4d4280](https://github.com/vuejs/vitepress/commit/f4d4280d7d1728a966bb04968a9bac10470c3d06)), closes [#422](https://github.com/vuejs/vitepress/issues/422)
+
+### Performance Improvements
+
+- implement concurrent promise pooling for render task ([#3366](https://github.com/vuejs/vitepress/issues/3366))
+
+# [1.0.0-rc.32](https://github.com/vuejs/vitepress/compare/v1.0.0-rc.31...v1.0.0-rc.32) (2023-12-16)
+
+### Features
+
+- allow ignoring node in header ([#3331](https://github.com/vuejs/vitepress/issues/3331)) ([e4bf1e4](https://github.com/vuejs/vitepress/commit/e4bf1e48e6a1592d583b218425c1fa7497955dc5))
+- expose `shikijiSetup` hook ([#3344](https://github.com/vuejs/vitepress/issues/3344)) ([d12e23d](https://github.com/vuejs/vitepress/commit/d12e23ddf69480418078ff39846c99ecf2e1eb1b))
+- update shikiji, support twoslash ([#3339](https://github.com/vuejs/vitepress/issues/3339)) ([8800195](https://github.com/vuejs/vitepress/commit/880019545795fd075be89d94794bfbd05af461b5))
+
+# [1.0.0-rc.31](https://github.com/vuejs/vitepress/compare/v1.0.0-rc.30...v1.0.0-rc.31) (2023-11-25)
+
+### Bug Fixes
+
+- **build:** make assets go through vite pipeline during dev too ([#3258](https://github.com/vuejs/vitepress/issues/3258)) ([c3d7f22](https://github.com/vuejs/vitepress/commit/c3d7f22bd313b09e6965ac3125ea662ce283ed2d))
+- **theme:** use VPLink for links in VPDocFooter ([#3248](https://github.com/vuejs/vitepress/issues/3248)) ([479a320](https://github.com/vuejs/vitepress/commit/479a320731313b8e7e0bad3f8383ae6bc05ed8e2))
+
+# [1.0.0-rc.30](https://github.com/vuejs/vitepress/compare/v1.0.0-rc.29...v1.0.0-rc.30) (2023-11-23)
+
+### Bug Fixes
+
+- **client:** no onAfterRouteChanged called after popstate ([#3227](https://github.com/vuejs/vitepress/issues/3227)) ([60fc8fd](https://github.com/vuejs/vitepress/commit/60fc8fd24460eede1dc73768ad0aa53616da746f)), closes [#3226](https://github.com/vuejs/vitepress/issues/3226)
+- **theme:** remove double padding from sidebar ([ef6d8d1](https://github.com/vuejs/vitepress/commit/ef6d8d1e4295c6ff967c17b5b9c20c04843da5a0)), closes [#3228](https://github.com/vuejs/vitepress/issues/3228)
+
+### Features
+
+- migrate to shikiji ([#3237](https://github.com/vuejs/vitepress/pull/3237)) ([75f18e4](https://github.com/vuejs/vitepress/commit/75f18e47334933b642d14b8b69b372cb1ebd4244))
+
+### BREAKING CHANGES
+
+- VitePress now uses shikiji instead of shiki for syntax highlighting. If you're using features like adding extra languages or custom aliases, please refer [shikiji docs](https://github.com/antfu/shikiji) for migration guide or comment on [#3237](https://github.com/vuejs/vitepress/pull/3237) if you need help.
+
 # [1.0.0-rc.29](https://github.com/vuejs/vitepress/compare/v1.0.0-rc.28...v1.0.0-rc.29) (2023-11-19)

 ### Bug Fixes
--- a/tests/e2e/markdown-extensions/markdown-extensions.test.ts
+++ b/tests/e2e/markdown-extensions/markdown-extensions.test.ts
@ -163,19 +163,19 @@ describe('Line Numbers', () => {
 describe('Import Code Snippets', () => {
  test('basic', async () => {
    const lines = page.locator('#basic-code-snippet + div code > span')
-    expect(await lines.count()).toBe(22)
+    expect(await lines.count()).toBe(11)
  })

  test('specify region', async () => {
    const lines = page.locator('#specify-region + div code > span')
-    expect(await lines.count()).toBe(6)
+    expect(await lines.count()).toBe(3)
  })

  test('with other features', async () => {
    const div = page.locator('#with-other-features + div')
    expect(await getClassList(div)).toContain('line-numbers-mode')
    const lines = div.locator('code > span')
-    expect(await lines.count()).toBe(6)
+    expect(await lines.count()).toBe(3)
    expect(await getClassList(lines.nth(0))).toContain('highlighted')
  })
 })
@ -216,10 +216,10 @@ describe('Code Groups', () => {

    // blocks
    const blocks = div.locator('.blocks > div')
-    expect(await blocks.nth(0).locator('code > span').count()).toBe(22)
+    expect(await blocks.nth(0).locator('code > span').count()).toBe(11)
    expect(await getClassList(blocks.nth(1))).toContain('line-numbers-mode')
    expect(await getClassList(blocks.nth(1))).toContain('language-ts')
-    expect(await blocks.nth(1).locator('code > span').count()).toBe(6)
+    expect(await blocks.nth(1).locator('code > span').count()).toBe(3)
    expect(
      await getClassList(blocks.nth(1).locator('code > span').nth(0))
    ).toContain('highlighted')
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@ -9,7 +9,15 @@ export default defineConfig({
  cleanUrls: true,

  markdown: {
-    math: true
+    math: true,
+    codeTransformers: [
+      // We use `[!!code` in demo to prevent transformation, here we revert it back.
+      {
+        postprocess(code) {
+          return code.replace(/\[\!\!code/g, '[!code')
+        }
+      }
+    ]
  },

  sitemap: {
--- a/docs/.vitepress/theme/AdComponent.vue
+++ b/docs/.vitepress/theme/AdComponent.vue
@ -1,43 +0,0 @@
-<script setup>
-import icon from './documate.vue'
-</script>
-
-<template>
-  <div class="ad-component">
-    <a target="_blank" href="https://github.com/aircodelabs/documate">
-      <icon class="icon"/>
-      <span>Embed AI chat in your VitePress using your own content. Open-source.</span>
-      <span class="cta">Try now →</span>
-    </a>
-  </div>
-</template>
-
-<style scoped>
-.ad-component {
-  margin-bottom: 2rem;
-  padding: .5rem .85rem;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 4px;
-  text-decoration: none;
-  color: var(--vp-c-text-2);
-  transition: color 0.4s ease-in-out;
-  font-size: 0.8rem;
-}
-
-.ad-component:hover {
-  color: var(--vp-c-text-1);
-}
-
-.ad-component .icon {
-  display: inline-block;
-  width: .75rem;
-  height: .75rem;
-  margin-right: 0.3rem;
-}
-
-.ad-component .cta {
-  margin-left: 0.3rem;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-</style>
--- a/docs/.vitepress/theme/documate.vue
+++ b/docs/.vitepress/theme/documate.vue
@ -1,5 +0,0 @@
-<template>
-  <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.79938 23.5375C3.57959 23.516 3.36074 23.4856 3.14338 23.4465C2.98375 23.4179 2.83446 23.3477 2.71056 23.243C2.58666 23.1384 2.49252 23.0029 2.43762 22.8503C2.38272 22.6977 2.36899 22.5334 2.39782 22.3738C2.42665 22.2142 2.49702 22.065 2.60185 21.9412C3.10678 21.346 3.45159 20.6318 3.60369 19.8662C3.632 19.7246 3.57661 19.476 3.29108 19.1978C1.26031 17.2225 0 14.5431 0 11.5769C0 5.38615 5.44985 0.5 12 0.5C18.5502 0.5 24 5.38615 24 11.5769C24 17.7677 18.5502 22.6538 12 22.6538C10.9748 22.6538 9.97785 22.5345 9.02523 22.3105C7.46812 23.289 5.62931 23.7208 3.79938 23.5375ZM12.7957 18.2748C12.7504 18.3232 12.6907 18.3474 12.6165 18.3474C12.5423 18.3474 12.4805 18.3232 12.431 18.2748C12.3857 18.2305 12.3569 18.1721 12.3445 18.0995C12.258 17.4628 12.1632 16.9288 12.0602 16.4976C11.9571 16.0664 11.8212 15.7158 11.6522 15.4457C11.4832 15.1717 11.2587 14.9541 10.9784 14.7929C10.7023 14.6317 10.3459 14.5028 9.90907 14.4061C9.47225 14.3053 8.93448 14.2146 8.29574 14.134C8.21745 14.1259 8.15357 14.0977 8.10412 14.0494C8.05468 14.001 8.02995 13.9406 8.02995 13.868C8.02995 13.7955 8.05468 13.7351 8.10412 13.6867C8.15357 13.6383 8.21745 13.6101 8.29574 13.602C8.9386 13.5335 9.47844 13.4549 9.91525 13.3663C10.3521 13.2736 10.7106 13.1447 10.9908 12.9794C11.271 12.8142 11.4956 12.5925 11.6646 12.3145C11.8376 12.0364 11.9736 11.6798 12.0725 11.2445C12.1756 10.8093 12.2662 10.2713 12.3445 9.63052C12.3569 9.56201 12.3857 9.50559 12.431 9.46126C12.4805 9.4129 12.5423 9.38872 12.6165 9.38872C12.6907 9.38872 12.7504 9.4129 12.7957 9.46126C12.8452 9.50559 12.8761 9.56201 12.8885 9.63052C12.9709 10.2713 13.0615 10.8093 13.1604 11.2445C13.2635 11.6798 13.3994 12.0364 13.5684 12.3145C13.7374 12.5925 13.962 12.8142 14.2422 12.9794C14.5224 13.1447 14.8809 13.2736 15.3178 13.3663C15.7586 13.4549 16.2985 13.5335 16.9372 13.602C17.0155 13.6101 17.0773 13.6383 17.1226 13.6867C17.1721 13.7351 17.1968 13.7955 17.1968 13.868C17.1968 13.9406 17.1721 14.001 17.1226 14.0494C17.0773 14.0977 17.0155 14.1259 16.9372 14.134C16.2985 14.2025 15.7586 14.2831 15.3178 14.3758C14.8809 14.4645 14.5224 14.5914 14.2422 14.7567C13.962 14.9219 13.7374 15.1435 13.5684 15.4216C13.3994 15.6997 13.2635 16.0563 13.1604 16.4915C13.0615 16.9268 12.9709 17.4628 12.8885 18.0995C12.8761 18.1721 12.8452 18.2305 12.7957 18.2748ZM8.77789 11.9578C8.74492 11.9901 8.70371 12.0062 8.65425 12.0062C8.54711 12.0062 8.4853 11.9498 8.46882 11.8369C8.42349 11.4541 8.37404 11.1559 8.32047 10.9423C8.2669 10.7247 8.18448 10.5614 8.07322 10.4526C7.96195 10.3438 7.79094 10.2612 7.56017 10.2048C7.33351 10.1484 7.02239 10.0859 6.62679 10.0174C6.50316 10.0013 6.44135 9.94284 6.44135 9.84209C6.44135 9.74538 6.49492 9.68694 6.60206 9.66679C7.00591 9.59425 7.32115 9.52977 7.5478 9.47335C7.77857 9.4129 7.95164 9.33029 8.06703 9.2255C8.18242 9.1167 8.2669 8.95549 8.32047 8.74191C8.37404 8.52832 8.42349 8.23212 8.46882 7.8533C8.4853 7.74046 8.54711 7.68404 8.65425 7.68404C8.7614 7.68404 8.82116 7.73845 8.83352 7.84725C8.88708 8.23413 8.94066 8.53839 8.99423 8.76004C9.0478 8.97766 9.13022 9.14289 9.24149 9.25573C9.35686 9.36454 9.52788 9.44716 9.75454 9.50358C9.9853 9.55596 10.3026 9.61037 10.7065 9.66679C10.7518 9.67485 10.7889 9.695 10.8177 9.72724C10.8507 9.75545 10.8672 9.79373 10.8672 9.84209C10.8672 9.94284 10.8136 10.0013 10.7065 10.0174C10.3026 10.094 9.98736 10.1625 9.76072 10.2229C9.53406 10.2834 9.36305 10.368 9.24767 10.4768C9.13228 10.5816 9.0478 10.7408 8.99423 10.9544C8.94066 11.1639 8.88708 11.4601 8.83352 11.843C8.82939 11.8873 8.81085 11.9256 8.77789 11.9578ZM11.6213 7.98024C11.6048 8.05278 11.5636 8.08905 11.4977 8.08905C11.4235 8.08905 11.3823 8.05278 11.374 7.98024C11.3163 7.67799 11.2628 7.45635 11.2133 7.3153C11.168 7.17022 11.0712 7.06746 10.9228 7.007C10.7786 6.94655 10.5354 6.88812 10.1934 6.8317C10.1192 6.81558 10.0821 6.77528 10.0821 6.7108C10.0821 6.63826 10.1192 6.59796 10.1934 6.5899C10.5354 6.52945 10.7786 6.47102 10.9228 6.4146C11.0712 6.35415 11.168 6.2534 11.2133 6.11235C11.2628 5.96727 11.3163 5.74159 11.374 5.43531C11.3823 5.36277 11.4235 5.3265 11.4977 5.3265C11.5636 5.3265 11.6048 5.36277 11.6213 5.43531C11.6749 5.74159 11.7264 5.96727 11.7758 6.11235C11.8253 6.2534 11.9221 6.35415 12.0663 6.4146C12.2106 6.47102 12.4537 6.52945 12.7957 6.5899C12.8699 6.59796 12.907 6.63826 12.907 6.7108C12.907 6.77528 12.8699 6.81558 12.7957 6.8317C12.4537 6.88812 12.2106 6.94655 12.0663 7.007C11.9221 7.06746 11.8253 7.17022 11.7758 7.3153C11.7264 7.45635 11.6749 7.67799 11.6213 7.98024Z" />
-</svg>
-</template>
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@ -1,13 +0,0 @@
-// .vitepress/theme/index.js
-import { h } from 'vue'
-import DefaultTheme from 'vitepress/theme'
-import AdComponent from './AdComponent.vue'
-
-export default {
-  ...DefaultTheme,
-  Layout() {
-    return h(DefaultTheme.Layout, null, {
-      'doc-before': () => h(AdComponent)
-    })
-  }
-}
--- a/docs/guide/extending-default-theme.md
+++ b/docs/guide/extending-default-theme.md
@ -116,7 +116,7 @@ import DefaultTheme from 'vitepress/theme'

 export default {
  extends: DefaultTheme,
-  async enhanceApp({ app }) {
+  enhanceApp({ app }) {
    // register your custom global components
    app.component('MyGlobalComponent' /* ... */)
  }
--- a/docs/guide/getting-started.md
+++ b/docs/guide/getting-started.md
@ -68,7 +68,7 @@ $ npx vitepress init
 ```

 ```sh [pnpm]
-$ pnpm dlx vitepress init
+$ pnpm vitepress init
 ```

 ```sh [bun]
--- a/docs/guide/markdown.md
+++ b/docs/guide/markdown.md
@ -80,7 +80,7 @@ For more details, see [Frontmatter](../reference/frontmatter-config).

 **Input**

-```
+```md
 | Tables        |      Are      |  Cool |
 | ------------- | :-----------: | ----: |
 | col 3 is      | right-aligned | $1600 |
@ -108,7 +108,7 @@ For more details, see [Frontmatter](../reference/frontmatter-config).

 :tada: :100:

-A [list of all emojis](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.json) is available.
+A [list of all emojis](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.mjs) is available.

 ## Table of Contents

@ -265,7 +265,7 @@ Wraps in a <div class="vp-raw">

 ## Syntax Highlighting in Code Blocks

-VitePress uses [Shiki](https://shiki.matsu.io/) to highlight language syntax in Markdown code blocks, using coloured text. Shiki supports a wide variety of programming languages. All you need to do is append a valid language alias to the beginning backticks for the code block:
+VitePress uses [Shikiji](https://github.com/antfu/shikiji) (an improved version of [Shiki](https://shiki.matsu.io/)) to highlight language syntax in Markdown code blocks, using coloured text. Shiki supports a wide variety of programming languages. All you need to do is append a valid language alias to the beginning backticks for the code block:

 **Input**

@ -305,7 +305,7 @@ export default {
 </ul>
 ```

-A [list of valid languages](https://github.com/shikijs/shiki/blob/main/docs/languages.md) is available on Shiki's repository.
+A [list of valid languages](https://github.com/antfu/shikiji/blob/main/docs/languages.md) is available on Shikiji's repository.

 You may also customize syntax highlight theme in app config. Please see [`markdown` options](../reference/site-config#markdown) for more details.

@ -377,7 +377,7 @@ export default { // Highlighted
 }
 ```

-Alternatively, it's possible to highlight directly in the line by using the `// [!code hl]` comment.
+Alternatively, it's possible to highlight directly in the line by using the `// [!code hightlight]` comment.

 **Input**

@ -386,7 +386,7 @@ Alternatively, it's possible to highlight directly in the line by using the `//
 export default {
  data () {
    return {
-      msg: 'Highlighted!' // [!code  hl]
+      msg: 'Highlighted!' // [!!code highlight]
    }
  }
 }
@ -399,7 +399,7 @@ export default {
 export default {
  data() {
    return {
-      msg: 'Highlighted!' // [!code hl]
+      msg: 'Highlighted!' // [!code highlight]
    }
  }
 }
@ -413,14 +413,12 @@ Additionally, you can define a number of lines to focus using `// [!code focus:<

 **Input**

-Note that only one space is required after `!code`, here are two to prevent processing.
-
 ````
 ```js
 export default {
  data () {
    return {
-      msg: 'Focused!' // [!code  focus]
+      msg: 'Focused!' // [!!code focus]
    }
  }
 }
@ -445,15 +443,13 @@ Adding the `// [!code --]` or `// [!code ++]` comments on a line will create a d

 **Input**

-Note that only one space is required after `!code`, here are two to prevent processing.
-
 ````
 ```js
 export default {
  data () {
    return {
-      msg: 'Removed' // [!code  --]
-      msg: 'Added' // [!code  ++]
+      msg: 'Removed' // [!!code --]
+      msg: 'Added' // [!!code ++]
    }
  }
 }
@ -479,15 +475,13 @@ Adding the `// [!code warning]` or `// [!code error]` comments on a line will co

 **Input**

-Note that only one space is required after `!code`, here are two to prevent processing.
-
 ````
 ```js
 export default {
  data () {
    return {
-      msg: 'Error', // [!code  error]
-      msg: 'Warning' // [!code  warning]
+      msg: 'Error', // [!!code error]
+      msg: 'Warning' // [!!code warning]
    }
  }
 }
@ -858,10 +852,11 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
 VitePress uses [markdown-it](https://github.com/markdown-it/markdown-it) as the Markdown renderer. A lot of the extensions above are implemented via custom plugins. You can further customize the `markdown-it` instance using the `markdown` option in `.vitepress/config.js`:

 ```js
+import { defineConfig } from 'vitepress'
 import markdownItAnchor from 'markdown-it-anchor'
 import markdownItFoo from 'markdown-it-foo'

-module.exports = {
+export default defineConfig({
  markdown: {
    // options for markdown-it-anchor
    // https://github.com/valeriangalliat/markdown-it-anchor#usage
@ -878,7 +873,7 @@ module.exports = {
      md.use(markdownItFoo)
    }
  }
-}
+})
 ```

 See full list of configurable properties in [Config Reference: App Config](../reference/site-config#markdown).
--- a/docs/guide/ssr-compat.md
+++ b/docs/guide/ssr-compat.md
@ -58,7 +58,7 @@ export default {
  async enhanceApp({ app }) {
    if (!import.meta.env.SSR) {
      const plugin = await import('plugin-that-access-window-on-import')
-      app.use(plugin)
+      app.use(plugin.default)
    }
  }
 }
@ -74,7 +74,7 @@ export default {
  async enhanceApp({ app }) {
    if (!import.meta.env.SSR) {
      const plugin = await import('plugin-that-access-window-on-import')
-      app.use(plugin)
+      app.use(plugin.default)
    }
  }
 } satisfies Theme
--- a/docs/reference/default-theme-home-page.md
+++ b/docs/reference/default-theme-home-page.md
@ -131,7 +131,7 @@ interface Feature {
  // Link when clicked on feature component. The link can
  // be both internal or external.
  //
-  // e.g. `guid/reference/default-theme-home-page` or `htttps://example.com`
+  // e.g. `guide/reference/default-theme-home-page` or `https://example.com`
  link?: string

  // Link text to be shown inside feature component. Best
--- a/docs/reference/default-theme-team-page.md
+++ b/docs/reference/default-theme-team-page.md
@ -212,6 +212,9 @@ interface TeamMember {

  // URL for the sponsor page for the member.
  sponsor?: string
+
+  // Text for the sponsor link. Defaults to 'Sponsor'.
+  actionText?: string
 }
 ```

--- a/docs/reference/site-config.md
+++ b/docs/reference/site-config.md
@ -454,7 +454,7 @@ When using the default theme, enabling this option will display each page's last

 - Type: `MarkdownOption`

-Configure Markdown parser options. VitePress uses [Markdown-it](https://github.com/markdown-it/markdown-it) as the parser, and [Shiki](https://shiki.matsu.io/) to highlight language syntax. Inside this option, you may pass various Markdown related options to fit your needs.
+Configure Markdown parser options. VitePress uses [Markdown-it](https://github.com/markdown-it/markdown-it) as the parser, and [Shikiji](https://github.com/antfu/shikiji) (an improved version of [Shiki](https://shiki.matsu.io/)) to highlight language syntax. Inside this option, you may pass various Markdown related options to fit your needs.

 ```js
 export default {
@ -462,87 +462,7 @@ export default {
 }
 ```

-Below are all the options that you can have in this object:
-
-```ts
-interface MarkdownOptions extends MarkdownIt.Options {
-  // Custom theme for syntax highlighting.
-  // You can use an existing theme.
-  // See: https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes
-  // Or add your own theme.
-  // See: https://github.com/shikijs/shiki/blob/main/docs/themes.md#loading-theme
-  theme?:
-    | Shiki.IThemeRegistration
-    | { light: Shiki.IThemeRegistration; dark: Shiki.IThemeRegistration }
-
-  // Enable line numbers in code block.
-  lineNumbers?: boolean
-
-  // Add support for your own languages.
-  // https://github.com/shikijs/shiki/blob/main/docs/languages.md#supporting-your-own-languages-with-shiki
-  languages?: Shiki.ILanguageRegistration[]
-
-  // markdown-it-anchor plugin options.
-  // See: https://github.com/valeriangalliat/markdown-it-anchor#usage
-  anchor?: anchorPlugin.AnchorOptions
-
-  // markdown-it-attrs plugin options.
-  // See: https://github.com/arve0/markdown-it-attrs
-  attrs?: {
-    leftDelimiter?: string
-    rightDelimiter?: string
-    allowedAttributes?: Array<string | RegExp>
-    disable?: boolean
-  }
-
-  // specify default language for syntax highlighter
-  defaultHighlightLang?: string
-
-  // @mdit-vue/plugin-frontmatter plugin options.
-  // See: https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-frontmatter#options
-  frontmatter?: FrontmatterPluginOptions
-
-  // @mdit-vue/plugin-headers plugin options.
-  // See: https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-headers#options
-  headers?: HeadersPluginOptions | boolean
-
-  // @mdit-vue/plugin-sfc plugin options.
-  // See: https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-sfc#options
-  sfc?: SfcPluginOptions
-
-  // @mdit-vue/plugin-toc plugin options.
-  // See: https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-toc#options
-  toc?: TocPluginOptions
-
-  // @mdit-vue/plugin-component plugin options.
-  // See: https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-component#options
-  component?: ComponentPluginOptions
-
-  // Configure the Markdown-it instance.
-  config?: (md: MarkdownIt) => void
-
-  // Same as `config` but will be applied before all other plugins.
-  preConfig?: (md: MarkdownIt) => void
-
-  // Disable cache (experimental)
-  cache?: boolean
-
-  // Math support (experimental)
-  // You need to install `markdown-it-mathjax3` and set `math` to `true` to enable it.
-  // You can also pass options to `markdown-it-mathjax3` here.
-  // See: https://github.com/tani/markdown-it-mathjax3#customization
-  math?: boolean | any
-
-  // Global custom container titles
-  container?: {
-    infoLabel?: string
-    tipLabel?: string
-    warningLabel?: string
-    dangerLabel?: string
-    detailsLabel?: string
-  }
-}
-```
+Check the [type declaration and jsdocs](https://github.com/vuejs/vitepress/blob/main/src/node/markdown/markdown.ts) for all the options available.

 ### vite

--- a/package.json
+++ b/package.json
@ -1,9 +1,9 @@
 {
  "name": "vitepress",
-  "version": "1.0.0-rc.29",
+  "version": "1.0.0-rc.33",
  "description": "Vite & Vue powered static site generator",
  "type": "module",
-  "packageManager": "pnpm@8.10.5",
+  "packageManager": "pnpm@8.12.1",
  "main": "dist/node/index.js",
  "types": "types/index.d.ts",
  "exports": {
@ -92,22 +92,23 @@
  "dependencies": {
    "@docsearch/css": "^3.5.2",
    "@docsearch/js": "^3.5.2",
-    "@types/markdown-it": "^13.0.6",
-    "@vitejs/plugin-vue": "^4.5.0",
+    "@types/markdown-it": "^13.0.7",
+    "@vitejs/plugin-vue": "^5.0.0",
    "@vue/devtools-api": "^6.5.1",
-    "@vueuse/core": "^10.6.1",
-    "@vueuse/integrations": "^10.6.1",
+    "@vueuse/core": "^10.7.0",
+    "@vueuse/integrations": "^10.7.0",
    "focus-trap": "^7.5.4",
    "mark.js": "8.11.1",
-    "minisearch": "^6.2.0",
-    "mrmime": "^1.0.1",
-    "shiki": "^0.14.5",
-    "vite": "^5.0.0",
-    "vue": "^3.3.8"
+    "minisearch": "^6.3.0",
+    "mrmime": "^2.0.0",
+    "shikiji": "^0.9.12",
+    "shikiji-transformers": "^0.9.12",
+    "vite": "^5.0.10",
+    "vue": "^3.4.0-rc.2"
  },
  "peerDependencies": {
    "markdown-it-mathjax3": "^4.3.2",
-    "postcss": "^8.4.31"
+    "postcss": "^8.4.32"
  },
  "peerDependenciesMeta": {
    "markdown-it-mathjax3": {
@ -119,82 +120,83 @@
  },
  "devDependencies": {
    "@clack/prompts": "^0.7.0",
-    "@mdit-vue/plugin-component": "^1.0.0",
-    "@mdit-vue/plugin-frontmatter": "^1.0.0",
-    "@mdit-vue/plugin-headers": "^1.0.0",
-    "@mdit-vue/plugin-sfc": "^1.0.0",
-    "@mdit-vue/plugin-title": "^1.0.0",
-    "@mdit-vue/plugin-toc": "^1.0.0",
-    "@mdit-vue/shared": "^1.0.0",
-    "@rollup/plugin-alias": "^5.0.1",
+    "@mdit-vue/plugin-component": "^2.0.0",
+    "@mdit-vue/plugin-frontmatter": "^2.0.0",
+    "@mdit-vue/plugin-headers": "^2.0.0",
+    "@mdit-vue/plugin-sfc": "^2.0.0",
+    "@mdit-vue/plugin-title": "^2.0.0",
+    "@mdit-vue/plugin-toc": "^2.0.0",
+    "@mdit-vue/shared": "^2.0.0",
+    "@rollup/plugin-alias": "^5.1.0",
    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-json": "^6.0.1",
+    "@rollup/plugin-json": "^6.1.0",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@rollup/plugin-replace": "^5.0.5",
    "@types/compression": "^1.7.5",
-    "@types/cross-spawn": "^6.0.5",
+    "@types/cross-spawn": "^6.0.6",
    "@types/debug": "^4.1.12",
    "@types/escape-html": "^1.0.4",
    "@types/fs-extra": "^11.0.4",
    "@types/lodash.template": "^4.5.3",
-    "@types/mark.js": "^8.11.11",
+    "@types/mark.js": "^8.11.12",
    "@types/markdown-it-attrs": "^4.1.3",
    "@types/markdown-it-container": "^2.0.9",
    "@types/markdown-it-emoji": "^2.0.4",
-    "@types/micromatch": "^4.0.5",
+    "@types/micromatch": "^4.0.6",
    "@types/minimist": "^1.2.5",
-    "@types/node": "^20.9.1",
+    "@types/node": "^20.10.5",
    "@types/postcss-prefix-selector": "^1.16.3",
-    "@types/prompts": "^2.4.8",
-    "@vue/shared": "^3.3.8",
+    "@types/prompts": "^2.4.9",
+    "@vue/shared": "^3.3.13",
    "chokidar": "^3.5.3",
    "compression": "^1.7.4",
    "conventional-changelog-cli": "^4.1.0",
    "cross-spawn": "^7.0.3",
    "debug": "^4.3.4",
-    "esbuild": "^0.19.5",
+    "esbuild": "^0.19.10",
    "escape-html": "^1.0.3",
    "execa": "^8.0.1",
    "fast-glob": "^3.3.2",
-    "fs-extra": "^11.1.1",
+    "fs-extra": "^11.2.0",
    "get-port": "^7.0.0",
    "gray-matter": "^4.0.3",
-    "lint-staged": "^15.1.0",
+    "lint-staged": "^15.2.0",
    "lodash.template": "^4.5.0",
-    "lru-cache": "^10.0.2",
-    "markdown-it": "^13.0.2",
+    "lru-cache": "^10.1.0",
+    "markdown-it": "^14.0.0",
    "markdown-it-anchor": "^8.6.7",
    "markdown-it-attrs": "^4.1.6",
-    "markdown-it-container": "^3.0.0",
-    "markdown-it-emoji": "^2.0.2",
+    "markdown-it-container": "^4.0.0",
+    "markdown-it-emoji": "^3.0.0",
    "markdown-it-mathjax3": "^4.3.2",
    "micromatch": "^4.0.5",
    "minimist": "^1.2.8",
-    "nanoid": "^5.0.3",
+    "nanoid": "^5.0.4",
    "npm-run-all": "^4.1.5",
-    "ora": "^7.0.1",
+    "ora": "^8.0.1",
+    "p-map": "^7.0.0",
    "path-to-regexp": "^6.2.1",
    "picocolors": "^1.0.0",
    "pkg-dir": "^8.0.0",
-    "playwright-chromium": "^1.40.0",
+    "playwright-chromium": "^1.40.1",
    "polka": "1.0.0-next.23",
    "postcss-prefix-selector": "^1.16.0",
-    "prettier": "^3.1.0",
+    "prettier": "^3.1.1",
    "prompts": "^2.4.2",
    "punycode": "^2.3.1",
    "rimraf": "^5.0.5",
-    "rollup": "^4.5.0",
+    "rollup": "^4.9.1",
    "rollup-plugin-dts": "^6.1.0",
    "rollup-plugin-esbuild": "^6.1.0",
    "semver": "^7.5.4",
-    "shiki-processor": "^0.1.3",
+    "shikiji-core": "^0.9.12",
    "simple-git-hooks": "^2.9.0",
-    "sirv": "^2.0.3",
+    "sirv": "^2.0.4",
    "sitemap": "^7.1.1",
    "supports-color": "^9.4.0",
-    "typescript": "^5.2.2",
-    "vitest": "^1.0.0-beta.4",
-    "vue-tsc": "^1.8.22",
+    "typescript": "^5.3.3",
+    "vitest": "^1.1.0",
+    "vue-tsc": "^1.8.26",
    "wait-on": "^7.2.0"
  },
  "simple-git-hooks": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/client/app/components/Content.ts
+++ b/src/client/app/components/Content.ts
@ -20,7 +20,8 @@ export const Content = defineComponent({
          route.component
            ? h(route.component, {
                onVnodeMounted: runCbs,
-                onVnodeUpdated: runCbs
+                onVnodeUpdated: runCbs,
+                onVnodeUnmounted: runCbs
              })
            : '404 Page Not Found'
        ]
--- a/src/client/app/composables/copyCode.ts
+++ b/src/client/app/composables/copyCode.ts
@ -16,12 +16,15 @@ export function useCopyCode() {
          parent.className
        )

-        let text = ''
+        const ignoredNodes = ['.vp-copy-ignore', '.diff.remove']

-        sibling
-          .querySelectorAll('span.line:not(.diff.remove)')
-          .forEach((node) => (text += (node.textContent || '') + '\n'))
-        text = text.slice(0, -1)
+        // Clone the node and remove the ignored nodes
+        const clone = sibling.cloneNode(true) as HTMLElement
+        clone
+          .querySelectorAll(ignoredNodes.join(','))
+          .forEach((node) => node.remove())
+
+        let text = clone.textContent || ''

        if (isShell) {
          text = text.replace(/^ *(\$|>) /gm, '').trim()
--- a/src/client/app/router.ts
+++ b/src/client/app/router.ts
@ -222,11 +222,12 @@ export function createRouter(
      { capture: true }
    )

-    window.addEventListener('popstate', (e) => {
-      loadPage(
+    window.addEventListener('popstate', async (e) => {
+      await loadPage(
        normalizeHref(location.href),
        (e.state && e.state.scrollPosition) || 0
      )
+      router.onAfterRouteChanged?.(location.href)
    })

    window.addEventListener('hashchange', (e) => {
--- a/src/client/theme-default/components/VPAlgoliaSearchBox.vue
+++ b/src/client/theme-default/components/VPAlgoliaSearchBox.vue
@ -42,7 +42,11 @@ async function update() {
 }

 function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
-  const options = Object.assign<{}, {}, DocSearchProps>({}, userOptions, {
+  const options = Object.assign<
+    {},
+    DefaultTheme.AlgoliaSearchOptions,
+    Partial<DocSearchProps>
+  >({}, userOptions, {
    container: '#docsearch',

    navigator: {
@ -69,7 +73,6 @@ function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
      })
    },

-    // @ts-expect-error vue-tsc thinks this should return Vue JSX but it returns the required React one
    hitComponent({ hit, children }) {
      return {
        __v: null,
@ -80,7 +83,7 @@ function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
        props: { href: hit.url, children }
      }
    }
-  })
+  }) as DocSearchProps

  docsearch(options)
 }
--- a/src/client/theme-default/components/VPDocFooter.vue
+++ b/src/client/theme-default/components/VPDocFooter.vue
@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useData } from '../composables/data'
-import { normalizeLink } from '../support/utils'
 import { useEditLink } from '../composables/edit-link'
 import { usePrevNext } from '../composables/prev-next'
 import VPIconEdit from './icons/VPIconEdit.vue'
@ -43,16 +42,16 @@ const showFooter = computed(() => {

    <nav v-if="control.prev?.link || control.next?.link" class="prev-next">
      <div class="pager">
-        <a v-if="control.prev?.link" class="pager-link prev" :href="normalizeLink(control.prev.link)">
+        <VPLink v-if="control.prev?.link" class="pager-link prev" :href="control.prev.link">
          <span class="desc" v-html="theme.docFooter?.prev || 'Previous page'"></span>
          <span class="title" v-html="control.prev.text"></span>
-        </a>
+        </VPLink>
      </div>
      <div class="pager">
-        <a v-if="control.next?.link" class="pager-link next" :href="normalizeLink(control.next.link)">
+        <VPLink v-if="control.next?.link" class="pager-link next" :href="control.next.link">
          <span class="desc" v-html="theme.docFooter?.next || 'Next page'"></span>
          <span class="title" v-html="control.next.text"></span>
-        </a>
+        </VPLink>
      </div>
    </nav>
  </footer>
--- a/src/client/theme-default/components/VPLocalSearchBox.vue
+++ b/src/client/theme-default/components/VPLocalSearchBox.vue
@ -4,7 +4,6 @@ import {
  computedAsync,
  debouncedWatch,
  onKeyStroke,
-  reactify,
  useEventListener,
  useLocalStorage,
  useScrollLock,
@ -23,7 +22,6 @@ import {
  onMounted,
  ref,
  shallowRef,
-  toRef,
  watch,
  watchEffect,
  type Ref
@ -32,7 +30,7 @@ import type { ModalTranslations } from '../../../../types/local-search'
 import { pathToFile } from '../../app/utils'
 import { useData } from '../composables/data'
 import { LRUCache } from '../support/lru'
-import { createTranslate } from '../support/translation'
+import { createSearchTranslate } from '../support/translation'

 const emit = defineEmits<{
  (e: 'close'): void
@ -361,10 +359,7 @@ const defaultTranslations: { modal: ModalTranslations } = {
  }
 }

-const $t = reactify(createTranslate)(
-  toRef(() => theme.value.search?.options),
-  defaultTranslations
-)
+const $t = createSearchTranslate(defaultTranslations)

 // Back

--- a/src/client/theme-default/components/VPNavBarSearchButton.vue
+++ b/src/client/theme-default/components/VPNavBarSearchButton.vue
@ -1,11 +1,6 @@
 <script lang="ts" setup>
-import { reactify } from '@vueuse/core'
-import { toRef } from 'vue'
 import type { ButtonTranslations } from '../../../../types/local-search'
-import { useData } from '../composables/data'
-import { createTranslate } from '../support/translation'
-
-const { theme } = useData()
+import { createSearchTranslate } from '../support/translation'

 // Button-Translations
 const defaultTranslations: { button: ButtonTranslations } = {
@ -15,10 +10,7 @@ const defaultTranslations: { button: ButtonTranslations } = {
  }
 }

-const $t = reactify(createTranslate)(
-  toRef(() => theme.value.search?.options),
-  defaultTranslations
-)
+const $t = createSearchTranslate(defaultTranslations)
 </script>

 <template>
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@ -89,7 +89,6 @@ watch(
  .VPSidebar {
    z-index: 1;
    padding-top: var(--vp-nav-height);
-    padding-bottom: 128px;
    width: var(--vp-sidebar-width);
    max-width: 100%;
    background-color: var(--vp-sidebar-bg-color);
--- a/src/client/theme-default/components/VPTeamMembersItem.vue
+++ b/src/client/theme-default/components/VPTeamMembersItem.vue
@ -47,7 +47,7 @@ withDefaults(defineProps<Props>(), {
    </div>
    <div v-if="member.sponsor" class="sp">
      <VPLink class="sp-link" :href="member.sponsor" no-icon>
-        <VPIconHeart class="sp-icon" /> Sponsor
+        <VPIconHeart class="sp-icon" /> {{ member.actionText || 'Sponsor' }}
      </VPLink>
    </div>
  </article>
--- a/src/client/theme-default/composables/outline.ts
+++ b/src/client/theme-default/composables/outline.ts
@ -44,7 +44,8 @@ function serializeHeader(h: Element): string {
    if (node.nodeType === 1) {
      if (
        (node as Element).classList.contains('VPBadge') ||
-        (node as Element).classList.contains('header-anchor')
+        (node as Element).classList.contains('header-anchor') ||
+        (node as Element).classList.contains('ignore-header')
      ) {
        continue
      }
--- a/src/client/theme-default/styles/components/vp-code.css
+++ b/src/client/theme-default/styles/components/vp-code.css
@ -1,7 +1,7 @@
-.dark .vp-code-light {
-  display: none;
+.dark .vp-code span {
+  color: var(--shiki-dark, inherit);
 }

-html:not(.dark) .vp-code-dark {
-  display: none;
+html:not(.dark) .vp-code span {
+  color: var(--shiki-light, inherit);
 }
--- a/src/client/theme-default/styles/components/vp-sponsor.css
+++ b/src/client/theme-default/styles/components/vp-sponsor.css
@ -1,6 +1,6 @@
 /**
 * VPSponsors styles are defined as global because a new class gets
- * allied in onMounted` hook and we can't use socped style.
+ * allied in onMounted` hook and we can't use scoped style.
 */
 .vp-sponsor {
  border-radius: 16px;
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@ -23,7 +23,7 @@
 *
 * Each colors have exact same color scale system with 3 levels of solid
 * colors with different brightness, and 1 soft color.
- * 
+ *
 * - `XXX-1`: The most solid color used mainly for colored text. It must
 *   satisfy the contrast ratio against when used on top of `XXX-soft`.
 *
@ -110,7 +110,7 @@
 * - `bg-elv`: The elevated bg color. This is used at parts where it "floats",
 *   such as "dialog".
 *
- * - `bg-soft`: The bg color to slightly ditinguish some components from
+ * - `bg-soft`: The bg color to slightly distinguish some components from
 *   the page. Used for things like "carbon ads" or "table".
 * -------------------------------------------------------------------------- */

@ -179,7 +179,7 @@
 * Colors: Function
 *
 * - `default`: The color used purely for subtle indication without any
- *   special meanings attched to it such as bg color for menu hover state.
+ *   special meanings attached to it such as bg color for menu hover state.
 *
 * - `brand`: Used for primary brand colors, such as link text, button with
 *   brand theme, etc.
--- a/src/client/theme-default/support/translation.ts
+++ b/src/client/theme-default/support/translation.ts
@ -3,14 +3,14 @@ import { useData } from '../composables/data'
 /**
 * @param themeObject Can be an object with `translations` and `locales` properties
 */
-export function createTranslate(
-  themeObject: any,
+export function createSearchTranslate(
  defaultTranslations: Record<string, any>
 ): (key: string) => string {
-  const { localeIndex } = useData()
+  const { localeIndex, theme } = useData()

  function translate(key: string): string {
    const keyPath = key.split('.')
+    const themeObject = theme.value.search?.options

    const isObject = themeObject && typeof themeObject === 'object'
    const locales =
--- a/src/node/build/build.ts
+++ b/src/node/build/build.ts
@ -1,12 +1,14 @@
 import { createHash } from 'crypto'
 import fs from 'fs-extra'
 import { createRequire } from 'module'
+import pMap from 'p-map'
 import path from 'path'
 import { packageDirectorySync } from 'pkg-dir'
 import { rimraf } from 'rimraf'
 import { pathToFileURL } from 'url'
 import type { BuildOptions, Rollup } from 'vite'
 import { resolveConfig, type SiteConfig } from '../config'
+import { clearCache } from '../markdownToVue'
 import { slash, type HeadConfig } from '../shared'
 import { deserializeFunctions, serializeFunctions } from '../utils/fnSerialize'
 import { task } from '../utils/task'
@ -106,23 +108,23 @@ export async function build(
        }
      }

-      await Promise.all(
-        ['404.md', ...siteConfig.pages]
-          .map((page) => siteConfig.rewrites.map[page] || page)
-          .map((page) =>
-            renderPage(
-              render,
-              siteConfig,
-              page,
-              clientResult,
-              appChunk,
-              cssChunk,
-              assets,
-              pageToHashMap,
-              metadataScript,
-              additionalHeadTags
-            )
+      await pMap(
+        ['404.md', ...siteConfig.pages],
+        async (page) => {
+          await renderPage(
+            render,
+            siteConfig,
+            siteConfig.rewrites.map[page] || page,
+            clientResult,
+            appChunk,
+            cssChunk,
+            assets,
+            pageToHashMap,
+            metadataScript,
+            additionalHeadTags
          )
+        },
+        { concurrency: siteConfig.buildConcurrency }
      )
    })

@ -139,6 +141,7 @@ export async function build(

  await generateSitemap(siteConfig)
  await siteConfig.buildEnd?.(siteConfig)
+  clearCache()

  siteConfig.logger.info(
    `build complete in ${((Date.now() - start) / 1000).toFixed(2)}s.`
--- a/src/node/config.ts
+++ b/src/node/config.ts
@ -141,7 +141,8 @@ export async function resolveConfig(
    transformPageData: userConfig.transformPageData,
    rewrites,
    userConfig,
-    sitemap: userConfig.sitemap
+    sitemap: userConfig.sitemap,
+    buildConcurrency: userConfig.buildConcurrency ?? 64
  }

  // to be shared with content loaders
--- a/src/node/markdown/markdown.ts
+++ b/src/node/markdown/markdown.ts
@ -17,8 +17,8 @@ import { slugify } from '@mdit-vue/shared'
 import MarkdownIt from 'markdown-it'
 import anchorPlugin from 'markdown-it-anchor'
 import attrsPlugin from 'markdown-it-attrs'
-import emojiPlugin from 'markdown-it-emoji'
-import type { ILanguageRegistration, IThemeRegistration } from 'shiki'
+// @ts-ignore
+import { full as emojiPlugin } from 'markdown-it-emoji'
 import type { Logger } from 'vite'
 import { containerPlugin, type ContainerOptions } from './plugins/containers'
 import { highlight } from './plugins/highlight'
@ -28,36 +28,144 @@ import { lineNumberPlugin } from './plugins/lineNumbers'
 import { linkPlugin } from './plugins/link'
 import { preWrapperPlugin } from './plugins/preWrapper'
 import { snippetPlugin } from './plugins/snippet'
+import type {
+  ThemeRegistration,
+  BuiltinTheme,
+  LanguageInput,
+  ShikijiTransformer,
+  Highlighter
+} from 'shikiji'

 export type { Header } from '../shared'

 export type ThemeOptions =
-  | IThemeRegistration
-  | { light: IThemeRegistration; dark: IThemeRegistration }
+  | ThemeRegistration
+  | BuiltinTheme
+  | {
+      light: ThemeRegistration | BuiltinTheme
+      dark: ThemeRegistration | BuiltinTheme
+    }

 export interface MarkdownOptions extends MarkdownIt.Options {
-  lineNumbers?: boolean
+  /* ==================== General Options ==================== */
+
+  /**
+   * Setup markdown-it instance before applying plugins
+   */
  preConfig?: (md: MarkdownIt) => void
+  /**
+   * Setup markdown-it instance
+   */
  config?: (md: MarkdownIt) => void
+  /**
+   * Disable cache (experimental)
+   */
+  cache?: boolean
+  externalLinks?: Record<string, string>
+
+  /* ==================== Syntax Highlighting ==================== */
+
+  /**
+   * Custom theme for syntax highlighting.
+   *
+   * You can also pass an object with `light` and `dark` themes to support dual themes.
+   *
+   * @example { theme: 'github-dark' }
+   * @example { theme: { light: 'github-light', dark: 'github-dark' } }
+   *
+   * You can use an existing theme.
+   * @see https://github.com/antfu/shikiji/blob/main/docs/themes.md#all-themes
+   * Or add your own theme.
+   * @see https://github.com/antfu/shikiji/blob/main/docs/themes.md#load-custom-themes
+   */
+  theme?: ThemeOptions
+  /**
+   * Languages for syntax highlighting.
+   * @see https://github.com/antfu/shikiji/blob/main/docs/languages.md#all-themes
+   */
+  languages?: LanguageInput[]
+  /**
+   * Custom language aliases.
+   *
+   * @example { 'my-lang': 'js' }
+   * @see https://github.com/antfu/shikiji/tree/main#custom-language-aliases
+   */
+  languageAlias?: Record<string, string>
+  /**
+   * Show line numbers in code blocks
+   * @default false
+   */
+  lineNumbers?: boolean
+  /**
+   * Fallback language when the specified language is not available.
+   */
+  defaultHighlightLang?: string
+  /**
+   * Transformers applied to code blocks
+   * @see https://github.com/antfu/shikiji#hast-transformers
+   */
+  codeTransformers?: ShikijiTransformer[]
+  /**
+   * Setup Shikiji instance
+   */
+  shikijiSetup?: (shikiji: Highlighter) => void | Promise<void>
+
+  /* ==================== Markdown It Plugins ==================== */
+
+  /**
+   * Options for `markdown-it-anchor`
+   * @see https://github.com/valeriangalliat/markdown-it-anchor
+   */
  anchor?: anchorPlugin.AnchorOptions
+  /**
+   * Options for `markdown-it-attrs`
+   * @see https://github.com/arve0/markdown-it-attrs
+   */
  attrs?: {
    leftDelimiter?: string
    rightDelimiter?: string
    allowedAttributes?: Array<string | RegExp>
    disable?: boolean
  }
-  defaultHighlightLang?: string
+  /**
+   * Options for `@mdit-vue/plugin-frontmatter`
+   * @see https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-frontmatter
+   */
  frontmatter?: FrontmatterPluginOptions
+  /**
+   * Options for `@mdit-vue/plugin-headers`
+   * @see https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-headers
+   */
  headers?: HeadersPluginOptions | boolean
+  /**
+   * Options for `@mdit-vue/plugin-sfc`
+   * @see https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-sfc
+   */
  sfc?: SfcPluginOptions
-  theme?: ThemeOptions
-  languages?: ILanguageRegistration[]
+  /**
+   * Options for `@mdit-vue/plugin-toc`
+   * @see https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-toc
+   */
  toc?: TocPluginOptions
-  externalLinks?: Record<string, string>
-  cache?: boolean
+  /**
+   * Options for `@mdit-vue/plugin-component`
+   * @see https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-component
+   */
  component?: ComponentPluginOptions
-  math?: boolean | any
+  /**
+   * Options for `markdown-it-container`
+   * @see https://github.com/markdown-it/markdown-it-container
+   */
  container?: ContainerOptions
+  /**
+   * Math support (experimental)
+   *
+   * You need to install `markdown-it-mathjax3` and set `math` to `true` to enable it.
+   * You can also pass options to `markdown-it-mathjax3` here.
+   * @default false
+   * @see https://vitepress.dev/guide/markdown#math-equations
+   */
+  math?: boolean | any
 }

 export type MarkdownRenderer = MarkdownIt
@ -74,14 +182,7 @@ export const createMarkdownRenderer = async (
  const md = MarkdownIt({
    html: true,
    linkify: true,
-    highlight:
-      options.highlight ||
-      (await highlight(
-        theme,
-        options.languages,
-        options.defaultHighlightLang,
-        logger
-      )),
+    highlight: options.highlight || (await highlight(theme, options, logger)),
    ...options
  })

--- a/src/node/markdown/plugins/highlight.ts
+++ b/src/node/markdown/plugins/highlight.ts
@ -1,23 +1,23 @@
 import { customAlphabet } from 'nanoid'
 import c from 'picocolors'
+import type { ShikijiTransformer } from 'shikiji'
 import {
-  BUNDLED_LANGUAGES,
-  type HtmlRendererOptions,
-  type ILanguageRegistration,
-  type IThemeRegistration
-} from 'shiki'
-import {
-  addClass,
-  createDiffProcessor,
-  createFocusProcessor,
-  createHighlightProcessor,
-  createRangeProcessor,
-  defineProcessor,
+  bundledLanguages,
  getHighlighter,
-  type Processor
-} from 'shiki-processor'
+  addClassToHast,
+  isPlaintext as isPlainLang,
+  isSpecialLang
+} from 'shikiji'
 import type { Logger } from 'vite'
-import type { ThemeOptions } from '../markdown'
+import type { MarkdownOptions, ThemeOptions } from '../markdown'
+import {
+  transformerCompactLineOptions,
+  transformerNotationDiff,
+  transformerNotationErrorLevel,
+  transformerNotationFocus,
+  transformerNotationHighlight,
+  type TransformerCompactLineOption
+} from 'shikiji-transformers'

 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 10)

@ -29,7 +29,7 @@ const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 10)
 * 2. convert line numbers into line options:
 *    [{ line: number, classes: string[] }]
 */
-const attrsToLines = (attrs: string): HtmlRendererOptions['lineOptions'] => {
+const attrsToLines = (attrs: string): TransformerCompactLineOption[] => {
  attrs = attrs.replace(/^(?:\[.*?\])?.*?([\d,-]+).*/, '$1').trim()
  const result: number[] = []
  if (!attrs) {
@ -53,39 +53,50 @@ const attrsToLines = (attrs: string): HtmlRendererOptions['lineOptions'] => {
  }))
 }

-const errorLevelProcessor = defineProcessor({
-  name: 'error-level',
-  handler: createRangeProcessor({
-    error: ['highlighted', 'error'],
-    warning: ['highlighted', 'warning']
-  })
-})
-
 export async function highlight(
  theme: ThemeOptions,
-  languages: ILanguageRegistration[] = [],
-  defaultLang: string = '',
+  options: MarkdownOptions,
  logger: Pick<Logger, 'warn'> = console
 ): Promise<(str: string, lang: string, attrs: string) => string> {
-  const hasSingleTheme = typeof theme === 'string' || 'name' in theme
-  const getThemeName = (themeValue: IThemeRegistration) =>
-    typeof themeValue === 'string' ? themeValue : themeValue.name
-
-  const processors: Processor[] = [
-    createFocusProcessor(),
-    createHighlightProcessor({ hasHighlightClass: 'highlighted' }),
-    createDiffProcessor(),
-    errorLevelProcessor
-  ]
+  const {
+    defaultHighlightLang: defaultLang = '',
+    codeTransformers: userTransformers = []
+  } = options

  const highlighter = await getHighlighter({
-    themes: hasSingleTheme ? [theme] : [theme.dark, theme.light],
-    langs: [...BUNDLED_LANGUAGES, ...languages],
-    processors
+    themes:
+      typeof theme === 'string' || 'name' in theme
+        ? [theme]
+        : [theme.light, theme.dark],
+    langs: [...Object.keys(bundledLanguages), ...(options.languages || [])],
+    langAlias: options.languageAlias
  })

-  const styleRE = /<pre[^>]*(style=".*?")/
-  const preRE = /^<pre(.*?)>/
+  await options?.shikijiSetup?.(highlighter)
+
+  const transformers: ShikijiTransformer[] = [
+    transformerNotationDiff(),
+    transformerNotationFocus({
+      classActiveLine: 'has-focus',
+      classActivePre: 'has-focused-lines'
+    }),
+    transformerNotationHighlight(),
+    transformerNotationErrorLevel(),
+    {
+      name: 'vitepress:add-class',
+      pre(node) {
+        addClassToHast(node, 'vp-code')
+      }
+    },
+    {
+      name: 'vitepress:clean-up',
+      pre(node) {
+        delete node.properties.tabindex
+        delete node.properties.style
+      }
+    }
+  ]
+
  const vueRE = /-vue$/
  const lineNoStartRE = /=(\d*)/
  const lineNoRE = /:(no-)?line-numbers(=\d*)?$/
@ -102,7 +113,7 @@ export async function highlight(

    if (lang) {
      const langLoaded = highlighter.getLoadedLanguages().includes(lang as any)
-      if (!langLoaded && !['ansi', 'plaintext', 'txt', 'text'].includes(lang)) {
+      if (!langLoaded && !isPlainLang(lang) && !isSpecialLang(lang)) {
        logger.warn(
          c.yellow(
            `\nThe language '${lang}' is not loaded, falling back to '${
@ -115,16 +126,6 @@ export async function highlight(
    }

    const lineOptions = attrsToLines(attrs)
-    const cleanup = (str: string) => {
-      return str
-        .replace(
-          preRE,
-          (_, attributes) =>
-            `<pre ${vPre}${attributes.replace(' tabindex="0"', '')}>`
-        )
-        .replace(styleRE, (_, style) => _.replace(style, ''))
-    }
-
    const mustaches = new Map<string, string>()

    const removeMustache = (s: string) => {
@ -155,24 +156,30 @@ export async function highlight(

    str = removeMustache(str).trimEnd()

-    const codeToHtml = (theme: IThemeRegistration) => {
-      const res =
-        lang === 'ansi'
-          ? highlighter.ansiToHtml(str, {
-              lineOptions,
-              theme: getThemeName(theme)
-            })
-          : highlighter.codeToHtml(str, {
-              lang,
-              lineOptions,
-              theme: getThemeName(theme)
-            })
-      return fillEmptyHighlightedLine(cleanup(restoreMustache(res)))
-    }
+    const highlighted = highlighter.codeToHtml(str, {
+      lang,
+      transformers: [
+        ...transformers,
+        transformerCompactLineOptions(lineOptions),
+        {
+          name: 'vitepress:v-pre',
+          pre(node) {
+            if (vPre) node.properties['v-pre'] = ''
+          }
+        },
+        ...userTransformers
+      ],
+      meta: {
+        __raw: attrs
+      },
+      ...(typeof theme === 'string' || 'name' in theme
+        ? { theme }
+        : {
+            themes: theme,
+            defaultColor: false
+          })
+    })

-    if (hasSingleTheme) return codeToHtml(theme)
-    const dark = addClass(codeToHtml(theme.dark), 'vp-code-dark', 'pre')
-    const light = addClass(codeToHtml(theme.light), 'vp-code-light', 'pre')
-    return dark + light
+    return fillEmptyHighlightedLine(restoreMustache(highlighted))
  }
 }
--- a/src/node/plugin.ts
+++ b/src/node/plugin.ts
@ -152,7 +152,8 @@ export async function createVitePressPlugin(
            site.themeConfig?.search?.provider === 'algolia' ||
            !!site.themeConfig?.algolia, // legacy
          __CARBON__: !!site.themeConfig?.carbonAds,
-          __ASSETS_DIR__: JSON.stringify(siteConfig.assetsDir)
+          __ASSETS_DIR__: JSON.stringify(siteConfig.assetsDir),
+          __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: !!process.env.DEBUG
        },
        optimizeDeps: {
          // force include vue to avoid duplicated copies when linked + optimized
--- a/src/node/plugins/dynamicRoutesPlugin.ts
+++ b/src/node/plugins/dynamicRoutesPlugin.ts
@ -119,7 +119,7 @@ export const dynamicRoutesPlugin = async (

        // inject raw content
        // this is intended for integration with CMS
-        // we use a speical injection syntax so the content is rendered as
+        // we use a special injection syntax so the content is rendered as
        // static local content instead of included as runtime data.
        if (content) {
          baseContent = baseContent.replace(/<!--\s*@content\s*-->/, content)
--- a/src/node/siteConfig.ts
+++ b/src/node/siteConfig.ts
@ -147,6 +147,15 @@ export interface UserConfig<ThemeConfig = any>
   */
  useWebFonts?: boolean

+  /**
+   * This option allows you to configure the concurrency of the build.
+   * A lower number will reduce the memory usage but will increase the build time.
+   *
+   * @experimental
+   * @default 64
+   */
+  buildConcurrency?: number
+
  /**
   * @experimental
   *
@ -240,4 +249,5 @@ export interface SiteConfig<ThemeConfig = any>
  }
  logger: Logger
  userConfig: UserConfig
+  buildConcurrency: number
 }
--- a/src/shared/shared.ts
+++ b/src/shared/shared.ts
@ -113,6 +113,10 @@ export function createTitle(siteData: SiteData, pageData: PageData): string {

  const templateString = createTitleTemplate(siteData.title, template)

+  if (title === templateString.slice(3)) {
+    return title
+  }
+
  return `${title}${templateString}`
 }

--- a/template/markdown-examples.md
+++ b/template/markdown-examples.md
@ -4,11 +4,11 @@ This page demonstrates some of the built-in markdown extensions provided by Vite

 ## Syntax Highlighting

-VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
+VitePress provides Syntax Highlighting powered by [Shikiji](https://github.com/antfu/shikiji), with additional features like line-highlighting:

 **Input**

-````
+````md
 ```js{4}
 export default {
  data () {
--- a/tsconfig.json
+++ b/tsconfig.json
@ -12,5 +12,12 @@
    "jsx": "preserve",
    "lib": ["esnext", "dom", "dom.iterable"]
  },
-  "exclude": ["**/node_modules/**", "**/dist/**", "template"]
+  "exclude": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "template",
+    "bin",
+    "docs/snippets",
+    "scripts"
+  ]
 }
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@ -345,6 +345,7 @@ export namespace DefaultTheme {
    desc?: string
    links?: SocialLink[]
    sponsor?: string
+    actionText?: string
  }

  // outline -------------------------------------------------------------------