From d43589bf46a5614f5667d9a3e1616d3606df0b3c Mon Sep 17 00:00:00 2001 From: Yang Jun Date: Tue, 23 Jun 2026 14:34:26 +0800 Subject: [PATCH] fix(docs): restore playground output as Prism-highlighted HTML Co-authored-by: Cursor --- .../navy/layout/partial/after_footer.swig | 2 + docs/themes/navy/layout/playground.swig | 4 +- .../navy/source/css/_partial/playground.styl | 50 +++++++++++++++---- docs/themes/navy/source/js/main.js | 26 +++++----- 4 files changed, 59 insertions(+), 23 deletions(-) diff --git a/docs/themes/navy/layout/partial/after_footer.swig b/docs/themes/navy/layout/partial/after_footer.swig index 77d091c46..111d0c520 100644 --- a/docs/themes/navy/layout/partial/after_footer.swig +++ b/docs/themes/navy/layout/partial/after_footer.swig @@ -5,6 +5,8 @@ + + {% endif %} {{ js('js/main') }} diff --git a/docs/themes/navy/layout/playground.swig b/docs/themes/navy/layout/playground.swig index 6aad969d6..c7f1ef3e4 100644 --- a/docs/themes/navy/layout/playground.swig +++ b/docs/themes/navy/layout/playground.swig @@ -34,7 +34,9 @@

Output

-
+
+ 
{{__('playground.loading')}}
+
diff --git a/docs/themes/navy/source/css/_partial/playground.styl b/docs/themes/navy/source/css/_partial/playground.styl index 7c56b759a..11d9ca349 100644 --- a/docs/themes/navy/source/css/_partial/playground.styl +++ b/docs/themes/navy/source/css/_partial/playground.styl @@ -213,32 +213,26 @@ background: var(--highlight-background) .area-tpl .pane-body, - .area-data .pane-body, - .area-output .pane-body + .area-data .pane-body padding: var(--playground-inset) box-sizing: border-box @media mq-mobile padding: 12px .area-tpl .ace_gutter, - .area-data .ace_gutter, - .area-output .ace_gutter + .area-data .ace_gutter display: none width: 0 min-width: 0 .area-tpl .ace_editor, .area-data .ace_editor, - .area-output .ace_editor, .area-tpl .ace_scroller, .area-data .ace_scroller, - .area-output .ace_scroller, .area-tpl .ace_content, .area-data .ace_content, - .area-output .ace_content, .area-tpl .ace_text-layer, - .area-data .ace_text-layer, - .area-output .ace_text-layer + .area-data .ace_text-layer background: transparent .editor @@ -249,9 +243,45 @@ @media mq-mobile min-height: 180px - .output-editor + .output-preview + flex: 1 1 auto + min-height: 0 + min-width: 0 + width: 100% + overflow: auto @media mq-mobile min-height: 120px + pre.highlight + margin: 0 + min-height: 100% + width: 100% + box-sizing: border-box + padding: var(--playground-inset) + border: none + box-shadow: none + border-radius: 0 + background: transparent + color: var(--highlight-foreground) + overflow-x: hidden + overflow-y: auto + white-space: pre-wrap + overflow-wrap: break-word + @media mq-mobile + padding: 12px + code + display: block + width: 100% + box-sizing: border-box + font-family: font-mono + font-size: 14px + line-height: 1.55 + color: var(--highlight-foreground) + background: transparent + padding: 0 + white-space: inherit + overflow-wrap: inherit + @media mq-mobile + font-size: 13px .ace_editor font-family: font-mono diff --git a/docs/themes/navy/source/js/main.js b/docs/themes/navy/source/js/main.js index abd4484d3..1d4e5eb4c 100644 --- a/docs/themes/navy/source/js/main.js +++ b/docs/themes/navy/source/js/main.js @@ -38,7 +38,7 @@ (function() { // playground - /* global liquidjs, ace */ + /* global liquidjs, ace, Prism */ if (!/\/playground(?:\.html)?$/.test(location.pathname)) return; updateVersion(liquidjs.version); const engine = new liquidjs.Liquid({ @@ -48,13 +48,14 @@ const colorScheme = window.matchMedia('(prefers-color-scheme: dark)'); const editor = createEditor('editorEl', 'liquid'); const dataEditor = createEditor('dataEl', 'json'); - const previewEditor = createEditor('previewEl', 'html', { readOnly: true }); + const previewCode = document.getElementById('previewCode'); const indicatorTpl = document.querySelector('.area-tpl .pane-indicator'); const indicatorData = document.querySelector('.area-data .pane-indicator'); const indicatorOutput = document.querySelector('.area-output .pane-indicator'); - const editors = [editor, dataEditor, previewEditor]; + const editors = [editor, dataEditor]; let previewValue = ''; + let hadPreview = false; let renderTimer = null; const RENDER_DELAY = 180; colorScheme.addEventListener('change', function() { @@ -97,8 +98,7 @@ editor.container.style.background = 'transparent'; } - function createEditor(id, lang, options) { - options = options || {}; + function createEditor(id, lang) { const editor = ace.edit(id); applyEditorTheme(editor); editor.setOptions({ @@ -117,10 +117,6 @@ editor.renderer.$gutter.style.display = 'none'; } editor.renderer.setScrollMargin(0, 0, 0, 0); - if (options.readOnly) { - editor.setReadOnly(true); - editor.getSession().setUseWrapMode(true); - } bindClipboard(editor); return editor; } @@ -179,8 +175,11 @@ function setPreview(value) { previewValue = value; - previewEditor.setValue(value, -1); - previewEditor.clearSelection(); + previewCode.textContent = value; + if (window.Prism) { + delete previewCode.dataset.highlighted; + window.Prism.highlightElement(previewCode); + } } function setIndicator(indicator, state) { @@ -221,7 +220,10 @@ } try { const html = await engine.parseAndRender(tpl, parsed); - setPreview(html); + if (html !== '' || !hadPreview) { + setPreview(html); + if (html !== '') hadPreview = true; + } setIndicator(indicatorTpl, 'idle'); setIndicator(indicatorData, 'idle'); setIndicator(indicatorOutput, 'ok');