🎨 https://github.com/siyuan-note/siyuan/issues/6357

app/src/assets/scss/_chip.scss

@@ -15,6 +15,10 @@ a.b3-chip:hover {
   border-radius: 16px;
   transition: var(--b3-transition);
 
+  &--small {
+    line-height: 20px;
+  }
+
   &--secondary {
     background-color: var(--b3-theme-secondary);
     color: var(--b3-theme-on-secondary);

app/src/assets/scss/_layout.scss

@@ -304,7 +304,7 @@
     padding: 8px;
     color: var(--b3-theme-on-surface-light);
     display: flex;
-    border-radius: 4px;
+    border-radius: 6px;
     margin: 5px;
 
     &:hover,

app/src/config/appearance.ts

@@ -7,7 +7,7 @@ import {exportLayout} from "../layout/util";
 import * as Pickr from "@simonwep/pickr";
 import {isBrowser} from "../util/functions";
 import {fetchPost} from "../util/fetch";
-import {loadAssets} from "../util/assets";
+import {loadAssets, renderSnippet} from "../util/assets";
 import {genOptions} from "../util/genOptions";
 
 export const appearance = {
@@ -106,6 +106,16 @@ export const appearance = {
         ${window.siyuan.languages.refresh}
     </button>
 </label>
+<label class="b3-label fn__flex">
+   <div class="fn__flex-1">
+        ${window.siyuan.languages.resetLayout}
+        <div class="b3-label__text">${window.siyuan.languages.appearance6}</div>
+    </div>
+    <span class="fn__space"></span>
+    <button class="b3-button b3-button--outline fn__flex-center fn__size200" id="resetLayout">
+        <svg><use xlink:href="#iconUndo"></use></svg>${window.siyuan.languages.reset}
+    </button>
+</label>
 <div class="b3-label">
     <label class="fn__block fn__flex">
         <div class="fn__flex-1">
@@ -117,16 +127,18 @@ export const appearance = {
     </label>
     <div id="appearanceCustomPanel"></div>
 </div>
-<label class="b3-label fn__flex">
-   <div class="fn__flex-1">
-        ${window.siyuan.languages.resetLayout}
-        <div class="b3-label__text">${window.siyuan.languages.appearance6}</div>
-    </div>
-    <span class="fn__space"></span>
-    <button class="b3-button b3-button--outline fn__flex-center fn__size200" id="resetLayout">
-        <svg><use xlink:href="#iconUndo"></use></svg>${window.siyuan.languages.reset}
-    </button>
-</label>
+<div class="b3-label">
+    <label class="fn__block fn__flex">
+        <div class="fn__flex-1 fn__flex-center">
+            ${window.siyuan.languages.codeSnippet}
+        </div>
+        <span class="fn__space"></span>
+        <button class="b3-button b3-button--outline fn__flex-center fn__size200" id="codeSnippet">
+            <svg><use xlink:href="#iconSettings"></use></svg>${window.siyuan.languages.config}
+        </button>
+    </label>
+    <div id="codeSnippetPanel"></div>
+</div>
 <label class="fn__flex b3-label">
     <div class="fn__flex-1">
         ${window.siyuan.languages.appearance14}
@@ -251,6 +263,7 @@ export const appearance = {
             }
         });
     },
+    _snippet: [] as ISnippet[],
     bindEvent: () => {
         if (window.siyuan.config.appearance.customCSS) {
             fetchPost("/api/setting/getCustomCSS", {
@@ -259,6 +272,58 @@ export const appearance = {
                 appearance.onGetcustomcss(response.data);
             });
         }
+        const codeSnippetPanelElement = appearance.element.querySelector("#codeSnippetPanel");
+        const codeSnippetElement = appearance.element.querySelector("#codeSnippet");
+        codeSnippetElement.addEventListener("click", () => {
+            if (codeSnippetPanelElement.innerHTML) {
+                codeSnippetPanelElement.innerHTML = "";
+                return;
+            }
+            fetchPost("/api/snippet/getSnippet", {type: "all", enabled: 2}, (response) => {
+                appearance._snippet = response.data._snippet;
+                let html = `<div class="fn__hr"></div>
+<div class="fn__flex">
+    <div class="fn__flex-1"></div>
+    <button class="b3-button b3-button--outline fn__flex-center fn__size200" id="addCodeSnippetCSS">
+        <svg><use xlink:href="#iconAdd"></use></svg> ${window.siyuan.languages.addAttr} CSS
+    </button>
+    <div class="fn__space"></div>
+    <button class="b3-button b3-button--outline fn__flex-center fn__size200" id="addCodeSnippetJS">
+        <svg><use xlink:href="#iconAdd"></use></svg> ${window.siyuan.languages.addAttr} JS
+    </button>
+</div>`;
+                response.data.snippets.forEach((item: ISnippet) => {
+                    html += `<div class="b3-label" style="margin: 0">
+    <div class="fn__flex">
+        <div class="b3-chip b3-chip--secondary b3-chip--small">${item.type}</div>
+        <div class="fn__space"></div>
+        <div class="fn__flex-center">${item.name}</div>
+        <div class="fn__flex-1"></div>
+        <input class="b3-switch fn__flex-center" type="checkbox"${item.enabled ? " checked" : ""}>
+    </div>
+    <div class="fn__hr"></div>
+    <textarea class="fn__block b3-text-field">${item.content}</textarea>
+</div>`
+                });
+                codeSnippetPanelElement.innerHTML = html;
+            });
+        });
+        codeSnippetPanelElement.addEventListener("click", (event) => {
+            const target = event.target as HTMLElement;
+            if (target.id === "addCodeSnippetCSS" || target.id === "addCodeSnippetJS") {
+                target.parentElement.insertAdjacentHTML("afterend", `<div class="b3-label" style="margin: 0">
+    <div class="fn__flex">
+        <div class="b3-chip fn__flex-center b3-chip--small b3-chip--secondary">${target.id === "addCodeSnippetCSS" ? "css" : "js"}</div>
+        <div class="fn__space"></div>
+        <input class="b3-text-field" placeholder="${window.siyuan.languages.title}">
+        <div class="fn__flex-1"></div>
+        <input class="b3-switch fn__flex-center" type="checkbox">
+    </div>
+    <div class="fn__hr"></div>
+    <textarea class="fn__block b3-text-field" placeholder="${window.siyuan.languages.codeSnippet}"></textarea>
+</div>`)
+            }
+        })
         const appearanceCustomElement = appearance.element.querySelector("#appearanceCustom");
         appearanceCustomElement.addEventListener("click", () => {
             if (window.siyuan.config.appearance.customCSS) {

app/src/types/index.d.ts

@@ -49,6 +49,13 @@ interface ITextOption {
     type: string
 }
 
+interface ISnippet {
+    name: string
+    type: string
+    enabled: boolean
+    content: string
+}
+
 interface IInbox {
     oId: string
     shorthandContent: string

app/src/util/assets.ts

@@ -87,20 +87,30 @@ export const loadAssets = (data: IAppearance) => {
 };
 
 export const renderSnippet = () => {
-    fetchPost("/api/snippet/getSnippet", {type: "all", enabled: 1}, (response) => {
-        response.data.snippets.forEach((item: {
-            "name": string
-            "type": string
-            "content": string
-        }) => {
+    fetchPost("/api/snippet/getSnippet", {type: "all"}, (response) => {
+        response.data.snippets.forEach((item: ISnippet) => {
+            const id = `snippet${item.type === "css" ? "CSS" : "JS"}${item.name}`;
+            let exitElement = document.getElementById(id) as HTMLScriptElement;
+            if (!item.enabled) {
+                if (exitElement) {
+                    exitElement.remove();
+                }
+                return;
+            }
+            if (exitElement) {
+                if (exitElement.innerHTML === item.content) {
+                    return;
+                }
+                exitElement.remove();
+            }
             if (item.type === "css") {
-                document.head.insertAdjacentHTML("beforeend", `<style id="snippetCSS${item.name}">${item.content}</style>`);
+                document.head.insertAdjacentHTML("beforeend", `<style id="${id}">${item.content}</style>`);
             } else if (item.type === "js") {
-                const scriptElement = document.createElement("script");
-                scriptElement.type = "text/javascript";
-                scriptElement.text = item.content;
-                scriptElement.id = `snippetJS${item.name}`;
-                document.head.appendChild(scriptElement);
+                exitElement = document.createElement("script");
+                exitElement.type = "text/javascript";
+                exitElement.text = item.content;
+                exitElement.id = id;
+                document.head.appendChild(exitElement);
             }
         });
     });