Merge branch 'markdown' into 'develop'

Fixing table overflow

See merge request R3/howto-cards!88

external/contribute/markdown/markdown.md

@@ -34,7 +34,7 @@ Markdown is a lightweight markup language with plain text formatting syntax whic
 
 
 ## Tips to write in markdown:
-<table>
+<table style="table-layout: fixed; width: 80%;white-space: normal">
   <thead>
   <tr>
     <th>Markdown</th>
@@ -44,7 +44,8 @@ Markdown is a lightweight markup language with plain text formatting syntax whic
   <tbody>
   <tr>
     <td>
-      <pre>
+      <pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word">
+
         # Header 1<br>
         ## Header 2<br>
         ### Header 3 <br>
@@ -60,7 +61,8 @@ Markdown is a lightweight markup language with plain text formatting syntax whic
   </tr>
   <tr>
     <td>
-      <pre>
+      <pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word">
+
       To make a text **bold**, use **double asterisk** or __underscores__ before and after a word or phrase.
       To make a text **italic**, use *one asterisk* or _underscore_.
       </pre>
@@ -72,7 +74,8 @@ Markdown is a lightweight markup language with plain text formatting syntax whic
   </tr>
   <tr>
     <td>
-      <pre>
+      <pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word">
+
       Use numbers for ordered lists:
         1. First item
         2. Second item
@@ -99,7 +102,8 @@ Markdown is a lightweight markup language with plain text formatting syntax whic
   </tr>
   <tr>
     <td>
-      <pre>
+      <pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word">
+
       For unordered lists use asterisk, minus or plus
         - First item
         - Second item
@@ -125,7 +129,8 @@ Markdown is a lightweight markup language with plain text formatting syntax whic
   </tr>
   <tr>
     <td>
-      <pre>
+      <pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word">
+
       Include links referring to a web [page](https://www.markdownguide.org/)
       </pre>
     </td>
@@ -136,12 +141,14 @@ Markdown is a lightweight markup language with plain text formatting syntax whic
   <tr>
     <td>
      
-      <pre>
+      <pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word">
+
        Include local pictures using markdown:
 
         ![My awesome picture](img/r3_logo.png)
       </pre><br>
-      <pre>
+      <pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word">
+
       Or use HTML tag allowing you to alter the image properties (e.g. size):
 
         &lt;img src="img/r3_logo.png" width="40"&gt
@@ -156,7 +163,8 @@ Markdown is a lightweight markup language with plain text formatting syntax whic
   </tr>
   <tr>
     <td>
-     <pre>
+     <pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word">
+
       Include code blocks!
       ```
       def myAwesomeFunction(x):
@@ -176,7 +184,8 @@ Markdown is a lightweight markup language with plain text formatting syntax whic
   </tr>
   <tr>
     <td>
-      <pre>
+      <pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word">
+
       Create table:
        |   Tables   |   Are  | Cool  |
        |------------|:------:|:-----:|
@@ -244,7 +253,6 @@ Markdown is a lightweight markup language with plain text formatting syntax whic
   </tbody>
 </table>
 
-
 This is an overview of basic Markdown features. For more in-build features, please see various online [documentation](https://www.markdownguide.org/basic-syntax/).
 
 ### Advanced formatting
@@ -272,7 +280,8 @@ Another big advantage of Markdown is that it can contain HTML tags, which makes
   <tbody>
     <tr>
       <td>
-        <pre>
+        <pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word">
+
           # DocTitle
           ### Attendees:
           ### Location: