Add feature to display the template output on the pattern view

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- Add HTML rendered code view in `Template output` column
+
 ## [1.5.0](https://github.com/torchbox/django-pattern-library/releases/tag/v1.5.0) - 2025-04-08
 
 ### Added

CONTRIBUTING.md

@@ -28,15 +28,15 @@ Once the container is built, open a terminal with VS Code and run `django-admin
 
 ### `docker-compose`
 
-First [install Docker and docker-compose](https://docs.docker.com/compose/install/), and make sure Docker is started. Then:
+First [install Docker and docker compose](https://docs.docker.com/compose/install/), and make sure Docker is started. Then:
 
 ```sh
 # Install the front-end tooling in the docker container:
-docker-compose run frontend npm ci
+docker compose run frontend npm ci
 # Bring up the web container and run the front-end tooling in watch mode:
-docker-compose up
+docker compose up
 # Run the development server:
-docker-compose exec web django-admin runserver 0.0.0.0:8000
+docker compose exec web django-admin runserver 0.0.0.0:8000
 ```
 
 Once the server is started, the pattern library will be available at `http://localhost:8000/`.

Dockerfile

@@ -19,4 +19,6 @@ RUN pip install --user "poetry>=2.1.2,<3" && \
 COPY pyproject.toml ./
 RUN poetry install --no-root
 
+COPY tests/ ./tests/
+
 CMD django-admin runserver 0.0.0.0:8000

docker-compose.yml

@@ -7,6 +7,8 @@ services:
       PYTHONDONTWRITEBYTECODE: 1
     ports:
       - "8000:8000"
+    stdin_open: true
+    tty: true
     volumes:
       - type: bind
         source: .

pattern_library/monkey_utils.py

@@ -126,7 +126,7 @@ def node_render(context):
 
 def override_jinja_tags():
     """
-    Experimental. Overrides jinja extends and include tags for use in your pattern library.
+    Overrides jinja extends and include tags for use in your pattern library.
     Call it in your settings to override tags
     """
     global jinja_visit_Extends

pattern_library/static/pattern_library/src/js/app.js

@@ -1,13 +1,13 @@
-import '../scss/main.scss';
-import persistMenu from './components/persist-menu';
-import patternSearch from './components/pattern-search';
-import tabbedContent from './components/tabbed-content';
-import syntaxHighlighting from './components/syntax-highlighting';
-import hideMenuMobile from './components/hide-menu-mobile';
-import {setIframeSize, resizeIframe} from './components/iframe';
-import {toggleNav, toggleNavItems} from './components/navigation';
+import "../scss/main.scss";
+import persistMenu from "./components/persist-menu";
+import patternSearch from "./components/pattern-search";
+import tabbedContent from "./components/tabbed-content";
+import syntaxHighlighting from "./components/syntax-highlighting";
+import hideMenuMobile from "./components/hide-menu-mobile";
+import { setIframeSize, resizeIframe } from "./components/iframe";
+import { toggleNav, toggleNavItems } from "./components/navigation";
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener("DOMContentLoaded", () => {
     syntaxHighlighting();
     toggleNavItems();
     resizeIframe();

pattern_library/static/pattern_library/src/js/components/syntax-highlighting.js

@@ -1,9 +1,13 @@
-import hljs from 'highlight.js/lib/core';
-import django from 'highlight.js/lib/languages/django';
-import yaml from 'highlight.js/lib/languages/yaml';
+import hljs from "highlight.js/lib/core";
+import django from "highlight.js/lib/languages/django";
+import yaml from "highlight.js/lib/languages/yaml";
+import md from "highlight.js/lib/languages/markdown";
+import xml from "highlight.js/lib/languages/xml";
 
-export default function() {
-    hljs.registerLanguage('django', django);
-    hljs.registerLanguage('yaml', yaml);
+export default function () {
+    hljs.registerLanguage("django", django);
+    hljs.registerLanguage("yaml", yaml);
+    hljs.registerLanguage("md", md);
+    hljs.registerLanguage("xml", xml);
     hljs.highlightAll();
 }

pattern_library/templates/pattern_library/index.html

@@ -27,13 +27,19 @@ <h4 class="heading heading--iframe-size js-iframe-size">
                 <li class="tabbed-content__heading tabbed-content__heading--active">
                     <a href="#tab-1">Template source</a>
                 </li>
+
                 <li class="tabbed-content__heading">
                     <a href="#tab-2">Template config</a>
                 </li>
 
                 <li class="tabbed-content__heading">
-                    <a href="#tab-3">Template docs</a>
+                    <a href="#tab-3">Template output</a>
+                </li>
+
+                <li class="tabbed-content__heading">
+                    <a href="#tab-4">Template docs</a>
                 </li>
+
             </ul>
 
             <div class="tabbed-content__tabs">
@@ -46,6 +52,10 @@ <h4 class="heading heading--iframe-size js-iframe-size">
                 </div>
 
                 <div id="tab-3" class="tabbed-content__item">
+                    <pre><code class="code xml">{{ pattern_html_source }}</code></pre>
+                </div>
+
+                <div id="tab-4" class="tabbed-content__item">
                     <div class="md">{{ pattern_markdown|safe }}</div>
                 </div>
             </div>

pattern_library/views.py

@@ -1,14 +1,17 @@
 import json
 
 from django.http import Http404, HttpResponse
-from django.template.loader import get_template
+from django.template.loader import get_template, render_to_string
 from django.utils.decorators import method_decorator
 from django.utils.html import escape
 from django.utils.safestring import mark_safe
 from django.views.decorators.clickjacking import xframe_options_sameorigin
 from django.views.decorators.csrf import csrf_exempt
 from django.views.generic.base import TemplateView
 
+from bs4 import BeautifulSoup
+from bs4.formatter import HTMLFormatter
+
 from pattern_library import get_base_template_names, get_pattern_base_template_name
 from pattern_library.exceptions import PatternLibraryEmpty, TemplateIsNotPattern
 from pattern_library.utils import (
@@ -72,6 +75,18 @@ def get(self, request, pattern_template_name=None):
         context["pattern_config"] = escape(
             get_pattern_config_str(pattern_template_name)
         )
+        template_context = get_pattern_context(pattern_template_name)
+        try:
+            soup = BeautifulSoup(
+                render_to_string(
+                    pattern_template_name, template_context, request=request
+                ),
+                "html.parser",
+            )
+            formatter = HTMLFormatter(indent=4)
+            context["pattern_html_source"] = escape(soup.prettify(formatter=formatter))
+        except Exception as e:
+            context["pattern_html_source"] = f"Error rendering pattern: {e}"
         context["pattern_name"] = pattern_config.get("name", pattern_template_name)
         context["pattern_markdown"] = get_pattern_markdown(pattern_template_name)