feat(docs): show playground output as Prism-highlighted HTML code

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

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/[email protected]/src-min/ace.js"></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

@@ -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>