diff --git a/web/include/vditor-adapter.js b/web/include/vditor-adapter.js index f8b243e..250f361 100644 --- a/web/include/vditor-adapter.js +++ b/web/include/vditor-adapter.js @@ -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); } diff --git a/web/template/syzoj/problem.php b/web/template/syzoj/problem.php index 809db07..e061853 100644 --- a/web/template/syzoj/problem.php +++ b/web/template/syzoj/problem.php @@ -24,14 +24,57 @@ if ($pr_flag) { } .copy { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 68px; font-size: 12px; - color: #4d4d4d; - background-color: white; - padding: 2px 8px; - margin: 8px; - border-radius: 4px; + font-weight: 600; + color: #2f4f7f; + background: rgba(255, 255, 255, 0.96); + padding: 6px 12px; + margin: 0; + border: 1px solid #c8d3e6; + border-radius: 999px; cursor: pointer; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05); + box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08); + } + + .copy:hover { + background: #ffffff; + } + + .sample-header { + display: flex !important; + align-items: center; + justify-content: space-between; + gap: 12px; + } + + .sample-box { + border: 1px solid #cfd7e6 !important; + background: linear-gradient(180deg, #f9fbff 0%, #f3f7ff 100%) !important; + box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06); + } + + .sample-box pre { + margin: 0; + padding: 16px 18px; + overflow: auto; + background: transparent; + } + + .sample-box code { + display: block; + font-family: "Cascadia Mono", "JetBrains Mono", Consolas, "Courier New", monospace; + font-size: 15px; + line-height: 1.7; + } + + .hustoj-md-io-label { + margin: 12px 0 8px; + font-weight: 600; + color: #3d4d66; } @@ -213,12 +256,12 @@ if ($pr_flag) { 0 && $sinput != "\n" || isset($_GET['spa'])) { ?>
-

+

-
+
@@ -229,12 +272,12 @@ if ($pr_flag) { 0 && $soutput != "\n" || isset($_GET['spa'])) { ?>
-

+

-
+
diff --git a/web/template/syzoj/submitpage.php b/web/template/syzoj/submitpage.php index b4da3d0..642a405 100644 --- a/web/template/syzoj/submitpage.php +++ b/web/template/syzoj/submitpage.php @@ -2,9 +2,26 @@