:sparkles: https://github.com/siyuan-note/siyuan/issues/6143

app/src/mobile/util/initFramework.ts

@@ -5,7 +5,7 @@ import {validateName} from "../../editor/rename";
 import {getEventName} from "../../protyle/util/compatibility";
 import {mountHelp} from "../../util/mount";
 import {fetchPost} from "../../util/fetch";
-import {setInlineStyle} from "../../util/assets";
+import {renderSnippet, setInlineStyle} from "../../util/assets";
 import {setEmpty} from "./setEmpty";
 import {disabledProtyle, enableProtyle} from "../../protyle/util/onGet";
 import {getOpenNotebookCount} from "../../util/pathName";
@@ -20,6 +20,7 @@ import {hideKeyboardToolbar, initKeyboardToolbar} from "./showKeyboardToolbar";
 
 export const initFramework = () => {
     setInlineStyle();
+    renderSnippet();
     initKeyboardToolbar();
     const scrimElement = document.querySelector(".scrim");
     const sidebarElement = document.getElementById("sidebar");

app/src/protyle/markdown/highlightRender.ts

@@ -1,7 +1,7 @@
 import {addScript} from "../util/addScript";
-import {setCodeTheme} from "../ui/setCodeTheme";
 import {Constants} from "../../constants";
 import {focusByOffset} from "../util/selection";
+import {setCodeTheme} from "../../util/assets";
 
 export const highlightRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
     let codeElements: NodeListOf<Element>;

app/src/protyle/ui/setCodeTheme.ts

@@ -1,25 +0,0 @@
-import {Constants} from "../../constants";
-import {addStyle} from "../util/addStyle";
-
-export const setCodeTheme = (cdn = Constants.PROTYLE_CDN) => {
-    const protyleHljsStyle = document.getElementById("protyleHljsStyle") as HTMLLinkElement;
-    let css;
-    if (window.siyuan.config.appearance.mode === 0) {
-        css = window.siyuan.config.appearance.codeBlockThemeLight;
-        if (!Constants.SIYUAN_CONFIG_APPEARANCE_LIGHT_CODE.includes(css)) {
-            css = "default";
-        }
-    } else {
-        css = window.siyuan.config.appearance.codeBlockThemeDark;
-        if (!Constants.SIYUAN_CONFIG_APPEARANCE_DARK_CODE.includes(css)) {
-            css = "github-dark";
-        }
-    }
-    const href = `${cdn}/js/highlight.js/styles/${css}.min.css?v=11.5.0`;
-    if (!protyleHljsStyle) {
-        addStyle(href, "protyleHljsStyle");
-    } else if (!protyleHljsStyle.href.includes(href)) {
-        protyleHljsStyle.remove();
-        addStyle(href, "protyleHljsStyle");
-    }
-};

app/src/util/assets.ts

@@ -1,11 +1,11 @@
 import {Constants} from "../constants";
 import {addScript} from "../protyle/util/addScript";
 import {addStyle} from "../protyle/util/addStyle";
-import {setCodeTheme} from "../protyle/ui/setCodeTheme";
 /// #if !MOBILE
 import {getAllModels} from "../layout/getAll";
 /// #endif
 import {isMobile} from "./functions";
+import {fetchPost} from "./fetch";
 
 export const loadAssets = (data: IAppearance) => {
     const defaultStyleElement = document.getElementById("themeDefaultStyle");
@@ -53,11 +53,11 @@ export const loadAssets = (data: IAppearance) => {
         addScript(themeScriptAddress, "themeScript");
     }
 
-    const scriptElement = document.getElementById("iconScript");
+    const iconScriptElement = document.getElementById("iconScript");
     const iconURL = `/appearance/icons/${data.icon}/icon.js?v=${data.iconVer}`;
-    if (scriptElement) {
-        if (!scriptElement.getAttribute("src").startsWith(iconURL)) {
-            scriptElement.remove();
+    if (iconScriptElement) {
+        if (!iconScriptElement.getAttribute("src").startsWith(iconURL)) {
+            iconScriptElement.remove();
             addScript(iconURL, "iconScript");
         }
     } else {
@@ -65,6 +65,22 @@ 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
+        }) => {
+            if (item.type === "css") {
+                document.head.insertAdjacentHTML("beforeend", `<style type="text/css" id="snippet${item.name}">${item.content}</style>`);
+            } else if (item.type === "js") {
+                document.head.insertAdjacentHTML("beforeend", `<script type="text/javascript" id="snippet${item.name}">${item.content}</script>`);
+            }
+        })
+    });
+}
+
 export const initAssets = () => {
     const emojiElement = document.getElementById("emojiScript");
     const loadingElement = document.getElementById("loading");
@@ -107,3 +123,26 @@ export const setInlineStyle = (set = true) => {
     }
     return style;
 };
+
+export const setCodeTheme = (cdn = Constants.PROTYLE_CDN) => {
+    const protyleHljsStyle = document.getElementById("protyleHljsStyle") as HTMLLinkElement;
+    let css;
+    if (window.siyuan.config.appearance.mode === 0) {
+        css = window.siyuan.config.appearance.codeBlockThemeLight;
+        if (!Constants.SIYUAN_CONFIG_APPEARANCE_LIGHT_CODE.includes(css)) {
+            css = "default";
+        }
+    } else {
+        css = window.siyuan.config.appearance.codeBlockThemeDark;
+        if (!Constants.SIYUAN_CONFIG_APPEARANCE_DARK_CODE.includes(css)) {
+            css = "github-dark";
+        }
+    }
+    const href = `${cdn}/js/highlight.js/styles/${css}.min.css?v=11.5.0`;
+    if (!protyleHljsStyle) {
+        addStyle(href, "protyleHljsStyle");
+    } else if (!protyleHljsStyle.href.includes(href)) {
+        protyleHljsStyle.remove();
+        addStyle(href, "protyleHljsStyle");
+    }
+};

app/src/util/onGetConfig.ts

@@ -15,7 +15,7 @@ import {globalShortcut} from "./globalShortcut";
 import {fetchPost} from "./fetch";
 import {mountHelp, newDailyNote} from "./mount";
 import {MenuItem} from "../menus/Menu";
-import {initAssets, loadAssets, setInlineStyle} from "./assets";
+import {initAssets, loadAssets, renderSnippet, setInlineStyle} from "./assets";
 import {goBack, goForward} from "./backForward";
 import {getOpenNotebookCount} from "./pathName";
 import {openFileById} from "../editor/util";
@@ -146,6 +146,7 @@ export const onGetConfig = (isStart: boolean) => {
     initWindow();
     appearance.onSetappearance(window.siyuan.config.appearance, isBrowser());
     initAssets();
+    renderSnippet();
     setInlineStyle();
     let resizeTimeout = 0;
     window.addEventListener("resize", () => {