docs: supplement demo.cols

docs/guide/page-config.md

@@ -74,16 +74,28 @@ demo:
 <!-- 其他 Markdown 内容 -->
 ```
 
-配置 `demo.cols` 后,以下多个 demo 完将会被渲染为双栏布局：
+配置 `demo.cols` 后，以下**连续多个**标签组成的 demo 完将会被渲染为双栏布局：
 
 ```md
+<!-- good ✅ -->
+
 <code src="./demos/cols.tsx">分栏 1</code>
 <code src="./demos/cols.tsx">分栏 2</code>
 <code src="./demos/cols.tsx">分栏 3</code>
 <code src="./demos/cols.tsx">分栏 4</code>
+
+<!-- bad ❌ -->
+
+<code src="./demos/cols.tsx">bad 分栏 1</code>
+
+<code src="./demos/cols.tsx">bad 分栏 2</code>
 ```
 
 <code id="foo" src="./demos/cols.tsx">分栏 1</code>
 <code id="bar" src="./demos/cols.tsx">分栏 2</code>
 <code id="baz" src="./demos/cols.tsx">分栏 3</code>
 <code id="other" src="./demos/cols.tsx">分栏 4</code>
+
+<code id="bad-1" src="./demos/cols.tsx">bad 分栏 1</code>
+
+<code id="bad-2" src="./demos/cols.tsx">bad 分栏 2</code>

src/loaders/markdown/transformer/fixtures/demo/cols/demo.jsx

@@ -0,0 +1 @@
+export default () => 'demo';

src/loaders/markdown/transformer/fixtures/demo/cols/expect.ts

@@ -0,0 +1,61 @@
+import type { IMdTransformerResult } from '../../..';
+
+export default (ret: IMdTransformerResult) => {
+  expect(ret.content).toMatchInlineSnapshot(`
+    "<><DumiDemoGrid items={[{
+      \\"demo\\": {
+        \\"id\\": \\"demo-foo\\"
+      },
+      \\"previewerProps\\": {
+        \\"id\\": \\"foo\\",
+        \\"title\\": \\"分栏 1\\",
+        \\"filename\\": \\"demo.jsx\\"
+      }
+    }, {
+      \\"demo\\": {
+        \\"id\\": \\"demo-bar\\"
+      },
+      \\"previewerProps\\": {
+        \\"id\\": \\"bar\\",
+        \\"title\\": \\"分栏 2\\",
+        \\"filename\\": \\"demo.jsx\\"
+      }
+    }, {
+      \\"demo\\": {
+        \\"id\\": \\"demo-baz\\"
+      },
+      \\"previewerProps\\": {
+        \\"id\\": \\"baz\\",
+        \\"title\\": \\"分栏 3\\",
+        \\"filename\\": \\"demo.jsx\\"
+      }
+    }, {
+      \\"demo\\": {
+        \\"id\\": \\"demo-other\\"
+      },
+      \\"previewerProps\\": {
+        \\"id\\": \\"other\\",
+        \\"title\\": \\"分栏 4\\",
+        \\"filename\\": \\"demo.jsx\\"
+      }
+    }]} /><DumiDemo {...{
+      \\"demo\\": {
+        \\"id\\": \\"demo-bad-1\\"
+      },
+      \\"previewerProps\\": {
+        \\"id\\": \\"bad-1\\",
+        \\"title\\": \\"bad 分栏 1\\",
+        \\"filename\\": \\"demo.jsx\\"
+      }
+    }} /><DumiDemo {...{
+      \\"demo\\": {
+        \\"id\\": \\"demo-bad-2\\"
+      },
+      \\"previewerProps\\": {
+        \\"id\\": \\"bad-2\\",
+        \\"title\\": \\"bad 分栏 2\\",
+        \\"filename\\": \\"demo.jsx\\"
+      }
+    }} /></>"
+  `);
+};

src/loaders/markdown/transformer/fixtures/demo/cols/index.md

@@ -0,0 +1,17 @@
+---
+demo:
+  cols: 2
+---
+
+<!-- good ✅ -->
+
+<code id="foo" src="./demo.jsx">分栏 1</code>
+<code id="bar" src="./demo.jsx">分栏 2</code>
+<code id="baz" src="./demo.jsx">分栏 3</code>
+<code id="other" src="./demo.jsx">分栏 4</code>
+
+<!-- bad ❌ -->
+
+<code id="bad-1" src="./demo.jsx">bad 分栏 1</code>
+
+<code id="bad-2" src="./demo.jsx">bad 分栏 2</code>

src/loaders/markdown/transformer/rehypeDemo.ts

@@ -319,11 +319,8 @@ export default function rehypeDemo(
                   ) {
                     const startLine = node.position?.start.line;
                     const suffix = startLine ? `:${startLine}` : '';
-
-                    logger.warn(
-                      `Duplicate demo id found due to filename conflicts, please consider adding a unique id to code tag to resolve this.
-        at ${opts.fileAbsPath}${suffix}`,
-                    );
+                    // prettier-ignore
+                    logger.warn(`Duplicate demo id found due to filename conflicts, please consider adding a unique id to code tag to resolve this. at ${opts.fileAbsPath}${suffix}`);
                   }
 
                   // eslint-disable-next-line @typescript-eslint/no-unused-vars