🎨 fix https://github.com/siyuan-note/siyuan/issues/5682

app/appearance/langs/en_US.json

@@ -1,6 +1,6 @@
 {
   "katexMacros": "KaTex macro definition",
-  "katexMacrosTip": "Please use JSON object format (<code>{}</code>) to wrap macro definitions, eg <code>{ \\def\\foo{x^2} \\foo + \\foo }</code>",
+  "katexMacrosTip": "Please use JSON object format (<code class='fn__code'>{}</code>) to wrap macro definitions, eg <code class='fn__code'>{ \"\\\\foo\": \"{x^2}\" }</code>",
   "systemLogTip": "Program running records are saved in the system log. By exporting the system log and sending it to developers, it can better help developers diagnose program problems",
   "systemLog": "System log",
   "copyInsertAsAssets": "Copy as asset and insert",

app/appearance/langs/es_ES.json

@@ -1,6 +1,6 @@
 {
   "katexMacros": "Definición de macro de KaTex",
-  "katexMacrosTip": "Utilice el formato de objeto JSON (<code>{}</code>) para envolver definiciones de macro, por ejemplo, <code>{ \\def\\foo{x^2} \\foo + \\foo }</code>",
+  "katexMacrosTip": "Utilice el formato de objeto JSON (<code class='fn__code'>{}</code>) para envolver definiciones de macro, por ejemplo, <code class='fn__code'>{ \"\\\\foo\": \"{x^2}\" }</code>",
   "systemLogTip": "Los registros de ejecución del programa se guardan en el registro del sistema. Al exportar el registro del sistema y enviarlo a los desarrolladores, puede ayudarlos a diagnosticar mejor los problemas del programa",
   "systemLog": "Registro del sistema",
   "copyInsertAsAssets": "Copiar como archivo de activos e insertar",

app/appearance/langs/fr_FR.json

@@ -1,6 +1,6 @@
 {
   "katexMacros": "Définition de la macro KaTex",
-  "katexMacrosTip": "Veuillez utiliser le format d'objet JSON (<code>{}</code>) pour envelopper les définitions de macro, par exemple <code>{ \\def\\foo{x^2} \\foo + \\foo }</code>",
+  "katexMacrosTip": "Veuillez utiliser le format d'objet JSON (<code class='fn__code'>{}</code>) pour envelopper les définitions de macro, par exemple <code class='fn__code'>{ \"\\\\foo\": \"{x^2}\" }</code>",
   "systemLogTip": "Les enregistrements en cours d'exécution du programme sont enregistrés dans le journal système. En exportant le journal système et en l'envoyant aux développeurs, cela peut mieux aider les développeurs à diagnostiquer les problèmes du programme",
   "systemLog": "Journal du système",
   "copyInsertAsAssets": "Copier en tant que fichier d'actif et insérer",

app/appearance/langs/zh_CHT.json

@@ -1,6 +1,6 @@
 {
   "katexMacros": "KaTex 宏定義",
-  "katexMacrosTip": "請使用 JSON 對象格式（<code>{}</code>）來包裹宏定義，例如 <code>{ \\def\\foo{x^2} \\foo + \\foo }</code>",
+  "katexMacrosTip": "請使用 JSON 對象格式（<code class='fn__code'>{}</code>）來包裹宏定義，例如 <code class='fn__code'>{ \"\\\\foo\": \"{x^2}\" }</code>",
   "systemLogTip": "系統日誌中保存了程序運行記錄，通過導出系統日誌發送給開發者可以更好地幫助開發者診斷程序問題",
   "systemLog": "系統日誌",
   "copyInsertAsAssets": "複製為資源文件並插入",

app/appearance/langs/zh_CN.json

@@ -1,6 +1,6 @@
 {
   "katexMacros": "KaTex 宏定义",
-  "katexMacrosTip": "请使用 JSON 对象格式（<code>{}</code>）来包裹宏定义，例如 <code>{ \\def\\foo{x^2} \\foo + \\foo }</code>",
+  "katexMacrosTip": "请使用 JSON 对象格式（<code class='fn__code'>{}</code>）来包裹宏定义，例如 <code class='fn__code'>{ \"\\\\foo\": \"{x^2}\" }</code>",
   "systemLogTip": "系统日志中保存了程序运行记录，通过导出系统日志发送给开发者可以更好地帮助开发者诊断程序问题",
   "systemLog": "系统日志",
   "copyInsertAsAssets": "复制为资源文件并插入",

app/src/config/editor.ts

@@ -57,14 +57,6 @@ export const editor = {
     <span class="fn__space"></span>
     <input class="b3-switch fn__flex-center" id="codeSyntaxHighlightLineNum" type="checkbox"${window.siyuan.config.editor.codeSyntaxHighlightLineNum ? " checked" : ""}/>
 </label>
-<label class="fn__flex b3-label">
-    <div class="fn__flex-1">
-        ${window.siyuan.languages.md39}
-        <div class="b3-label__text">${window.siyuan.languages.md40}</div>
-    </div>
-    <span class="fn__space"></span>
-    <input class="b3-text-field fn__flex-center fn__size200" id="plantUMLServePath" value="${window.siyuan.config.editor.plantUMLServePath}"/>
-</label>
 <label class="fn__flex b3-label">
     <div class="fn__flex-1">
         ${window.siyuan.languages.md33}
@@ -83,31 +75,11 @@ export const editor = {
 </label>
 <label class="fn__flex b3-label">
     <div class="fn__flex-1">
-        ${window.siyuan.languages.md29}
-        <div class="b3-label__text">${window.siyuan.languages.md30}</div>
+        ${window.siyuan.languages.md39}
+        <div class="b3-label__text">${window.siyuan.languages.md40}</div>
     </div>
     <span class="fn__space"></span>
-    <div class="b3-tooltips b3-tooltips__n fn__flex-center" aria-label="${window.siyuan.config.editor.codeTabSpaces}">   
-        <input class="b3-slider fn__size200" id="codeTabSpaces" max="8" min="0" step="2" type="range" value="${window.siyuan.config.editor.codeTabSpaces}">
-    </div>
-</label>
-<label class="fn__flex b3-label">
-    <div class="fn__flex-1">
-        ${window.siyuan.languages.fontSize}
-        <div class="b3-label__text">${window.siyuan.languages.fontSizeTip}</div>
-    </div>
-    <span class="fn__space"></span>
-    <div class="b3-tooltips b3-tooltips__n fn__flex-center" aria-label="${window.siyuan.config.editor.fontSize}">   
-        <input class="b3-slider fn__size200" id="fontSize" max="72" min="9" step="1" type="range" value="${window.siyuan.config.editor.fontSize}">
-    </div>
-</label>
-<label class="fn__flex b3-label">
-    <div class="fn__flex-1">
-        ${window.siyuan.languages.font}
-        <div class="b3-label__text">${window.siyuan.languages.font1}</div>
-    </div>
-    <span class="fn__space"></span>
-    ${fontFamilyHTML}
+    <input class="b3-text-field fn__flex-center fn__size200" id="plantUMLServePath" value="${window.siyuan.config.editor.plantUMLServePath}"/>
 </label>
 <label class="fn__flex b3-label">
     <div class="fn__flex-1">
@@ -133,7 +105,41 @@ export const editor = {
     </div>
     <span class="fn__space"></span>
     <input class="b3-text-field fn__flex-center fn__size200" id="historyRetentionDays" type="number" min="0" max="120" value="${window.siyuan.config.editor.historyRetentionDays}"/>
-</label>`;
+</label>
+<label class="fn__flex b3-label">
+    <div class="fn__flex-1">
+        ${window.siyuan.languages.font}
+        <div class="b3-label__text">${window.siyuan.languages.font1}</div>
+    </div>
+    <span class="fn__space"></span>
+    ${fontFamilyHTML}
+</label>
+<label class="fn__flex b3-label">
+    <div class="fn__flex-1">
+        ${window.siyuan.languages.fontSize}
+        <div class="b3-label__text">${window.siyuan.languages.fontSizeTip}</div>
+    </div>
+    <span class="fn__space"></span>
+    <div class="b3-tooltips b3-tooltips__n fn__flex-center" aria-label="${window.siyuan.config.editor.fontSize}">   
+        <input class="b3-slider fn__size200" id="fontSize" max="72" min="9" step="1" type="range" value="${window.siyuan.config.editor.fontSize}">
+    </div>
+</label>
+<label class="fn__flex b3-label">
+    <div class="fn__flex-1">
+        ${window.siyuan.languages.md29}
+        <div class="b3-label__text">${window.siyuan.languages.md30}</div>
+    </div>
+    <span class="fn__space"></span>
+    <div class="b3-tooltips b3-tooltips__n fn__flex-center" aria-label="${window.siyuan.config.editor.codeTabSpaces}">   
+        <input class="b3-slider fn__size200" id="codeTabSpaces" max="8" min="0" step="2" type="range" value="${window.siyuan.config.editor.codeTabSpaces}">
+    </div>
+</label>
+<div class="b3-label">
+    ${window.siyuan.languages.katexMacros}
+    <div class="b3-label__text">${window.siyuan.languages.katexMacrosTip}</div>
+    <div class="fn__hr"></div>
+    <textarea class="b3-text-field fn__block" id="katexMacros">${window.siyuan.config.editor.katexMacros}</textarea>
+</div>`;
     },
     bindEvent: () => {
         const fontFamilyElement = editor.element.querySelector("#fontFamily") as HTMLSelectElement;
@@ -159,6 +165,7 @@ export const editor = {
                 displayNetImgMark: (editor.element.querySelector("#displayNetImgMark") as HTMLInputElement).checked,
                 codeSyntaxHighlightLineNum: (editor.element.querySelector("#codeSyntaxHighlightLineNum") as HTMLInputElement).checked,
                 plantUMLServePath: (editor.element.querySelector("#plantUMLServePath") as HTMLInputElement).value,
+                katexMacros: (editor.element.querySelector("#katexMacros") as HTMLTextAreaElement).value,
                 codeLineWrap: (editor.element.querySelector("#codeLineWrap") as HTMLInputElement).checked,
                 virtualBlockRef: (editor.element.querySelector("#virtualBlockRef") as HTMLInputElement).checked,
                 virtualBlockRefExclude: (editor.element.querySelector("#virtualBlockRefExclude") as HTMLInputElement).value,
@@ -179,7 +186,7 @@ export const editor = {
                 setEditor();
             });
         });
-        editor.element.querySelectorAll("input.b3-text-field, input.b3-slider").forEach((item) => {
+        editor.element.querySelectorAll("textarea.b3-text-field, input.b3-text-field, input.b3-slider").forEach((item) => {
             item.addEventListener("blur", () => {
                 setEditor();
             });

app/src/config/search.ts

@@ -12,9 +12,9 @@ export const initConfigSearch = (element: HTMLElement) => {
     const configIndex = [
         // 编辑器
         getLang(["config", "fullWidth",
-            "editor", "md2", "md3", "md12", "md16", "md27", "md28", "md29", "md30", "md31", "md32", "md33", "md34", "md39",
+            "editor", "md2", "md3", "md12", "md16", "md27", "md28", "md29", "md30", "md31", "md32", "md33", "md34", "md39", "md40",
             "fontSizeTip", "fontSize", "font", "font1", "generateHistory", "generateHistoryInterval",
-            "historyRetentionDays", "historyRetentionDaysTip", "clearHistory"
+            "historyRetentionDays", "historyRetentionDaysTip", "clearHistory", "katexMacros", "katexMacrosTip"
         ]),
 
         // 文档树
@@ -64,7 +64,7 @@ export const initConfigSearch = (element: HTMLElement) => {
         // 关于
         getLang(["about", "about1", "about2", "about3", "about4", "about5", "about6", "about7", "about8",
             "about11", "about12", "about13", "about14", "about15", "about16",
-            "slogan", "currentVer", "checkUpdate", "updatePath", "snapshotPassword"]),
+            "slogan", "currentVer", "checkUpdate", "updatePath", "snapshotPassword", "systemLog"]),
     ];
     const inputElement = element.querySelector(".b3-form__icon input") as HTMLInputElement;
     if (window.siyuan.config.system.container !== "ios") {

app/src/protyle/markdown/mathRender.ts

@@ -8,6 +8,7 @@ declare const katex: {
     renderToString(math: string, option: {
         displayMode: boolean;
         output: string;
+        macros: IObject
     }): string;
 };
 
@@ -34,10 +35,17 @@ export const mathRender = (element: Element, cdn = Constants.PROTYLE_CDN, maxWid
                 if (mathElement.tagName === "DIV") {
                     renderElement = mathElement.firstElementChild as HTMLElement;
                 }
+                let macros = {};
+                try {
+                    macros = JSON.parse(window.siyuan.config.editor.katexMacros || "{}")
+                } catch (e) {
+                    console.warn("KaTex macros is not JSON", e);
+                }
                 try {
                     renderElement.innerHTML = katex.renderToString(Lute.UnEscapeHTMLStr(mathElement.getAttribute("data-content")), {
                         displayMode: mathElement.tagName === "DIV",
                         output: "html",
+                        macros
                     });
                     renderElement.classList.remove("ft__error");
                     const blockElement = hasClosestBlock(mathElement);

app/src/types/index.d.ts

@@ -202,6 +202,7 @@ declare interface IExport {
 }
 
 declare interface IEditor {
+    katexMacros: string;
     fullWidth: boolean;
     fontSize: number;
     generateHistoryInterval: number;