Commit f0af3d04 authored by Laurent Heirendt's avatar Laurent Heirendt
Browse files

Merge branch 'markdown' into 'develop'

Markdown - fixing table render

See merge request !83
parents 3cd02e46 c3b8302c
Pipeline #21703 passed with stage
in 55 seconds
......@@ -32,35 +32,24 @@ Markdown is a lightweight markup language with plain text formatting syntax whic
<img src="img/visual-code_img_10.png">
- **tips to write in markdown:**
<img src="img/visual-code_img_18.png">
**insert pictures:**
<img src="img/visual-code_img_19.png" width="1000">
**create a table**
<img src="img/visual-code_img_20.png">
## Syntax
## Tips to write in markdown:
<table>
<thead>
<tr>
<th>Markdown</th>
<th>Rendered Output</th>
</tr>
<tr>
<th>Markdown</th>
<th>Rendered Output</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>
<pre>
# Header 1<br>
## Header 2<br>
### Header 3 <br>
#### Header 4
</code>
</pre>
</td>
<td>
<h1>Header 1</h1><br>
......@@ -68,107 +57,194 @@ Markdown is a lightweight markup language with plain text formatting syntax whic
<h3>Header 3</h3><br>
<h4>Header 4</h4>
</td>
</tr>
<tr>
<td>
<code>
To **bold** text, add **two asterisks** or __underscores__ before and after a word or phrase.</br>
To make text **italic** text, add *one asterisks* or _underscores_.
</code>
</td>
<td>
To make phrase <strong>bold</strong> text, add <strong>two asterisks</strong> or <strong>underscores</strong> before and after a word or phrase.</br>
To make text <i>italic</i>, add <i>one asterisks</i> or <i>underscores</i>.
</td>
</tr>
<tr>
<td>
<code>
Use numbers for ordered lists: <br />
1. First item<br />
2. Second item<br />
3. Third item<br />
&nbsp;&nbsp;&nbsp;&nbsp;1. Indented item<br />
&nbsp;&nbsp;&nbsp;&nbsp;2. Indented item<br />
4. Fourth item
</code>
</td>
<td>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item
<ol>
<li>Indented item</li>
<li>Indented item</li>
</ol>
</li>
<li>Fourth item</li>
</ol>
</td>
</tr>
<tr>
<td>
<code>
For unordered lists
* First item<br />
* Second item<br />
* Third item<br />
* Fourth item
</code>
</td>
<td>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
</td>
</tr>
<tr>
<td>
<code>
Include links referring to a web [page](https://www.markdownguide.org/)
</code>
</td>
<td>
Include links referring to a web <a href="https://www.markdownguide.org/">page</a>
</td>
</tr>
<tr>
<td>
<code>
Include local pictures: ![My awesome picture](img/r3_logo.png)
</code>
</td>
<td>
Include local pictures: <img src="img/img.png">
</td>
</tr>
<tr>
<td>
<code>
Include code blocks! </br>
```</br>
myAwesomeFunction <- function(x) x+1;</br>
# Apply function </br>
myAwesomeFunction(2);</br>
```
</code>
</td>
<td>
Include code blocks! </br>
</tr>
<tr>
<td>
<pre>
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>
</td>
<td>
To make a text <strong>bold</strong>, use <strong>double asterisk</strong> or <strong>underscores</strong> before and after a word or phrase.<br>
To make text <i>italic</i>, use <i>one asterisk</i> or <i>underscore</i>.
</td>
</tr>
<tr>
<td>
<pre>
Use numbers for ordered lists:
1. First item
2. Second item
3. Third item
&nbsp;&nbsp;&nbsp;&nbsp;1. Indented item
&nbsp;&nbsp;&nbsp;&nbsp;1. Indented item
4. Fourth item
</pre>
</td>
<td>
Use numbers for ordered lists:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item
<ol>
<li>Indented item</li>
<li>Indented item</li>
</ol>
</li>
<li>Fourth item</li>
</ol>
</td>
</tr>
<tr>
<td>
<pre>
For unordered lists use asterisk, minus or plus
- First item
- Second item
* Third item
&nbsp;&nbsp;&nbsp;&nbsp;* Indented item
&nbsp;&nbsp;&nbsp;&nbsp;+ Indented item
* Fourth item
</pre>
</td>
<td>
For unordered lists use asterisk, minus or plus
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<ul>
<li>Indented item</li>
<li>Indented item</li>
</ul>
<li>Fourth item</li>
</ul>
</td>
</tr>
<tr>
<td>
<pre>
Include links referring to a web [page](https://www.markdownguide.org/)
</pre>
</td>
<td>
Include links referring to a web <a href="https://www.markdownguide.org/">page</a>
</td>
</tr>
<tr>
<td>
<pre>
Include local pictures using markdown:
![My awesome picture](img/r3_logo.png)
</pre><br>
<pre>
Or use HTML tag allowing you to alter the image properties (e.g. size):
&lt;img src="img/r3_logo.png" width="40"&gt
</pre>
</td>
<td>
Include local pictures using markdown: <br>
<img src="img/r3_logo.png"> <br>
Or use HTML tag allowing you to alter the image properties (e.g. size):<br>
<img src="img/r3_logo.png" width="40">
</td>
</tr>
<tr>
<td>
<pre>
Include code blocks!
```
def myAwesomeFunction(x):
x+1
myAwesomeFunction(2)
```
</pre>
</td>
<td>
Include code blocks! <br>
<code>
myAwesomeFunction <- function(x) x+1;</br>
# Apply function</br>
myAwesomeFunction(2);
def myAwesomeFunction(x):<br>
x+1<br>
myAwesomeFunction(2)
</code>
</td>
</tr>
</td>
</tr>
<tr>
<td>
<pre>
Create table:
| Tables | Are | Cool |
|------------|:------:|:-----:|
| value one | blue | $1024 |
| value two | red | $256 |
| value three| green | $128 |
</pre>
</td>
<td>
Create table:
<div>
<table>
<thead>
<tr>
<th>
Tables
</th>
<th>
Are
</th>
<th>
Cool
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
value one
</td>
<td>
blue
</td>
<td>
$1024
</td>
</tr>
<tr>
<td>
value two
</td>
<td>
red
</td>
<td>
$256
</td>
</tr>
<tr>
<td>
value tree
</td>
<td>
green
</td>
<td>
$128
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</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
......@@ -185,55 +261,53 @@ Another big advantage of Markdown is that it can contain HTML tags, which makes
* **Blogging and tutorials** - structured document with chunks of code, pictures and results of the analyses can be easily converted to HTML format and posted on personal/team websites.
* **Notes and meeting minutes** - you can use following template for simple and nicely structured meeting notes:
<table>
<thead>
<tr>
<th>Markdown</th>
<th>Markdown template</th>
<th>Rendered Output</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>
# DocTitle</br>
### Attendees:</br>
### Location:</br>
## Objective / Agenda</br>
## Meeting Notes</br>
* first note </br>
* second note </br>
* ...</br>
</br>
## Actions</br>
- [ ] Josh, Alice and Cindy will do this.</br>
- [x] Bob stops doing that.</br>
- [ ] Will and Tom will take care of those
</code>
</td>
<td>
<code>
<h1>DocTitle</h1></br>
<h3> Attendees:<h3></br>
<h3> Location:</h3></br>
<h2> Objective / Agenda</h2></br>
<h2> Meeting Notes</h2></br>
<ul>
<li> first note</li>
<li>second note</li>
<li>...</li>
</ul>
<h2> Actions</h2></br>
<input type="checkbox" > Josh, Alice and Cindy will do this.</input></br>
<input type="checkbox" checked="checked"> Bob stops doing that.</input></br>
<input type="checkbox" > Vanessa and Tom will take care of those</input></br>
</code>
</td>
</tr>
</tbody>
<tr>
<td>
<pre>
# DocTitle
### Attendees:
### Location:
## Objective / Agenda
## Meeting Notes
* first note
* second note
* ...
## Actions
- [ ] Josh, Alice and Cindy will do this.
- [x] Bob stops doing that.
- [ ] Will and Tom will take care of those
</pre>
</td>
<td>
<h1>DocTitle</h1><br>
<h3> Attendees:</h3><br>
<h3> Location:</h3><br>
<h2> Objective / Agenda</h2><br>
<h2> Meeting Notes</h2><br>
<ul>
<li> first note</li>
<li>second note</li>
<li>...</li>
</ul>
<h2> Actions</h2><br>
<input type="checkbox"> Josh, Alice and Cindy will do this.<br>
<input type="checkbox" checked="checked"> Bob stops doing that.<br>
<input type="checkbox"> Vanessa and Tom will take care of those<br>
</td>
</tr>
</tbody>
</table>
* **Analyses,reports and papers** - embedding [R markdown](https://rmarkdown.rstudio.com/) in an R project allows you to include executable code and related text in the very same document. This brings unprecedented level of consistency, shareability and reproducibility into the workflows.
* **Analyses, reports and papers** - embedding [R markdown](https://rmarkdown.rstudio.com/) in an R project allows you to include executable code and related text in the very same document. This brings unprecedented level of consistency, shareability and reproducibility into the workflows.
* **Online discussion forums** - many scientific and non-scientific discussion forums and social networks support Markdown for formatting the content of messages (e.g. [StackOverflow](https://stackoverflow.com/editing-help), [GitHub](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax), Reddit or even Facebook)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment