Markdown is a simple way to format text that looks great on any device. It doesn’t do anything fancy like change the font size, color, or type — just the essentials, using keyboard symbols you already know.
H~2~O is a liquid. 2^10^ is 1024 : H2O is a liquid. 210 is 1024
Inserted text can be used to specify that a text has been added to a document. The semantic used for the generated HTML is the tag <ins>
this is an fragment of ++Inserted text++ : this is an fragment of Inserted text
Marked text can be used to specify that a text has been marked in a document. The semantic used for the generated HTML is the tag <mark>.
==Marked text== : Marked text
Here is a footnote reference,[^1] and another.[^longnote]
This is another reference to [^1]
[^1]: Here is the footnote.
And another reference to [^longnote]
[^longnote]: Here's one with multiple blocks.
Subsequent paragraphs are indented to show that they belong to the previous footnote.
> This is a block quote
> Inside a footnote
{ some.code }
The whole paragraph can be indented, or just the first
line. In this way, multi-paragraph footnotes work like
multi-paragraph list items.
Here is a footnote reference,[^1] and another.[^longnote] This is another reference to [^1] [^1]: Here is the footnote.
And another reference to [^longnote]
[^longnote]: Here's one with multiple blocks. Subsequent paragraphs are indented to show that they belong to the previous footnote. > This is a block quote > Inside a footnote The whole paragraph can be indented, or just the first line. In this way, multi-paragraph footnotes work like multi-paragraph list items.
Markdown
- [ ] Item1
- [x] Item2
- [ ] Item3
- [ ] Item4
Html
<ul class="contains-task-list">
<li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item1</li>
<li class="task-list-item"><input disabled="disabled" type="checkbox" checked="checked" /> Item2</li>
<li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item3</li>
<li class="task-list-item"><input disabled="disabled" type="checkbox" /> Item4</li>
</ul>
Attributes can be attached to:
The previous inline element if the previous element is not a literal
The next block if the current block is a paragraph and the attributes is the only inline present in the paragraph Or the current block.
{#fenced-id .fenced-class .dark-style}
~~~
This is a fenced with attached attributes
~~~
produce:
<pre><code id="fenced-id" class="fenced-class dark-style">This is a fenced with attached attributes
</code></pre>
Attributes can be of 3 kinds:
An id element, starting by # that will be used to set the id property of the HTML element:
# This is a heading with an an attribute{#heading-link}
A class element, starting by . that will be appended to the CSS class property of the HTML element
a name=value or name="value" that will be appended as an attribute of the HTML element
produce:```mermaid graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2] ```
And here is another:
produce:```mermaid graph TD; A[User Department] -->|Submit Document| B(Accounting); B --> C{Check Budget}; C -->|Have Budget| D[Approve]; C -->|No Budget| E[Reject]; E -->| Inform User Department| A ```
```mermaid **sequenceDiagram** Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against corona virus end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! ```
produce :
gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d
```mermaid pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5 ```