Misc css and documentation update.

Here are a couple of modification:

The example_class was not applied to all the container.

Having both the default and iframe container with the same class was a
bit annoying for some css, and lead to `.hidden` not being applied in some
of my experiments, so swap the name of the iframe container.

Add an example in the documentation on how to change the color and
positioning of the button.

I happen to have prettier install for css files, so it also reformatted
the css to use css standard of 2 spaces.

Move the main colors into css variables, so that if need and if we start
to use those colors in more places they are more easily overwritten.

Also contains mist parsing warnings.

 - Unknown escape sequence \;, need double escape.
 - pygments say yml is unknown but yaml works

Author: Carreau

docs/_static/try_examples.css

@@ -1,21 +1,64 @@
+:root {
+  --jupyter-light-primary: #f7dc1e;
+  --jupyter-light-primary-muted: #fff221;
+}
+
 .try_examples_button {
-    background-color: #f7dc1e;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 15px;
-    font-family: vibur;
-    font-size: larger;
-    box-shadow: 0 2px 5px rgba(108,108,108,0.2);
+  background-color: var(--jupyter-light-primary);
+  border: none;
+  padding: 5px 10px;
+  border-radius: 15px;
+  font-family: vibur;
+  font-size: larger;
+  box-shadow: 0 2px 5px rgba(108, 108, 108, 0.2);
 }
 
 .try_examples_button:hover {
-    background-color: #fff221;
-    transform: scale(1.02);
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    cursor: pointer;
+  background-color: var(--jupyter-light-primary-muted);
+  transform: scale(1.02);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
 }
 
 .try_examples_button_container {
-    display: flex;
-    justify-content: flex-end;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.try_examples_outer_container,
+.try_examples_outer_iframe {
+  flex-direction: column-reverse;
+  display: flex;
+}
+
+/* override class + hidden, otherwise any attempt  of custom css to
+ * set the display mode would lead to the iframe/container always visible.
+ * */
+
+.try_examples_outer_container.hidden,
+.try_examples_outer_iframe.hidden {
+  display: none;
+}
+
+/* customisation when the buttons containers have the blue-bottom class */
+
+/* here we just show how to:
+ *   - change the color of the button
+ *   - change the color on hover.
+ *
+ *  As we _used to have_ option to show the button above/below, and left/right
+ *  we show how to achieve the same with flex-direction
+ */
+
+.blue-bottom .try_examples_button_container {
+  justify-content: flex-start;
+}
+
+.blue-bottom .try_examples_button {
+  background-color: #00bcd4;
+  color: white;
+}
+
+.blue-bottom button.try_examples_button:hover {
+  background-color: #2196f3;
 }

docs/configuration.md

@@ -33,7 +33,7 @@ Furthermore, this automatically installs any labextension that it founds, for ex
 
 Say you want to install NumPy, Matplotlib and ipycanvas, it can be done by creating the environment.yml file with the following content:
 
-```yml
+```yaml
 name: xeus-python-kernel
 channels:
   - https://repo.mamba.pm/emscripten-forge

docs/directives/try_examples.md

@@ -125,6 +125,7 @@ Here's an example with some options set
 .. try_examples::
     :button_text: Try it in your browser!
     :height: 400px
+    :example_class: blue-bottom
 
     The button text has changed and the height now exceeds the size of the content.
 
@@ -133,6 +134,11 @@ Here's an example with some options set
     >>> x + y
     4
 
+    We've also added the ``blue-bottom`` class, the button should appear as blue,
+    below the examples, and on the left side of the screen.
+
+    See ``try_examples.css`` in the Repository to see how we achieved this via
+    custom css.
 ```
 
 and here is the result
@@ -141,6 +147,7 @@ and here is the result
 .. try_examples::
     :button_text: Try it in your browser!
     :height: 400px
+    :example_class: blue-bottom
 
     The button text has changed and the height now exceeds the size of the content.
 
@@ -149,6 +156,11 @@ and here is the result
     >>> x + y
     4
 
+    We've also added the ``blue-bottom`` class, the button should appear as blue,
+    below the examples, and on the left side of the screen.
+
+    See ``try_examples.css`` in the Repository to see how we achieved this via
+    custom css.
 ```
 
 
@@ -230,7 +242,7 @@ patterns, effectively disabling the interactive documentation. In the provided e
   in a Jupyterlite kernel.
 
 * The pattern `"^/stable/reference/generated/example.html"` targets a particular url
-  in the documentation for the latest stable release. 
+  in the documentation for the latest stable release.
 
 Note that these patterns should match the [pathname](https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname) of the url, not the full url. This is the path portion of
 the url. For instance, the pathname of https://jupyterlite-sphinx.readthedocs.io/en/latest/directives/try_examples.html is `/en/latest/directives/try_examples.html`.

jupyterlite_sphinx/_try_examples.py

@@ -36,7 +36,7 @@ def examples_to_notebook(input_lines):
     >>>            "\n",
     >>>            ".. math::\n",
     >>>            "\n",
-    >>>            "    x = 2,\;y = 2
+    >>>            "    x = 2,\\;y = 2
     >>>            "\n",
     >>>            "    x + y = 4\n",
     >>>          ]

jupyterlite_sphinx/jupyterlite_sphinx.py

@@ -394,7 +394,7 @@ def run(self):
         notebooks_path = "../notebooks/"
 
         content_container_node = nodes.container(
-            classes=["try_examples_outer_container"]
+            classes=["try_examples_outer_container", example_class]
         )
         examples_div_id = uuid4()
         content_container_node["ids"].append(examples_div_id)
@@ -430,7 +430,7 @@ def run(self):
         # Parent container (initially hidden)
         iframe_parent_container_div_start = (
             f'<div id="{iframe_parent_div_id}" '
-            f'class="try_examples_outer_container {example_class} hidden">'
+            f'class="try_examples_outer_iframe {example_class} hidden">'
         )
 
         iframe_parent_container_div_end = "</div>"