From 5d06425e6968670fd909bc72862f9be11534c81c Mon Sep 17 00:00:00 2001
From: Koy <koy@ko8e24.top>
Date: Mon, 21 Jul 2025 23:50:29 +0800
Subject: [PATCH 1/5] update: support config helper multi keys

---
 src/core/render/compiler/image.js |  6 ++++-
 src/core/render/utils.js          | 17 ++++++++++----
 test/integration/render.test.js   | 10 ++++++++
 test/unit/render-util.test.js     | 39 +++++++++++++++++++++++++++++++
 4 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/src/core/render/compiler/image.js b/src/core/render/compiler/image.js
index 4c8ea9089..6e9b20f89 100644
--- 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/utils.js b/src/core/render/utils.js
index 20e4d07e4..66796de1e 100644
--- 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
index 4f624618b..10803baf8 100644
--- 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
index 33ae14ad2..6c4218254 100644
--- 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")',

From 5cfdd50f16f5b53be765474db36ebab43095b5fe Mon Sep 17 00:00:00 2001
From: Koy <koy@ko8e24.top>
Date: Mon, 21 Jul 2025 23:58:52 +0800
Subject: [PATCH 2/5] docs

---
 docs/helpers.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/helpers.md b/docs/helpers.md
index 57eaa41d0..ab4ddfd60 100644
--- a/docs/helpers.md
+++ b/docs/helpers.md
@@ -92,7 +92,7 @@ You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set th
 ### Class names
 
 ```md
-![logo](https://docsify.js.org/_media/icon.svg ':class=someCssClass')
+![logo](https://docsify.js.org/_media/icon.svg ':class=someCssClass :class=anotherCssClass')
 ```
 
 ### IDs

From 40fc84bd5668c79836874d30551cd2fd2d34a883 Mon Sep 17 00:00:00 2001
From: Koy <koy@ko8e24.top>
Date: Tue, 22 Jul 2025 00:24:01 +0800
Subject: [PATCH 3/5] fix: it

---
 src/core/render/compiler/link.js | 6 +++++-
 test/integration/render.test.js  | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/core/render/compiler/link.js b/src/core/render/compiler/link.js
index 9483dd88b..be6f31cb7 100644
--- 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/test/integration/render.test.js b/test/integration/render.test.js
index 10803baf8..210fcc56d 100644
--- a/test/integration/render.test.js
+++ b/test/integration/render.test.js
@@ -285,7 +285,7 @@ describe('render', function () {
       );
 
       expect(output).toMatchInlineSnapshot(
-        `"<p><a href="http://url" target="_blank"  rel="noopener" class="someCssClass,anotherCssClass">alt text</a></p>"`,
+        `"<p><a href="http://url" target="_blank"  rel="noopener" class="someCssClass anotherCssClass">alt text</a></p>"`,
       );
     });
 

From 6aea4a811b9fd25c25cac0fd117cfeed7ea18458 Mon Sep 17 00:00:00 2001
From: Koy Zhuang <koy@ko8e24.top>
Date: Tue, 22 Jul 2025 10:38:01 +0800
Subject: [PATCH 4/5] Update docs/helpers.md

Co-authored-by: Luffy <lufei@docsifyjs.org>
---
 docs/helpers.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/helpers.md b/docs/helpers.md
index ab4ddfd60..6e2270107 100644
--- a/docs/helpers.md
+++ b/docs/helpers.md
@@ -92,6 +92,9 @@ You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set th
 ### Class names
 
 ```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')
 ```
 

From 90381ba3f1fd59a675fef7ed4e216223f513bc1e Mon Sep 17 00:00:00 2001
From: Koy <koy@ko8e24.top>
Date: Tue, 22 Jul 2025 10:39:33 +0800
Subject: [PATCH 5/5] fix: lint

---
 docs/helpers.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/helpers.md b/docs/helpers.md
index 6e2270107..5d0b03f7c 100644
--- a/docs/helpers.md
+++ b/docs/helpers.md
@@ -95,6 +95,7 @@ You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set th
 ![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')
 ```