From 7bae6d487df0dcd17889f9bd1e6d795eca788881 Mon Sep 17 00:00:00 2001 From: klarkxy <278370456@qq.com> Date: Sat, 11 Apr 2026 19:09:28 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E6=B7=BB=E5=8A=A0=E6=B5=81?= =?UTF-8?q?=E7=A8=8B=E5=9B=BE=E5=92=8C=E7=94=98=E7=89=B9=E5=9B=BE=E7=9A=84?= =?UTF-8?q?=E5=AD=97=E4=BD=93=E6=A0=B7=E5=BC=8F=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/include/vditor-adapter.js | 5 +++-- web/include/vditor/dist/index.js | 18 ++++++++++++++---- .../vditor/src/ts/markdown/flowchartRender.ts | 11 +++++++++-- .../vditor/src/ts/markdown/mermaidRender.ts | 10 +++++++--- 4 files changed, 33 insertions(+), 11 deletions(-) diff --git a/web/include/vditor-adapter.js b/web/include/vditor-adapter.js index 250f361..e493d12 100644 --- a/web/include/vditor-adapter.js +++ b/web/include/vditor-adapter.js @@ -39,6 +39,7 @@ '.hustoj-vditor-hidden{display:none !important;}', '.hustoj-vditor-wrapper{width:100%;margin:0 0 12px;}', '.hustoj-vditor-code{--hustoj-vditor-font-size:18px;text-align:left;}', + '.hustoj-vditor-preview{--hustoj-diagram-font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Source Han Sans SC","WenQuanYi Micro Hei",Arial,sans-serif;--hustoj-diagram-font-size:14px;}', '.hustoj-vditor-code .vditor-toolbar{display:none !important;}', '.hustoj-vditor-code .vditor-reset,', '.hustoj-vditor-code .vditor-content,', @@ -70,7 +71,7 @@ '.hustoj-vditor-preview .vditor-reset .language-mermaid .label div,', '.hustoj-vditor-preview .vditor-reset .language-flowchart .label div,', '.hustoj-vditor-preview .vditor-reset .language-mermaid .edgeLabel,', - '.hustoj-vditor-preview .vditor-reset .language-flowchart .edgeLabel{white-space:normal !important;line-height:1.4 !important;}', + '.hustoj-vditor-preview .vditor-reset .language-flowchart .edgeLabel{font-family:var(--hustoj-diagram-font-family) !important;font-size:var(--hustoj-diagram-font-size) !important;white-space:normal !important;line-height:1.4 !important;}', '.hustoj-vditor-preview .vditor-reset .language-mermaid .nodeLabel,', '.hustoj-vditor-preview .vditor-reset .language-flowchart .nodeLabel,', '.hustoj-vditor-preview .vditor-reset .language-mermaid .nodeLabel *,', @@ -78,7 +79,7 @@ '.hustoj-vditor-preview .vditor-reset .language-mermaid svg text,', '.hustoj-vditor-preview .vditor-reset .language-mermaid svg tspan,', '.hustoj-vditor-preview .vditor-reset .language-flowchart svg text,', - '.hustoj-vditor-preview .vditor-reset .language-flowchart svg tspan{font-family:"Cascadia Mono","JetBrains Mono",Consolas,"Noto Sans SC","Microsoft YaHei",sans-serif !important;font-variant-ligatures:none;letter-spacing:0.01em;text-rendering:geometricPrecision;}', + '.hustoj-vditor-preview .vditor-reset .language-flowchart svg tspan{font-family:var(--hustoj-diagram-font-family) !important;font-size:var(--hustoj-diagram-font-size) !important;font-variant-ligatures:none;text-rendering:geometricPrecision;}', '.hustoj-vditor-preview .vditor-reset .language-mermaid .nodeLabel p,', '.hustoj-vditor-preview .vditor-reset .language-flowchart .nodeLabel p{margin:0;line-height:1.4 !important;}' ].join(''); diff --git a/web/include/vditor/dist/index.js b/web/include/vditor/dist/index.js index a9ddf99..eccd8de 100644 --- a/web/include/vditor/dist/index.js +++ b/web/include/vditor/dist/index.js @@ -2817,6 +2817,14 @@ var plantumlRenderAdapter = { /* harmony import */ var _adapterRender__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(781); /* harmony import */ var _util_function__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(446); var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) { + +var FLOWCHART_DIAGRAM_FONT_FAMILY = '"Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei", Arial, sans-serif'; +var FLOWCHART_DIAGRAM_OPTIONS = { + "font-family": FLOWCHART_DIAGRAM_FONT_FAMILY, + "font-size": 14, + "font-weight": "normal" +}; + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } return new (P || (P = Promise))(function (resolve, reject) { function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } @@ -2997,7 +3005,7 @@ var flowchartRender = function (element, cdn) { } var flowchartObj = flowchart.parse(_adapterRender__WEBPACK_IMPORTED_MODULE_1__.flowchartRenderAdapter.getCode(item)); item.innerHTML = ""; - flowchartObj.drawSVG(item); + flowchartObj.drawSVG(item, FLOWCHART_DIAGRAM_OPTIONS); item.setAttribute("data-processed", "true"); }); }); @@ -3533,13 +3541,15 @@ var mermaidRender = function (element, cdn, theme) { return; } (0,_util_addScript__WEBPACK_IMPORTED_MODULE_2__/* .addScript */ .G)("".concat(cdn, "/dist/js/mermaid/mermaid.min.js"), "vditorMermaidScript").then(function () { + var mermaidFontFamily = '"Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei", Arial, sans-serif'; var config = { securityLevel: "loose", - altFontFamily: "sans-serif", - fontFamily: "sans-serif", + altFontFamily: mermaidFontFamily, + fontFamily: mermaidFontFamily, + fontSize: "14px", startOnLoad: false, flowchart: { - htmlLabels: true, + htmlLabels: false, useMaxWidth: !0 }, sequence: { diff --git a/web/include/vditor/src/ts/markdown/flowchartRender.ts b/web/include/vditor/src/ts/markdown/flowchartRender.ts index e0b1b4a..34a2687 100644 --- a/web/include/vditor/src/ts/markdown/flowchartRender.ts +++ b/web/include/vditor/src/ts/markdown/flowchartRender.ts @@ -2,8 +2,15 @@ import {Constants} from "../constants"; import {addScript} from "../util/addScript"; import {flowchartRenderAdapter} from "./adapterRender"; +const FLOWCHART_FONT_FAMILY = '"Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei", Arial, sans-serif'; +const FLOWCHART_RENDER_OPTIONS: Record = { + "font-family": FLOWCHART_FONT_FAMILY, + "font-size": 14, + "font-weight": "normal", +}; + declare const flowchart: { - parse(text: string): { drawSVG: (type: HTMLElement) => void }; + parse(text: string): { drawSVG: (type: HTMLElement, options?: Record) => void }; }; export const flowchartRender = (element: HTMLElement, cdn = Constants.CDN) => { @@ -18,7 +25,7 @@ export const flowchartRender = (element: HTMLElement, cdn = Constants.CDN) => { } const flowchartObj = flowchart.parse(flowchartRenderAdapter.getCode(item)); item.innerHTML = ""; - flowchartObj.drawSVG(item); + flowchartObj.drawSVG(item, FLOWCHART_RENDER_OPTIONS); item.setAttribute("data-processed", "true"); }); }); diff --git a/web/include/vditor/src/ts/markdown/mermaidRender.ts b/web/include/vditor/src/ts/markdown/mermaidRender.ts index f3ce151..8ab543e 100644 --- a/web/include/vditor/src/ts/markdown/mermaidRender.ts +++ b/web/include/vditor/src/ts/markdown/mermaidRender.ts @@ -3,6 +3,9 @@ import {addScript} from "../util/addScript"; import {mermaidRenderAdapter} from "./adapterRender"; import {genUUID} from "../util/function"; +const MERMAID_FONT_FAMILY = '"Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei", Arial, sans-serif'; +const MERMAID_FONT_SIZE = "14px"; + declare const mermaid: { initialize(options: any): void, render(id: string, text: string): { svg: string } @@ -16,11 +19,12 @@ export const mermaidRender = (element: HTMLElement, cdn = Constants.CDN, theme: addScript(`${cdn}/dist/js/mermaid/mermaid.min.js`, "vditorMermaidScript").then(() => { const config: any = { securityLevel: "loose", // 升级后无 https://github.com/siyuan-note/siyuan/issues/3587，可使用该选项 - altFontFamily: "sans-serif", - fontFamily: "sans-serif", + altFontFamily: MERMAID_FONT_FAMILY, + fontFamily: MERMAID_FONT_FAMILY, + fontSize: MERMAID_FONT_SIZE, startOnLoad: false, flowchart: { - htmlLabels: true, + htmlLabels: false, useMaxWidth: !0 }, sequence: {