feat: support config helper multi keys if supported (#2571)

Koooooo-7 · sy-records · web-flow · commit a2f734f223ca · 2025-07-22T12:24:06.000+08:00
* update: support config helper multi keys

---------

Co-authored-by: Luffy &lt;lufei@docsifyjs.org&gt;
diff --git a/docs/helpers.md b/docs/helpers.md
@@ -93,6 +93,10 @@ You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set th
 
 ```md
 ![logo](https://docsify.js.org/_media/icon.svg ':class=someCssClass')
+
+<!-- Multiple class names -->
+
+![logo](https://docsify.js.org/_media/icon.svg ':class=someCssClass :class=anotherCssClass')
 ```
 
 ### IDs
diff --git a/src/core/render/compiler/image.js b/src/core/render/compiler/image.js
@@ -27,7 +27,11 @@ export const imageCompiler = ({ renderer, contentBase, router }) =>
     }
 
     if (config.class) {
-      attrs.push(`class="${config.class}"`);
+      let classes = config.class;
+      if (Array.isArray(config.class)) {
+        classes = config.class.join(' ');
+      }
+      attrs.push(`class="${classes}"`);
     }
 
     if (config.id) {
diff --git a/src/core/render/compiler/link.js b/src/core/render/compiler/link.js
@@ -54,7 +54,11 @@ export const linkCompiler = ({
     }
 
     if (config.class) {
-      attrs.push(`class="${config.class}"`);
+      let classes = config.class;
+      if (Array.isArray(config.class)) {
+        classes = config.class.join(' ');
+      }
+      attrs.push(`class="${classes}"`);
     }
 
     if (config.id) {
diff --git a/src/core/render/utils.js b/src/core/render/utils.js
@@ -26,12 +26,21 @@ export function getAndRemoveConfig(str = '') {
       .replace(/^('|")/, '')
       .replace(/('|")$/, '')
       .replace(/(?:^|\s):([\w-]+:?)=?([\w-%]+)?/g, (m, key, value) => {
-        if (key.indexOf(':') === -1) {
-          config[key] = (value && value.replace(/&quot;/g, '')) || true;
-          return '';
+        if (key.indexOf(':') !== -1) {
+          return m;
         }
 
-        return m;
+        value = (value && value.replace(/&quot;/g, '')) || true;
+
+        if (value !== true && config[key] !== undefined) {
+          if (!Array.isArray(config[key]) && value !== config[key]) {
+            config[key] = [config[key]];
+          }
+          config[key].includes(value) || config[key].push(value);
+        } else {
+          config[key] = value;
+        }
+        return '';
       })
       .trim();
   }
diff --git a/test/integration/render.test.js b/test/integration/render.test.js
@@ -279,6 +279,16 @@ describe('render', function () {
       );
     });
 
+    test('multi class config', async function () {
+      const output = window.marked(
+        "[alt text](http://url ':class=someCssClass :class=anotherCssClass')",
+      );
+
+      expect(output).toMatchInlineSnapshot(
+        `"<p><a href="http://url" target="_blank"  rel="noopener" class="someCssClass anotherCssClass">alt text</a></p>"`,
+      );
+    });
+
     test('id', async function () {
       const output = window.marked("[alt text](http://url ':id=someCssID')");
 
diff --git a/test/unit/render-util.test.js b/test/unit/render-util.test.js
@@ -87,6 +87,45 @@ describe('core/render/utils', () => {
       });
     });
 
+    test('parse config with key arguments img', () => {
+      const result = getAndRemoveConfig(
+        "![logo](https://docsify.js.org/_media/icon.svg ' :size=50x100 ')",
+      );
+
+      expect(result).toMatchObject({
+        config: {
+          size: '50x100',
+        },
+        str: "![logo](https://docsify.js.org/_media/icon.svg ' ')",
+      });
+    });
+
+    test('parse config with key arguments', () => {
+      const result = getAndRemoveConfig(
+        "[filename](_media/example.md ' :class=foo ')",
+      );
+
+      expect(result).toMatchObject({
+        config: {
+          class: 'foo',
+        },
+        str: "[filename](_media/example.md ' ')",
+      });
+    });
+
+    test('parse config with same key arguments', () => {
+      const result = getAndRemoveConfig(
+        "[filename](_media/example.md ' :class=foo :class=bar :bb=aa ')",
+      );
+
+      expect(result).toMatchObject({
+        config: {
+          class: ['foo', 'bar'],
+        },
+        str: "[filename](_media/example.md ' ')",
+      });
+    });
+
     test('parse config with double quotes', () => {
       const result = getAndRemoveConfig(
         '[filename](_media/example.md ":include")',

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,11 @@ export const imageCompiler = ({ renderer, contentBase, router }) =>`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`if (config.class) {`
`30`		- attrs.push(`class="${config.class}"`);
	`30`	`+ let classes = config.class;`
	`31`	`+ if (Array.isArray(config.class)) {`
	`32`	`+ classes = config.class.join(' ');`
	`33`	`+ }`
	`34`	+ attrs.push(`class="${classes}"`);
`31`	`35`	`}`
`32`	`36`
`33`	`37`	`if (config.id) {`
Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,11 @@ export const linkCompiler = ({`
`54`	`54`	`}`
`55`	`55`
`56`	`56`	`if (config.class) {`
`57`		- attrs.push(`class="${config.class}"`);
	`57`	`+ let classes = config.class;`
	`58`	`+ if (Array.isArray(config.class)) {`
	`59`	`+ classes = config.class.join(' ');`
	`60`	`+ }`
	`61`	+ attrs.push(`class="${classes}"`);
`58`	`62`	`}`
`59`	`63`
`60`	`64`	`if (config.id) {`