Display SWISH query boxes: copy button + syntax highlight

1. Display SWISH query box code syntax highlighting
2. SWISH query box CSS stylesheet correction (_static/lpn.css)
3. Display SWISH query box copy button -- no need to enable the custom class
   by setting the `copybutton_selector` configuration variable to
   `"div.highlight pre, div.extract.swish pre.swish.query"`
   since the code syntax highlighting embeds an extra `div` element
   and the outer element id is no longer overwritten
   (see <executablebooks/sphinx-copybutton#115>)

_config.yml

@@ -53,14 +53,14 @@ sphinx:
       figure: "Figure %s"
     numfig_secnum_depth: 2
     mathjax_path: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
-    # Allow copy buttons in SWISH query boxes
+    # Configure Sphinx-copybutton
     # <https://sphinx-copybutton.readthedocs.io/en/latest/>
-    # NOTE: it is disabled for now since it overwrites the code block id
-    # <https://github.com/executablebooks/sphinx-copybutton/issues/115>
-    # copybutton_selector: "div.highlight pre, div.extract.swish pre.swish.query"
-    copybutton_prompt_text: "?-"
+    copybutton_prompt_text: "\\s*\\?\\s*-\\s*"
+    copybutton_prompt_is_regexp: true
     copybutton_only_copy_prompt_lines: false
     copybutton_remove_prompts: true
+    # copybutton_selector: "div.highlight pre, div.extract.swish pre.swish.query"
+    # Configure SL-Sphinx <https://github.com/simply-logical/SL-Sphinx>
     sl_exercise_directory: /src/ex/
     sl_code_directory: /src/code/
     sl_swish_url: https://swish.simply-logical.space/

_static/lpn.css

@@ -34,11 +34,12 @@ pre.query, pre.source, pre.verbatim {
   outline: 1px dotted green;
 }
 
-div.query {
-  position: relative;
-  width: 80%;
-  display: inline-block;
-}
+/* div.query {
+ *   position: relative;
+ *   width: 80%;
+ *   display: inline-block;
+ * }
+ */
 
 div.open-prolog {
   width: auto;
@@ -55,7 +56,8 @@ div.open-prolog div.load {
   right: -37px;
 }
 
-div.source.swish, div.query.swish {
+/* div.query.swish, */
+div.source.swish {
   padding: 8px 8px;
 }