d2m

.vitepress/config.ts

@@ -459,7 +459,27 @@ export default defineConfig({
   markdown: {
     // languages used for twoslash and jsdocs in twoslash
     languages: ['ts', 'js', 'json'],
-    codeTransformers: [transformerTwoslash()],
+    codeTransformers: [
+      transformerTwoslash(),
+      // add `style:*` support
+      {
+        root(hast) {
+          const meta = this.options.meta?.__raw
+            ?.split(' ')
+            .find((m) => m.startsWith('style:'))
+          if (meta) {
+            const style = meta.slice('style:'.length)
+            const rootPre = hast.children.find(
+              (n): n is typeof n & { type: 'element'; tagName: 'pre' } =>
+                n.type === 'element' && n.tagName === 'pre',
+            )
+            if (rootPre) {
+              rootPre.properties.style += '; ' + style
+            }
+          }
+        },
+      },
+    ],
     config(md) {
       md.use(groupIconMdPlugin, {
         titleBar: {

guide/backend-integration.md

@@ -65,7 +65,7 @@
 
 3. 在生产环境中, 在运行 `vite build` 之后，一个 `.vite/manifest.json` 文件将与静态资源文件一同生成。一个示例清单文件会像下面这样：
 
-   ```json [.vite/manifest.json]
+   ```json [.vite/manifest.json] style:max-height:400px
    {
      "_shared-B7PI925R.js": {
        "file": "assets/shared-B7PI925R.js",
@@ -107,17 +107,53 @@
 
    manifest 具有 `Record<name, chunk>` 结构，其中每个块遵循 `ManifestChunk` 接口：
 
-   ```ts
+   ```ts style:max-height:400px
    interface ManifestChunk {
+     /**
+      * 此块/资源的输入文件名（若已知）
+      */
      src?: string
+     /**
+      * 这个代码块/资源的输出文件名
+      */
      file: string
+     /**
+      * 该代码块导入的 CSS 文件列表
+      *
+      * 此字段仅在 JS 代码块中存在。
+      */
      css?: string[]
+     /**
+      * 该代码块导入的资源文件列表，不包括 CSS 文件
+      *
+      * 此字段仅在 JS 代码块中存在。
+      */
      assets?: string[]
+     /**
+      * 该代码块或资源是否为入口点
+      */
      isEntry?: boolean
+     /**
+      * 此块/资源的名称（如已知）
+      */
      name?: string
-     names?: string[]
+     /**
+      * 该代码块是否为动态入口点
+      *
+      * 此字段仅在 JS 代码块中存在。
+      */
      isDynamicEntry?: boolean
+     /**
+      * 该代码块静态导入的代码块列表
+      *
+      * 这些值是 manifest 中的键。此字段仅在 JS 代码块中存在。
+      */
      imports?: string[]
+     /**
+      * 该代码块动态导入的代码块列表
+      *
+      * 这些值是 manifest 中的键。此字段仅在 JS 代码块中存在。
+      */
      dynamicImports?: string[]
    }
    ```
@@ -129,7 +165,7 @@
 - **Asset chunks**：由导入的资源（例如图片、字体）生成。其键值是项目根目录的相对 src 路径。
 - **CSS 文件**：当 [`build.cssCodeSplit`](/config/build-options.md#build-csscodesplit) 为 `false` 时，将生成一个带有 `style.css` 键的 CSS 文件。当 `build.cssCodeSplit` 不为 `false` 时，键的生成方式与 JS 代码块类似（即，入口代码块不带 `_` 前缀，非入口代码块带 `_` 前缀）。
 
-代码块将包含其静态和动态导入的信息（两者都是映射到清单中相应代码块的键），以及它们对应的 CSS 和资源文件（如果有）。
+JS 代码块（除了资源或 CSS 之外的代码块）将包含其静态和动态导入的信息（两者都是映射到清单中相应代码块的键），以及它们对应的 CSS 和资源文件（如果有）。
 
 4. 你可以利用这个文件来渲染带有哈希文件名的链接或预加载指令。