klarkxy/hustoj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat: 优化代码编辑器样式和增强预览功能

Browse Source
This commit is contained in:
klarkxy
2026-04-10 20:45:24 +08:00
parent 96b9eb57e2
commit 5baab4da11
3 changed files with 157 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
web/include/vditor-adapter.js
View File

@@ -38,11 +38,12 @@
style.textContent = [
'.hustoj-vditor-hidden{display:none !important;}',
'.hustoj-vditor-wrapper{width:100%;margin:0 0 12px;}',
'.hustoj-vditor-code{--hustoj-vditor-font-size:18px;}',
'.hustoj-vditor-code{--hustoj-vditor-font-size:18px;text-align:left;}',
'.hustoj-vditor-code .vditor-toolbar{display:none !important;}',
'.hustoj-vditor-code .vditor-reset,',
'.hustoj-vditor-code .vditor-content,',
'.hustoj-vditor-code textarea{font-family:Consolas,Monaco,"Courier New",monospace !important;font-size:var(--hustoj-vditor-font-size) !important;line-height:1.5 !important;}',
'.hustoj-vditor-code .vditor,',
'.hustoj-vditor-code textarea{text-align:left !important;font-family:Consolas,Monaco,"Courier New",monospace !important;font-size:var(--hustoj-vditor-font-size) !important;line-height:1.5 !important;}',
'.hustoj-vditor-code .vditor-sv,',
'.hustoj-vditor-code .vditor-ir{min-height:100%;}',
'.hustoj-vditor-dark .vditor{background:#272822;border-color:#4a4a4a;}',
@@ -51,7 +52,35 @@
'.hustoj-vditor-dark textarea{color:#f8f8f2 !important;background:#272822 !important;}',
'.hustoj-vditor-dark .vditor-toolbar svg{fill:#f8f8f2;}',
'.hustoj-vditor-mail .vditor-toolbar{border-bottom:1px solid #ddd;}',
'.hustoj-vditor-mail .vditor{height:100%;min-height:180px;}'
'.hustoj-vditor-mail .vditor{height:100%;min-height:180px;}',
'.hustoj-vditor-preview .vditor-reset pre{position:relative;margin:16px 0;padding:16px 18px;border:1px solid #cfd7e6;border-radius:12px;background:linear-gradient(180deg,#f9fbff 0%,#f3f7ff 100%);box-shadow:0 8px 20px rgba(15,23,42,0.06);}',
'.hustoj-vditor-preview .vditor-reset pre code{display:block;font-size:15px;line-height:1.7;}',
'.hustoj-vditor-preview .vditor-copy{display:block !important;position:absolute;top:12px;right:12px;z-index:2;}',
'.hustoj-vditor-preview .vditor-copy span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #c8d3e6;border-radius:999px;background:rgba(255,255,255,0.96);box-shadow:0 4px 12px rgba(15,23,42,0.08);font-size:12px;font-weight:600;color:#2f4f7f;}',
'.hustoj-vditor-preview .vditor-copy span::after{content:attr(aria-label);}',
'.hustoj-vditor-preview .vditor-copy svg{width:14px !important;height:14px !important;color:currentColor;}',
'.hustoj-vditor-preview .vditor-reset .language-mermaid,',
'.hustoj-vditor-preview .vditor-reset .language-flowchart{margin:18px 0;padding:14px;border:1px solid #d7dce5;border-radius:12px;background:#fff;overflow:auto;text-align:center;}',
'.hustoj-vditor-preview .vditor-reset .language-mermaid svg,',
'.hustoj-vditor-preview .vditor-reset .language-flowchart svg{display:block;max-width:100%;height:auto !important;overflow:visible;}',
'.hustoj-vditor-preview .vditor-reset .language-mermaid foreignObject,',
'.hustoj-vditor-preview .vditor-reset .language-flowchart foreignObject,',
'.hustoj-vditor-preview .vditor-reset .language-mermaid .label,',
'.hustoj-vditor-preview .vditor-reset .language-flowchart .label{overflow:visible;}',
'.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-mermaid .nodeLabel,',
'.hustoj-vditor-preview .vditor-reset .language-flowchart .nodeLabel,',
'.hustoj-vditor-preview .vditor-reset .language-mermaid .nodeLabel *,',
'.hustoj-vditor-preview .vditor-reset .language-flowchart .nodeLabel *,',
'.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-mermaid .nodeLabel p,',
'.hustoj-vditor-preview .vditor-reset .language-flowchart .nodeLabel p{margin:0;line-height:1.4 !important;}'
].join('');
documentRef.head.appendChild(style);
styleInjected = true;
@@ -339,6 +368,44 @@
return previewOptions;
}
function decorateRenderedPreview(element) {
if (!element || !element.classList) {
return;
}
element.classList.add('hustoj-vditor-preview');
Array.prototype.forEach.call(
element.querySelectorAll('.language-mermaid, .language-flowchart'),
function (diagramContainer) {
Array.prototype.forEach.call(diagramContainer.querySelectorAll('svg'), function (svgElement) {
svgElement.style.maxWidth = '100%';
svgElement.style.height = 'auto';
svgElement.style.overflow = 'visible';
});
Array.prototype.forEach.call(
diagramContainer.querySelectorAll('foreignObject, .label, .label div, .edgeLabel, .nodeLabel, .nodeLabel p'),
function (node) {
if (node.tagName === 'FOREIGNOBJECT') {
node.style.overflow = 'visible';
}
if (node.tagName === 'DIV' || node.tagName === 'SPAN') {
node.style.whiteSpace = 'normal';
}
if (node.tagName === 'P') {
node.style.margin = '0';
node.style.lineHeight = '1.4';
}
if (node.classList && node.classList.contains('nodeLabel')) {
node.style.lineHeight = '1.4';
}
}
);
}
);
}
function renderMarkdownBlocks(target, options) {
var renderOptions = options || {};
@@ -355,6 +422,7 @@
tasks.push(new Promise(function (resolve, reject) {
var previewOptions = buildPreviewOptions(renderOptions, function () {
decorateRenderedPreview(element);
if (typeof renderOptions.afterEach === 'function') {
renderOptions.afterEach(element, source);
}