fix(docs): restore playground output as Prism-highlighted HTML

Co-authored-by: Cursor <[email protected]>

docs/themes/navy/layout/partial/after_footer.swig

@@ -5,6 +5,8 @@
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min/mode-json.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/src-min/mode-html.js"></script>
 <script>ace.config.set('basePath', 'https://cdn.jsdelivr.net/npm/[email protected]/src-min/');</script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-markup.min.js"></script>
 {% endif %}
 
 {{ js('js/main') }}

docs/themes/navy/layout/playground.swig

@@ -34,7 +34,9 @@
             <h2>Output</h2>
           </div>
           <div class="pane-body">
-            <div class="editor output-editor" id="previewEl"></div>
+            <div class="output-preview" id="previewEl">
+              <pre class="highlight"><code class="language-markup" id="previewCode">{{__('playground.loading')}}</code></pre>
+            </div>
           </div>
         </div>
       </div>

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

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');