Better pyscript sphinx

docs/Makefile

@@ -19,11 +19,12 @@ ALLSPHINXOPTS   = -d $(BUILDDIR)/doctrees $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) .
 # the i18n builder cannot share the environment and doctrees with the others
 I18NSPHINXOPTS  = $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) .
 
-.PHONY: help clean html dirhtml singlehtml pickle json htmlhelp qthelp devhelp epub latex latexpdf text man changes linkcheck doctest gettext
+.PHONY: help clean html serve dirhtml singlehtml pickle json htmlhelp qthelp devhelp epub latex latexpdf text man changes linkcheck doctest gettext
 
 help:
 	@echo "Please use \`make <target>' where <target> is one of"
 	@echo "  html       to make standalone HTML files"
+	@echo "  serve      to clean, build HTML, and serve locally"
 	@echo "  dirhtml    to make HTML files named index.html in directories"
 	@echo "  singlehtml to make a single large HTML file"
 	@echo "  pickle     to make pickle files"
@@ -49,6 +50,9 @@ help:
 clean:
 	rm -rf $(BUILDDIR)/*
 
+serve: clean html
+	python -m http.server -d $(BUILDDIR)/html
+
 html:
 	$(SPHINXBUILD) -b html $(ALLSPHINXOPTS) $(BUILDDIR)/html
 	@echo

docs/_static/css/pyscript_editor.css

@@ -0,0 +1,52 @@
+/*
+ * Make the PyScript py-editor shadow-DOM slot look like a Sphinx code block.
+ *
+ * The outer .highlight.highlight-python div is already styled by your theme.
+ * These rules target the web-component internals that PyScript exposes.
+ */
+
+/* Match the min-height to a reasonable number of visible lines */
+py-editor {
+    display: block;
+    min-height: 6em;
+}
+
+/*
+ * PyScript 2024+ exposes a --py-editor-* set of custom properties.
+ * Mirror the values your Sphinx theme uses for <pre> blocks.
+ */
+py-editor {
+    --py-editor-font-family: var(
+        --code-font-family,
+        "SFMono-Regular",
+        Consolas,
+        "Liberation Mono",
+        Menlo,
+        monospace
+    );
+    --py-editor-font-size: var(--code-font-size, 0.875em);
+    --py-editor-background: var(
+        --code-background,
+        var(--color-code-background, #f8f8f8)
+    );
+    --py-editor-foreground: var(
+        --code-foreground,
+        var(--color-foreground, #333)
+    );
+}
+
+/*
+ * Remove PyScript's own border/shadow so the outer Sphinx .highlight
+ * border is the only one visible.
+ */
+py-editor::part(editor) {
+    border: none;
+    box-shadow: none;
+    border-radius: 0;
+    padding: 0.5em 1em;
+}
+
+/* Run button: border-radius only; margin-top is injected into shadow DOM via JS */
+py-editor::part(run-button) {
+    border-radius: 0 0 4px 0;
+}

docs/basics.rst

@@ -38,10 +38,12 @@ explanatory error message.
 A simple example program
 ------------------------
 
-The following calls the SPICE function :py:meth:`spiceypy.spiceypy.tkvrsn` which outputs the version
+The following calls the SPICE function :py:func:`spiceypy.tkvrsn <spiceypy.spiceypy.tkvrsn>` which outputs the version
 of cspice that SpiceyPy is wrapping.
 
-.. code:: python
+.. py-editor::
+    :env: other
+    :config: pyscript_min.json
 
     import spiceypy as spice
 
@@ -51,5 +53,5 @@ This should output the following string:
 
 .. parsed-literal::
 
-    'CSPICE_N0066'
+    'CSPICE_N0067'