📚 DOCS: Live preview renders theme

The live preview now renders only the body HTML, and inherits the outer theme

Author: chrisjsewell

docs/_static/local.css

@@ -37,17 +37,21 @@ h3::before {
 }
 
 /** No icon for admonitions with no-icon class */
-.admonition > .admonition-title, div.admonition.no-icon > .admonition-title::before {
+div.admonition.no-icon > .admonition-title::before {
     content: "";
 }
-.admonition > .admonition-title, div.admonition.no-icon > .admonition-title {
+div.admonition.no-icon > .admonition-title {
     padding-left: .6rem;
 }
 
 /* Live preview page */
 iframe.pyscript, textarea.pyscript {
     width: 100%;
-    height: 400px;
+    height: 100%;
+    min-height: 300px;
+}
+div.pyscript {
+    min-height: 300px;
 }
 iframe.pyscript {
     padding: 4px;

docs/conf.py

@@ -35,7 +35,8 @@
     "sphinx_design",
     "sphinx_copybutton",
     "sphinxext.rediraffe",
-    "sphinxcontrib.mermaid",
+    # disabled due to https://github.com/mgaitan/sphinxcontrib-mermaid/issues/109
+    # "sphinxcontrib.mermaid",
     "sphinxext.opengraph",
     "sphinx_pyscript",
     "sphinx_tippy",

docs/live-preview.md

@@ -22,14 +22,19 @@ You can edit the text/configuration below and see the live output.[^note]
 ::::::::{grid} 1 1 1 2
 
 :::::::{grid-item}
-:child-align: end
+:child-align: start
 
 ```{raw} html
-<div><u><span id="myst-version"></span></u></div>
+<div><u><span id="myst-version">myst-parser v</span></u></div>
 ```
 
 :::::{tab-set}
+:class: sd-h-100
+
 ::::{tab-item} Input text
+:class-container: sd-h-100
+:class-content: sd-h-100
+
 ````{raw} html
 <textarea class="pyscript" id="input_myst">
 # Heading 1
@@ -40,49 +45,66 @@ Hallo world!
 An admonition note!
 ```
 
+## Math
+
+```python
+from package import module
+module.call("string")
+```
+
+## Definition list
+
 term
 : definition
 
-$$\pi = 3.14159$$
+## Math
 
-```{list-table}
-:header-rows: 1
-:align: center
+$$\pi = 3.14159$$
 
-* - Header 1
-  - Header 2
-* - Item 1
-  - Item 2
-```
+## Figures
 
 ```{figure} https://via.placeholder.com/150
 :width: 100px
 :align: center
 
 Figure caption
 ```
+
+## Tables
+
+```{list-table}
+:header-rows: 1
+:align: center
+
+* - Header 1
+  - Header 2
+* - Item 1 a
+  - Item 2 a
+* - Item 1 b
+  - Item 2 b
+```
 </textarea>
 ````
 
 ::::
 ::::{tab-item} Configuration (YAML)
+:class-container: sd-h-100
+:class-content: sd-h-100
+
 <textarea class="pyscript" id="input_config">
 # see: https://docutils.sourceforge.io/docs/user/config.html
 myst_enable_extensions:
 - colon_fence
 - deflist
 - dollarmath
-myst_highlight_code_blocks: false
-embed_stylesheet: true
-stylesheet_path:
-- minimal.css
+myst_highlight_code_blocks: true
 </textarea>
 ::::
 :::::
 
 :::::::
 :::::::{grid-item}
-:child-align: end
+:child-align: start
 
 ```{raw} html
 <div class="display-flex">
@@ -97,7 +119,7 @@ stylesheet_path:
 
 ::::{tab-set}
 :::{tab-item} HTML Render
-<iframe class="pyscript" id="output_html" readonly="true"></iframe>
+<div class="pyscript" id="output_html"></div>
 :::
 :::{tab-item} Raw Output
 <textarea class="pyscript" id="output_raw" readonly="true"></textarea>

docs/live_preview.py

@@ -3,12 +3,38 @@
 
 import yaml
 from docutils.core import publish_string
+from docutils.frontend import filter_settings_spec
+from docutils.writers.html5_polyglot import HTMLTranslator, Writer
 from js import document
 
 from myst_parser import __version__
 from myst_parser.parsers.docutils_ import Parser
 
 
+class SimpleTranslator(HTMLTranslator):
+    def visit_literal_block(self, node):
+        node["classes"].append("highlight")
+        return super().visit_literal_block(node)
+
+    def stylesheet_call(self, *args, **kwargs):
+        return ""
+
+
+class SimpleWriter(Writer):
+    settings_spec = filter_settings_spec(
+        Writer.settings_spec,
+        "template",
+    )
+
+    def apply_template(self):
+        subs = self.interpolation_dict()
+        return "%(body)s\n" % subs
+
+    def __init__(self):
+        self.parts = {}
+        self.translator_class = SimpleTranslator
+
+
 def convert(input_config: str, input_myst: str, writer_name: str) -> dict:
     warning_stream = StringIO()
     try:
@@ -21,14 +47,22 @@ def convert(input_config: str, input_myst: str, writer_name: str) -> dict:
         {
             "output_encoding": "unicode",
             "warning_stream": warning_stream,
+            # to mimic the sphinx parser
+            "doctitle_xform": False,
+            "sectsubtitle_xform": False,
+            "initial_header_level": 1,
         }
     )
     try:
         output = publish_string(
             input_myst,
             parser=Parser(),
-            writer_name=writer_name,
             settings_overrides=settings,
+            **(
+                {"writer": SimpleWriter()}
+                if "html" in writer_name
+                else {"writer_name": writer_name}
+            ),
         )
     except Exception as exc:
         output = f"ERROR: conversion:\n{exc}\n{traceback.format_exc()}"
@@ -38,7 +72,7 @@ def convert(input_config: str, input_myst: str, writer_name: str) -> dict:
 version_label = document.querySelector("span#myst-version")
 config_textarea = document.querySelector("textarea#input_config")
 input_textarea = document.querySelector("textarea#input_myst")
-output_iframe = document.querySelector("iframe#output_html")
+output_iframe = document.querySelector("div#output_html")
 output_raw = document.querySelector("textarea#output_raw")
 warnings_textarea = document.querySelector("textarea#output_warnings")
 oformat_select = document.querySelector("select#output_format")
@@ -48,11 +82,9 @@ def do_convert(event=None):
     result = convert(config_textarea.value, input_textarea.value, oformat_select.value)
     output_raw.value = result["output"]
     if "html" in oformat_select.value:
-        output_iframe.contentDocument.body.innerHTML = result["output"]
+        output_iframe.innerHTML = result["output"]
     else:
-        output_iframe.contentDocument.body.innerHTML = (
-            "Change output format to HTML to see output"
-        )
+        output_iframe.innerHTML = "Change output format to HTML to see output"
     warnings_textarea.value = result["warnings"]
 
 

pyproject.toml

@@ -54,9 +54,9 @@ linkify = ["linkify-it-py~=1.0"]
 # Note: This is only required for internal use
 rtd = [
     "ipython",
-    # currently required to get sphinx v5
-    "sphinx-book-theme==0.4.0rc1",
-    "sphinx-design",
+    "sphinx-book-theme==1.0.0rc2",
+    "pydata-sphinx-theme==v0.13.0rc4",
+    "sphinx-design2",
     "sphinx-copybutton",
     "sphinxext-rediraffe~=0.2.7",
     "sphinxcontrib.mermaid~=0.7.1",