output box css

docs/_static/terminal.css

@@ -0,0 +1,72 @@
+.terminal {
+    background-color: #000000; /* Fond noir */
+    color: #00ff00; /* Texte vert, typique des anciens terminaux */
+    font-family: 'Courier New', Courier, monospace; /* Police à chasse fixe */
+    padding: 5px; /* Espace réduit autour du texte */
+    border-radius: 5px;
+    border: 1px solid #00ff00; /* Bordure verte */
+    white-space: pre-wrap;
+    overflow-x: auto; /* Défilement horizontal si nécessaire */
+    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5); /* Ombre verte pour un effet rétro */
+    display: flex; /* Active Flexbox */
+    line-height: 1.2; /* Espacement entre les lignes */
+    display: inline-block; /* Pour que le fond s'adapte au contenu */
+    width: 100%; /* Largeur maximale */
+}
+
+.terminal,
+.terminal * {
+    border: none !important; /* Supprime toutes les bordures à l'intérieur du terminal */
+}
+
+.terminal .highlight {
+    margin: 0; /* Supprime les marges */
+    padding: 0; /* Supprime les paddings */
+    background-color: transparent; /* Fond transparent pour éviter les conflits */
+}
+
+.terminal .highlight pre {
+    margin: 0; /* Supprime les marges */
+    padding: 0; /* Supprime les paddings */
+    background-color: transparent; /* Fond transparent */
+    color: inherit; /* Hérite la couleur du texte du parent */
+    font-family: inherit; /* Hérite la police du parent */
+    line-height: inherit; /* Hérite l'espacement des lignes du parent */
+}
+
+.terminal .highlight pre span {
+    display: inline; /* Évite les espaces inutiles causés par inline-block */
+    margin: 0; /* Supprime les marges */
+    padding: 0; /* Supprime les paddings */
+}
+
+.terminal .go {
+    color: #00ff00; /* Couleur pour le texte de sortie du terminal */
+}
+
+/* raw html output css */
+
+/* Styles communs pour les deux classes */
+.error-box, .output {
+    padding: 10px; /* Espace intérieur */
+    font-size: 0.9em; /* Taille de police plus petite */
+    width: fit-content; /* Ajuste la largeur au contenu */
+    border-radius: 5px; /* Coins arrondis */
+    display: inline-block; /* Pour que la boîte s'ajuste au contenu */
+}
+
+.error-box pre, .output pre {
+    margin: 0; /* Supprime la marge par défaut du <pre> */
+}
+
+/* Styles spécifiques à la classe error-box */
+.error-box {
+    border: 2px solid #ff0000; /* Bordure rouge */
+    background-color: #ffe6e6; /* Fond légèrement rouge */
+}
+
+/* Styles spécifiques à la classe output */
+.output {
+    border: 2px solid #00ff00; /* Bordure verte */
+    background-color: #e6ffe6; /* Fond légèrement vert */
+}

docs/conf.py

@@ -68,6 +68,7 @@ html_show_copyright = True
 # The name of the Pygments (syntax highlighting) style to use.
 pygments_style = None
 html_static_path = ['_static']
+html_css_files = ['terminal.css']
 
 # Add any paths that contain templates here, relative to this directory.
 templates_path = ['_templates']

docs/tutorial/preliminary.rst

@@ -64,7 +64,8 @@ This is a first Rougail variable in a Rougail dictionnary.
 
 - Then we will run this command 
 
-.. code-block:: shell
+.. code-block:: text
+   :class: terminal
    
     rougail -v 1.1 -m firefox/
 
@@ -72,6 +73,7 @@ which actually outputs an error:
 
 .. raw:: html
    :url: https://forge.cloud.silique.fr/stove/rougail-tutorials/raw/tag/v1.1_010/config/01/output_ro.html
+   :class: error-box
 
 ..
     🛑 ERRORS
@@ -105,11 +107,21 @@ We need a **default value**.
 So let's define a variable with a description -- **and a default value**
 
 
-FIXME GWEN
+.. FIXME trouver une url qui corresponde à une valeur par défaut **dans le dictionnaire**
+
+.. code-block:: yaml
+
+    ---
+    proxy_mode:
+      description: Configure Proxy Access to the Internet
+      default: No proxy
+
 
  :ref:`Here is a Rougail variable with a default value <RougailDictionaryFirstVariableDefault>`
 
+.. type-along:: how to set a value
 
+    A default value has been set, great. Now how do I assign a value to a variable?
 
 The integrator role
 ----------------------
@@ -240,7 +252,7 @@ In our firefox use case, the real type of the `proxy_mode` variable is a `choice
 
 .. raw:: html
    :url: https://forge.cloud.silique.fr/stove/rougail-tutorials/raw/commit/v1.1_013/config/01/output_ro.html
-
+   :class: output
 ..
     <pre>╭────────────────────────── Caption ──────────────────────────╮
     │ Variable                           <span style="color: #ffd700">Default value</span>            │