vitepress 2.0.0-alpha.1 → 2.0.0-alpha.3

package/dist/client/app/data.js

@@ -7,7 +7,7 @@ export const dataSymbol = Symbol();
 export const siteDataRef = shallowRef((import.meta.env.PROD ? siteData : readonly(siteData)));
 // hmr
 if (import.meta.hot) {
-    import.meta.hot.accept('/@siteData', (m) => {
+    import.meta.hot.accept('@siteData', (m) => {
         if (m) {
             siteDataRef.value = m.default;
         }

package/dist/client/app/index.js

@@ -128,16 +128,13 @@ function newRouter() {
 if (inBrowser) {
     createApp().then(({ app, router, data }) => {
         // wait until page component is fetched before mounting
-        router.go().then(() => {
+        router.go(location.href, { initialLoad: true }).then(() => {
             // dynamically update head tags
             useUpdateHead(router.route, data.site);
             app.mount('#app');
             // scroll to hash on new tab during dev
             if (import.meta.env.DEV && location.hash) {
-                const target = document.getElementById(decodeURIComponent(location.hash).slice(1));
-                if (target) {
-                    scrollTo(target, location.hash);
-                }
+                scrollTo(location.hash);
             }
         });
     });

package/dist/client/app/router.js

@@ -8,6 +8,8 @@ export const RouterSymbol = Symbol();
 const fakeHost = 'http://a.com';
 const getDefaultRoute = () => ({
     path: '/',
+    hash: '',
+    query: '',
     component: null,
     data: notFoundPageData
 });
@@ -15,20 +17,16 @@ export function createRouter(loadPageModule, fallbackComponent) {
     const route = reactive(getDefaultRoute());
     const router = {
         route,
-        go
-    };
-    async function go(href = inBrowser ? location.href : '/') {
-        href = normalizeHref(href);
-        if ((await router.onBeforeRouteChange?.(href)) === false)
-            return;
-        if (inBrowser && href !== normalizeHref(location.href)) {
-            // save scroll position before changing url
-            history.replaceState({ scrollPosition: window.scrollY }, '');
-            history.pushState({}, '', href);
+        async go(href, options) {
+            href = normalizeHref(href);
+            if ((await router.onBeforeRouteChange?.(href)) === false)
+                return;
+            if (!inBrowser || (await changeRoute(href, options)))
+                await loadPage(href);
+            syncRouteQueryAndHash();
+            await router.onAfterRouteChange?.(href);
         }
-        await loadPage(href);
-        await (router.onAfterRouteChange ?? router.onAfterRouteChanged)?.(href);
-    }
+    };
     let latestPendingPath = null;
     async function loadPage(href, scrollPosition = 0, isRetry = false) {
         if ((await router.onBeforePageLoad?.(href)) === false)
@@ -37,21 +35,20 @@ export function createRouter(loadPageModule, fallbackComponent) {
         const pendingPath = (latestPendingPath = targetLoc.pathname);
         try {
             let page = await loadPageModule(pendingPath);
-            if (!page) {
+            if (!page)
                 throw new Error(`Page not found: ${pendingPath}`);
-            }
             if (latestPendingPath === pendingPath) {
                 latestPendingPath = null;
                 const { default: comp, __pageData } = page;
-                if (!comp) {
+                if (!comp)
                     throw new Error(`Invalid route component: ${comp}`);
-                }
                 await router.onAfterPageLoad?.(href);
                 route.path = inBrowser ? pendingPath : withBase(pendingPath);
                 route.component = markRaw(comp);
                 route.data = import.meta.env.PROD
                     ? markRaw(__pageData)
                     : readonly(__pageData);
+                syncRouteQueryAndHash(targetLoc);
                 if (inBrowser) {
                     nextTick(() => {
                         let actualPathname = siteDataRef.value.base +
@@ -64,20 +61,7 @@ export function createRouter(loadPageModule, fallbackComponent) {
                             href = actualPathname + targetLoc.search + targetLoc.hash;
                             history.replaceState({}, '', href);
                         }
-                        if (targetLoc.hash && !scrollPosition) {
-                            let target = null;
-                            try {
-                                target = document.getElementById(decodeURIComponent(targetLoc.hash).slice(1));
-                            }
-                            catch (e) {
-                                console.warn(e);
-                            }
-                            if (target) {
-                                scrollTo(target, targetLoc.hash);
-                                return;
-                            }
-                        }
-                        window.scrollTo(0, scrollPosition);
+                        return scrollTo(targetLoc.hash, false, scrollPosition);
                     });
                 }
             }
@@ -110,13 +94,19 @@ export function createRouter(loadPageModule, fallbackComponent) {
                         .replace(/^\//, '')
                     : '404.md';
                 route.data = { ...notFoundPageData, relativePath };
+                syncRouteQueryAndHash(targetLoc);
             }
         }
     }
+    function syncRouteQueryAndHash(loc = inBrowser
+        ? location
+        : { search: '', hash: '' }) {
+        route.query = loc.search;
+        route.hash = decodeURIComponent(loc.hash);
+    }
     if (inBrowser) {
-        if (history.state === null) {
+        if (history.state === null)
             history.replaceState({}, '');
-        }
         window.addEventListener('click', (e) => {
             if (e.defaultPrevented ||
                 !(e.target instanceof Element) ||
@@ -125,46 +115,29 @@ export function createRouter(loadPageModule, fallbackComponent) {
                 e.ctrlKey ||
                 e.shiftKey ||
                 e.altKey ||
-                e.metaKey)
+                e.metaKey) {
                 return;
+            }
             const link = e.target.closest('a');
             if (!link ||
                 link.closest('.vp-raw') ||
                 link.hasAttribute('download') ||
-                link.hasAttribute('target'))
+                link.hasAttribute('target')) {
                 return;
+            }
             const linkHref = link.getAttribute('href') ??
                 (link instanceof SVGAElement ? link.getAttribute('xlink:href') : null);
             if (linkHref == null)
                 return;
-            const { href, origin, pathname, hash, search } = new URL(linkHref, link.baseURI);
-            const currentUrl = new URL(location.href); // copy to keep old data
+            const { href, origin, pathname } = new URL(linkHref, link.baseURI);
+            const currentLoc = new URL(location.href); // copy to keep old data
             // only intercept inbound html links
-            if (origin === currentUrl.origin && treatAsHtml(pathname)) {
+            if (origin === currentLoc.origin && treatAsHtml(pathname)) {
                 e.preventDefault();
-                if (pathname === currentUrl.pathname &&
-                    search === currentUrl.search) {
-                    // scroll between hash anchors in the same page
-                    // avoid duplicate history entries when the hash is same
-                    if (hash !== currentUrl.hash) {
-                        history.pushState({}, '', href);
-                        // still emit the event so we can listen to it in themes
-                        window.dispatchEvent(new HashChangeEvent('hashchange', {
-                            oldURL: currentUrl.href,
-                            newURL: href
-                        }));
-                    }
-                    if (hash) {
-                        // use smooth scroll when clicking on header anchor links
-                        scrollTo(link, hash, link.classList.contains('header-anchor'));
-                    }
-                    else {
-                        window.scrollTo(0, 0);
-                    }
-                }
-                else {
-                    go(href);
-                }
+                router.go(href, {
+                    // use smooth scroll when clicking on header anchor links
+                    smoothScroll: link.classList.contains('header-anchor')
+                });
             }
         }, { capture: true });
         window.addEventListener('popstate', async (e) => {
@@ -172,10 +145,12 @@ export function createRouter(loadPageModule, fallbackComponent) {
                 return;
             const href = normalizeHref(location.href);
             await loadPage(href, (e.state && e.state.scrollPosition) || 0);
-            await (router.onAfterRouteChange ?? router.onAfterRouteChanged)?.(href);
+            syncRouteQueryAndHash();
+            await router.onAfterRouteChange?.(href);
         });
         window.addEventListener('hashchange', (e) => {
             e.preventDefault();
+            syncRouteQueryAndHash();
         });
     }
     handleHMR(route);
@@ -183,20 +158,21 @@ export function createRouter(loadPageModule, fallbackComponent) {
 }
 export function useRouter() {
     const router = inject(RouterSymbol);
-    if (!router) {
+    if (!router)
         throw new Error('useRouter() is called without provider.');
-    }
     return router;
 }
 export function useRoute() {
     return useRouter().route;
 }
-export function scrollTo(el, hash, smooth = false) {
+export function scrollTo(hash, smooth = false, scrollPosition = 0) {
+    if (!hash || scrollPosition) {
+        window.scrollTo(0, scrollPosition);
+        return;
+    }
     let target = null;
     try {
-        target = el.classList.contains('header-anchor')
-            ? el
-            : document.getElementById(decodeURIComponent(hash).slice(1));
+        target = document.getElementById(decodeURIComponent(hash).slice(1));
     }
     catch (e) {
         console.warn(e);
@@ -222,9 +198,8 @@ function handleHMR(route) {
     if (import.meta.hot) {
         // hot reload pageData
         import.meta.hot.on('vitepress:pageData', (payload) => {
-            if (shouldHotReload(payload)) {
+            if (shouldHotReload(payload))
                 route.data = payload.pageData;
-            }
         });
     }
 }
@@ -239,9 +214,39 @@ function normalizeHref(href) {
     const url = new URL(href, fakeHost);
     url.pathname = url.pathname.replace(/(^|\/)index(\.html)?$/, '$1');
     // ensure correct deep link so page refresh lands on correct files.
-    if (siteDataRef.value.cleanUrls)
+    if (siteDataRef.value.cleanUrls) {
         url.pathname = url.pathname.replace(/\.html$/, '');
-    else if (!url.pathname.endsWith('/') && !url.pathname.endsWith('.html'))
+    }
+    else if (!url.pathname.endsWith('/') && !url.pathname.endsWith('.html')) {
         url.pathname += '.html';
+    }
     return url.pathname + url.search + url.hash;
 }
+async function changeRoute(href, { smoothScroll = false, initialLoad = false } = {}) {
+    const loc = normalizeHref(location.href);
+    const nextUrl = new URL(href, location.origin);
+    const currentUrl = new URL(loc, location.origin);
+    if (href === loc) {
+        if (!initialLoad) {
+            scrollTo(nextUrl.hash, smoothScroll);
+            return false;
+        }
+    }
+    else {
+        // save scroll position before changing URL
+        history.replaceState({ scrollPosition: window.scrollY }, '');
+        history.pushState({}, '', href);
+        if (nextUrl.pathname === currentUrl.pathname) {
+            // scroll between hash anchors on the same page, avoid duplicate entries
+            if (nextUrl.hash !== currentUrl.hash) {
+                window.dispatchEvent(new HashChangeEvent('hashchange', {
+                    oldURL: currentUrl.href,
+                    newURL: nextUrl.href
+                }));
+                scrollTo(nextUrl.hash, smoothScroll);
+            }
+            return false;
+        }
+    }
+    return true;
+}

package/dist/client/index.d.ts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { Component, InjectionKey, Ref, App, AsyncComponentLoader } from 'vue';
+import { Component, Ref, InjectionKey, App, AsyncComponentLoader } from 'vue';
 import { PageData, Awaitable, SiteData } from '../../types/shared.js';
 export { HeadConfig, Header, PageData, SiteData } from '../../types/shared.js';
 
@@ -11,6 +11,8 @@ declare function escapeHtml(str: string): string;
 
 interface Route {
     path: string;
+    hash: string;
+    query: string;
     data: PageData;
     component: Component | null;
 }
@@ -22,7 +24,10 @@ interface Router {
     /**
      * Navigate to a new URL.
      */
-    go: (to?: string) => Promise<void>;
+    go: (to: string, options?: {
+        initialLoad?: boolean;
+        smoothScroll?: boolean;
+    }) => Promise<void>;
     /**
      * Called before the route changes. Return `false` to cancel the navigation.
      */
@@ -40,10 +45,6 @@ interface Router {
      * Called after the route changes.
      */
     onAfterRouteChange?: (to: string) => Awaitable<void>;
-    /**
-     * @deprecated use `onAfterRouteChange` instead
-     */
-    onAfterRouteChanged?: (to: string) => Awaitable<void>;
 }
 declare function useRouter(): Router;
 declare function useRoute(): Route;

package/dist/client/theme-default/components/VPAlgoliaSearchBox.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import docsearch from '@docsearch/js'
-import { useRoute, useRouter } from 'vitepress'
+import { useRouter } from 'vitepress'
 import type { DefaultTheme } from 'vitepress/theme'
 import { nextTick, onMounted, watch } from 'vue'
 import { useData } from '../composables/data'
@@ -10,7 +10,6 @@ const props = defineProps<{
 }>()
 
 const router = useRouter()
-const route = useRoute()
 const { site, localeIndex, lang } = useData()
 
 type DocSearchProps = Parameters<typeof docsearch>[0]
@@ -51,17 +50,7 @@ function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
 
     navigator: {
       navigate({ itemUrl }) {
-        const { pathname: hitPathname } = new URL(
-          window.location.origin + itemUrl
-        )
-
-        // router doesn't handle same-page navigation so we use the native
-        // browser location API for anchor navigation
-        if (route.path === hitPathname) {
-          window.location.assign(window.location.origin + itemUrl)
-        } else {
-          router.go(itemUrl)
-        }
+        router.go(itemUrl)
       }
     },
 
@@ -71,17 +60,6 @@ function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
           url: getRelativePath(item.url)
         })
       })
-    },
-
-    hitComponent({ hit, children }) {
-      return {
-        __v: null,
-        type: 'a',
-        ref: undefined,
-        constructor: undefined,
-        key: undefined,
-        props: { href: hit.url, children }
-      }
     }
   }) as DocSearchProps
 

package/dist/client/theme-default/components/VPDoc.vue

@@ -154,6 +154,7 @@ const pageName = computed(() =>
   width: 224px;
   height: 32px;
   background: linear-gradient(transparent, var(--vp-c-bg) 70%);
+  pointer-events: none;
 }
 
 .aside-content {

package/dist/client/theme-default/components/VPLocalSearchBox.vue

@@ -46,7 +46,7 @@ const searchIndexData = shallowRef(localSearchIndex)
 
 // hmr
 if (import.meta.hot) {
-  import.meta.hot.accept('/@localSearchIndex', (m) => {
+  import.meta.hot.accept('@localSearchIndex', (m) => {
     if (m) {
       searchIndexData.value = m.default
     }

package/dist/client/theme-default/styles/fonts.css

@@ -8,8 +8,8 @@
   font-weight: 100 900;
   font-display: swap;
   src: url('../fonts/inter-roman-cyrillic-ext.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-    U+FE2E-FE2F;
+  unicode-range:
+    U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 
 @font-face {
@@ -36,8 +36,8 @@
   font-weight: 100 900;
   font-display: swap;
   src: url('../fonts/inter-roman-greek.woff2') format('woff2');
-  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
-    U+03A3-03FF;
+  unicode-range:
+    U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
 }
 
 @font-face {
@@ -46,9 +46,10 @@
   font-weight: 100 900;
   font-display: swap;
   src: url('../fonts/inter-roman-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
-    U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
-    U+0329, U+1EA0-1EF9, U+20AB;
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
+    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+    U+1EA0-1EF9, U+20AB;
 }
 
 @font-face {
@@ -57,8 +58,9 @@
   font-weight: 100 900;
   font-display: swap;
   src: url('../fonts/inter-roman-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
-    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range:
+    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
+    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
@@ -67,9 +69,10 @@
   font-weight: 100 900;
   font-display: swap;
   src: url('../fonts/inter-roman-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
-    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
@@ -78,8 +81,8 @@
   font-weight: 100 900;
   font-display: swap;
   src: url('../fonts/inter-italic-cyrillic-ext.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-    U+FE2E-FE2F;
+  unicode-range:
+    U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 
 @font-face {
@@ -106,8 +109,8 @@
   font-weight: 100 900;
   font-display: swap;
   src: url('../fonts/inter-italic-greek.woff2') format('woff2');
-  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
-    U+03A3-03FF;
+  unicode-range:
+    U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
 }
 
 @font-face {
@@ -116,9 +119,10 @@
   font-weight: 100 900;
   font-display: swap;
   src: url('../fonts/inter-italic-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
-    U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
-    U+0329, U+1EA0-1EF9, U+20AB;
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
+    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+    U+1EA0-1EF9, U+20AB;
 }
 
 @font-face {
@@ -127,8 +131,9 @@
   font-weight: 100 900;
   font-display: swap;
   src: url('../fonts/inter-italic-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
-    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range:
+    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
+    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
@@ -137,45 +142,54 @@
   font-weight: 100 900;
   font-display: swap;
   src: url('../fonts/inter-italic-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
-    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
   font-family: 'Punctuation SC';
   font-weight: 400;
-  src: local('PingFang SC Regular'), local('Noto Sans CJK SC'),
+  src:
+    local('PingFang SC Regular'), local('Noto Sans CJK SC'),
     local('Microsoft YaHei');
-  unicode-range: U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026,
-    U+00B7, U+007E, U+002F;
+  unicode-range:
+    U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7,
+    U+007E, U+002F;
 }
 
 @font-face {
   font-family: 'Punctuation SC';
   font-weight: 500;
-  src: local('PingFang SC Medium'), local('Noto Sans CJK SC'),
+  src:
+    local('PingFang SC Medium'), local('Noto Sans CJK SC'),
     local('Microsoft YaHei');
-  unicode-range: U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026,
-    U+00B7, U+007E, U+002F;
+  unicode-range:
+    U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7,
+    U+007E, U+002F;
 }
 
 @font-face {
   font-family: 'Punctuation SC';
   font-weight: 600;
-  src: local('PingFang SC Semibold'), local('Noto Sans CJK SC Bold'),
+  src:
+    local('PingFang SC Semibold'), local('Noto Sans CJK SC Bold'),
     local('Microsoft YaHei Bold');
-  unicode-range: U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026,
-    U+00B7, U+007E, U+002F;
+  unicode-range:
+    U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7,
+    U+007E, U+002F;
 }
 
 @font-face {
   font-family: 'Punctuation SC';
   font-weight: 700;
-  src: local('PingFang SC Semibold'), local('Noto Sans CJK SC Bold'),
+  src:
+    local('PingFang SC Semibold'), local('Noto Sans CJK SC Bold'),
     local('Microsoft YaHei Bold');
-  unicode-range: U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026,
-    U+00B7, U+007E, U+002F;
+  unicode-range:
+    U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7,
+    U+007E, U+002F;
 }
 
 /* Generate the subsetted fonts using: `pyftsubset <file>.woff2 --unicodes="<range>" --output-file="inter-<style>-<subset>.woff2" --flavor=woff2` */

package/dist/client/theme-default/styles/vars.css

@@ -261,17 +261,19 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-font-family-base: 'Inter', ui-sans-serif, system-ui, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --vp-font-family-mono: ui-monospace, 'Menlo', 'Monaco', 'Consolas',
-    'Liberation Mono', 'Courier New', monospace;
+  --vp-font-family-base:
+    'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --vp-font-family-mono:
+    ui-monospace, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono',
+    'Courier New', monospace;
   font-optical-sizing: auto;
 }
 
 :root:where(:lang(zh)) {
-  --vp-font-family-base: 'Punctuation SC', 'Inter', ui-sans-serif, system-ui,
-    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-    'Noto Color Emoji';
+  --vp-font-family-base:
+    'Punctuation SC', 'Inter', ui-sans-serif, system-ui, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 }
 
 /**
@@ -283,7 +285,8 @@
   --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
   --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
   --vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
-  --vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
+  --vp-shadow-5:
+    0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
 }
 
 /**
@@ -337,10 +340,10 @@
   --vp-code-block-bg: var(--vp-c-bg-alt);
   --vp-code-block-divider-color: var(--vp-c-gutter);
 
-  --vp-code-lang-color: var(--vp-c-text-3);
+  --vp-code-lang-color: var(--vp-c-text-2);
 
   --vp-code-line-highlight-color: var(--vp-c-default-soft);
-  --vp-code-line-number-color: var(--vp-c-text-3);
+  --vp-code-line-number-color: var(--vp-c-text-2);
 
   --vp-code-line-diff-add-color: var(--vp-c-success-soft);
   --vp-code-line-diff-add-symbol-color: var(--vp-c-success-1);