Add examples and images to the text control's doc

docs/manuals/userman/gui/viselements/generic/text.md_template

@@ -1,7 +1,15 @@
 Displays a value as a static text.
 
-Note that in order to create a `text` control, you don't need to specify the control name
-in the text template.
+Note that to create a `text` control when using the Markdown syntax, you don't need to specify the
+control name in the text template:
+```
+<|Some content|text|>
+```
+is equivalent to
+```
+<|Some content|>
+```
+
 
 # Details
 
@@ -18,39 +26,115 @@ select the text controls on your page and apply style.
 
 # Usage
 
-## Display value
+## Display values {data-source="gui:doc/examples/controls/text-simple.py"}
+
+The property *value* can be set to any text that will be rendered.<br/>
+This value must be a
+(Formatted string literals)[https://docs.python.org/3/reference/lexical_analysis.html#f-strings]
+so that if it includes Python expressions (potentially as simple as a variable name), the resulting
+text is displayed.
 
 You can represent a variable value as a simple, static text:
+!!! taipy-element
+    default=Hello {name}!
+
+Presuming that the Python variable *name* is set to the value "Taipy", here is how this control
+displays:
+<figure>
+    <img src="../text-simple-d.png" class="visible-dark"  width="200%"/>
+    <img src="../text-simple-l.png" class="visible-light" width="200%"/>
+    <figcaption>Showing a variable value</figcaption>
+</figure>
+
+## Formatted output {data-source="gui:doc/examples/controls/text-format.py"}
 
-!!! example "Definition"
+If your value is a floating point value, you can use the [*format*](#p-format) property to indicate
+what the output format should be used.
 
-    === "Markdown"
+If we have the following Python definition:
+```python
+pi = 3.14159265358979
+```
 
-        ```
-        <|{value}|>
-        ```
+To display this floating point value with three decimal places, we can create the text control
+as follows:
+!!! taipy-element
+    default={pi}
+    format=%.3f
 
-    === "HTML"
+Here is the resulting display:
+<figure>
+    <img src="../text-format-d.png" class="visible-dark"  width="200%"/>
+    <img src="../text-format-l.png" class="visible-light" width="200%"/>
+    <figcaption>Formatting a value</figcaption>
+</figure>
 
-        ```html
-        <taipy:text>{value}</taipy:text>
-        ```
+## Markdown formatting {data-source="gui:doc/examples/controls/text-md.py"}
 
-    === "Python"
+You can use the Markdown markup language to add formatting indications to the text you want to
+render.<br/>
+You must set the [*mode*](#p-mode) property to "markdown" or "md" to do that.
 
-        ```python
-        import taipy.gui.builder as tgb
-        ...
-        tgb.text("{value}")
-        ```
+Note that the Markdown syntax mentions that if a line ends with two white space characters, a line
+break is issued.
 
-## Formatted output
+Here is an example of that feature.<br/>
+Consider the following variable definition:
+```python linenums="1"
+markdown = """
+# Generated by *Taipy*
 
-If your value is a floating point value, you can use the [*format*](#p-format) property to indicate
-what the output format should be used.
+You can insert *Markdown* code in a `text` control to
+add style to the text.
+
+If a line ends with two white spaces, such as here  
+then you can create line skips.
+"""
+```
+
+You cannot see that line 7 ends with two white space characters.
+
+Let's bind this variable to the [*value*](#p-value) property of the control and set
+[*mode*](#p-mode) so that Markdown formatting is issued:
+!!! taipy-element
+    default={markdown}
+    mode=markdown
+
+The control looks like this on the page:
+<figure>
+    <img src="../text-md-d.png" class="visible-dark"  width="500px"/>
+    <img src="../text-md-l.png" class="visible-light" width="500px"/>
+    <figcaption>Markdown formatting</figcaption>
+</figure>
+
+Note that a line break was forced where we expected it.
+
+## Preformatted text {data-source="gui:doc/examples/controls/text-pre.py"}
+
+You may need to store text that is preformatted (where spaces and line skips are essential). This
+is really useful dealing with source code, for example.<br/>
+Set the [*mode*](#p-mode) property to "pre" to indicate such a situation. The content is displayed
+in a fixed-width font.
+
+Line skips and space characters are crucial for Python code to be correctly interpreted.<br/>
+Say you have the following Python variable definition, showing some raw Python source code:
+```python linenums="1"
+code = """
+def say_hello(name: str):
+    print(f"Hello, {name}!")
 
-To display a floating point value with two decimal places:
+if __name__ == "__main__":
+    say_hello("Taipy")
+```
 
+We can use this variable in our text control and set [*mode*](#p-mode) to "pre":
 !!! taipy-element
-    default={value}
-    format=%.2f
+    default={code}
+    mode=pre
+
+This is how the control is displayed:
+<figure>
+    <img src="../text-pre-d.png" class="visible-dark"  width="400px"/>
+    <img src="../text-pre-l.png" class="visible-light" width="400px"/>
+    <figcaption>Preformatted content</figcaption>
+</figure>