diff --git a/docs/themes/navy/layout/partial/after_footer.swig b/docs/themes/navy/layout/partial/after_footer.swig
index e6778541a..4cc27d2c8 100644
--- a/docs/themes/navy/layout/partial/after_footer.swig
+++ b/docs/themes/navy/layout/partial/after_footer.swig
@@ -1,6 +1,8 @@
 {% if page.layout === 'playground' %}
 {{ js('js/liquid.browser.min.js') }}
 <script src="https://cdn.jsdelivr.net/npm/ace-builds@1.22.0/src-min/ace.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-markup.min.js"></script>
 {% endif %}
 
 {{ js('js/main') }}
diff --git a/docs/themes/navy/layout/playground.swig b/docs/themes/navy/layout/playground.swig
index e09cfa1d0..1897d2f5d 100644
--- a/docs/themes/navy/layout/playground.swig
+++ b/docs/themes/navy/layout/playground.swig
@@ -13,7 +13,9 @@
       </div>
       <div class="area-output editor-wrapper">
         <h2>Output</h2>
-        <div class="editor" id="previewEl">{{__('playground.loading')}}</div>
+        <div class="output-preview" id="previewEl">
+          <pre class="highlight"><code class="language-markup" id="previewCode">{{__('playground.loading')}}</code></pre>
+        </div>
       </div>
     </div>
     <p class="inner version"></p>
diff --git a/docs/themes/navy/source/css/_partial/playground.styl b/docs/themes/navy/source/css/_partial/playground.styl
index 953dd1e88..340bb29b4 100644
--- a/docs/themes/navy/source/css/_partial/playground.styl
+++ b/docs/themes/navy/source/css/_partial/playground.styl
@@ -68,6 +68,28 @@
       overflow: hidden
       @media mq-mobile
         min-height: 240px
+    .output-preview
+      flex: 1 1 auto
+      min-height: 0
+      code-block-chrome()
+      overflow: auto
+      pre.highlight
+        margin: 0
+        min-height: 100%
+        padding: 16px
+        border: none
+        box-shadow: none
+        border-radius: 0
+        background: var(--highlight-background)
+        code
+          display: block
+          font-family: font-mono
+          font-size: 14px
+          line-height: 1.5
+          background: transparent
+          padding: 0
+          white-space: pre-wrap
+          word-break: break-word
     .ace_editor
       font-family: font-mono
       font-size: 14px
diff --git a/docs/themes/navy/source/js/main.js b/docs/themes/navy/source/js/main.js
index b113fb27b..4397112da 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 (!location.pathname.match(/playground.html$/)) return;
   updateVersion(liquidjs.version);
   const engine = new liquidjs.Liquid({
@@ -48,12 +48,9 @@
   const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
   const editor = createEditor('editorEl', 'liquid');
   const dataEditor = createEditor('dataEl', 'json');
-  const preview = createEditor('previewEl', 'html');
-  preview.setReadOnly(true);
-  preview.renderer.setShowGutter(false);
-  preview.renderer.setPadding(16);
+  const previewCode = document.getElementById('previewCode');
 
-  const editors = [editor, dataEditor, preview];
+  const editors = [editor, dataEditor];
   colorScheme.addEventListener('change', function() {
     editors.forEach(applyEditorTheme);
   });
@@ -118,15 +115,23 @@
     return utoa(obj.tpl) + ',' + utoa(obj.data);
   }
 
+  function setPreview (value) {
+    previewCode.textContent = value
+    if (window.Prism) {
+      delete previewCode.dataset.highlighted
+      window.Prism.highlightElement(previewCode)
+    }
+  }
+
   async function update() {
     const tpl = editor.getValue();
     const data = dataEditor.getValue();
     history.replaceState({}, '', '#' + serializeArgs({tpl, data}));
     try {
       const html = await engine.parseAndRender(tpl, JSON.parse(data));
-      preview.setValue(html, 1);
+      setPreview(html);
     } catch (err) {
-      preview.setValue(err.stack, 1);
+      setPreview(err.stack);
       throw err;
     }
   }