Examples¶
This page contains various content examples that you can use as a reference.
Info
Please, use the tabs Example and Markdown throughout the page in order to switch between the visual representation and the underlying markdown syntax!
Let’s dive in!
Table of contents¶
Generates Table of Contents from all headings used on the same page automatically.
[TOC]Headings¶
# Heading 1
## Heading 1
### Heading 3
#### Heading 4
#### Heading 5
##### Heading 6
###### Heading 7Text formatting¶
Bold
Italic
Strikethrough
**Bold**
*Italic*
~~Strikethrough~~Elements¶
Horizontal line¶
---
or
***Quotation¶
This is a quotation
And it can consist of multiple lines
It can be nested, too
Even further
> This is a quotation
>
> And it can consist of multiple lines
> > It can be nested, too
> > > Even furtherLists¶
Unordered¶
- Item 1
- Item 2
- Subitem 1
- Subitem 2
- Subitem 3
- Item 3
- Item 1
- Item 2
- Subitem 1
- Subitem 2
- Subitem 3
- Item 3Ordered¶
- Item 1
- Item 2
- Subitem 1
- Subitem 2
- Subitem 3
- Item 3
1. Item 1
2. Item 2
1. Subitem 1
2. Subitem 2
1. Subitem 3
3. Item 3Checklist¶
- Item 1
- Item 2
- Subitem 1
- Subitem 2
- Subitem 3
- Item 3
- [ ] Item 1
- [x] Item 2
- [x] Subitem 1
- [x] Subitem 2
- [x] Subitem 3
- [x] Item 3Images¶
You can specify custom width, height, both or none.
Custom width¶
{width="500" height=""}Custom height¶
{width="" height="200"}Custom width & height¶
{width="500" height="100"}Tables¶
Regular¶
| H1 | H2 | H3 |
|---|---|---|
| Bold text | Normal text | Inline code |
| Bold text | Normal text | Inline code |
| H1 | H2 | H3 |
| --- | --- | --- |
| **Bold text **| **Normal text** | `Inline code` |
| **Bold text **| **Normal text** | `Inline code` |Right aligned columns¶
| H1 | H2 | H3 |
|---|---|---|
| Bold text | Normal text | Inline code |
| Bold text | Normal text | Inline code |
| H1 | H2 | H3 |
| ---: | ---: | ---: |
| **Bold text **| **Normal text** | `Inline code` |
| **Bold text **| **Normal text** | `Inline code` |Links¶
[Link to docwriter.io](https://docwriter.io)
[fake.email@email.com](mailto:fake.email@email.com)
https://docwriter.ioCodeblocks¶
Inline¶
Some text with inline codeblocks.
Some `text` with `inline codeblocks`.Multiline¶
Generic
codeblockvar x, y, z; // Declare 3 variables
x = 5; // Assign the value 5 to x
y = 6; // Assign the value 6 to y
z = x + y; // Assign the sum of x and y to zfunction abc(string $a, bool $b) {
echo $a;
echo $b;
} ```text
Generic
codeblock
``` ```javascript
var x, y, z; // Declare 3 variables
x = 5; // Assign the value 5 to x
y = 6; // Assign the value 6 to y
z = x + y; // Assign the sum of x and y to z
``` ```php
function abc(string $a, bool $b) {
echo $a;
echo $b;
}
```Info
You can use other code syntax directives, too, like css, bash etc.
Admonitions¶
Use the editor toolbar to insert Admonition blocks easily!
Info
This is info block
With multiple lines and it can contain any Markdown markup inside of it, like Ctrl+Alt+Del
Warning
This is something important!
Danger
Don’t miss this out!
Special¶
Keys¶
https://facelessuser.github.io/pymdown-extensions/extensions/keys/
Ctrl+Alt+Del
++ctrl+alt+delete++Mark¶
https://facelessuser.github.io/pymdown-extensions/extensions/mark/
mark me
smart==mark
==mark me==
==smart==mark==ProgressBar¶
https://facelessuser.github.io/pymdown-extensions/extensions/progressbar/
[=85% "85%"]{: .progress-bar-striped}Tabbed¶
https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/
Markdown content.
More Markdown content.
=== "Tab 1"
Markdown **content**.
=== "Tab 2"
More Markdown **content**.SmartSymbols¶
https://facelessuser.github.io/pymdown-extensions/extensions/smartsymbols/
© ® ™ ± ℅ → ← ↔ ≠ ¼ 1st 2nd 3rd 4th
Lines – —
“Double quotes” and ‘single quotes’
(c) (r) (tm) +/- c/o --> <-- <--> =/= 1/4 1st 2nd 3rd 4th
Lines -- ---
"Double quotes" and 'single quotes'Emojies¶
https://github.com/markdown-it/markdown-it-emoji
:wink: :cry: :laughing: :yum: :smile: :heart: :thumbsup:Subscript / Superscript¶
https://github.com/markdown-it/markdown-it-sub https://github.com/markdown-it/markdown-it-sup
- 19th
- H~2~O
* 19^th^
* H~2~OIns¶
https://github.com/markdown-it/markdown-it-ins
Inserted text
^^Inserted text^^Footnotes¶
https://github.com/markdown-it/markdown-it-footnote
Footnote 1 link[^first].
Footnote 2 link[^second].
Duplicated footnote reference[^second].
[^first]: Footnote **can have markup**
[^second]: Footnote text.Attention
Check the bottom of this page for the generated footnotes!
Abbreviations¶
https://github.com/markdown-it/markdown-it-abbr
This is HTML abbreviation example.
It converts “HTML”, but keep intact partial entries like “xxxHTMLyyy” and so on.
This is HTML abbreviation example.
It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
*[HTML]: Hyper Text Markup LanguageLink in heading SCHEDULER_PRIORITY_QUEUE¶
## Link in heading [`SCHEDULER_PRIORITY_QUEUE`](https://docs.scrapy.org/en/latest/topics/settings.html#std-setting-SCHEDULER_PRIORITY_QUEUE)Graphviz¶
Graphviz markdown documentation: https://graphviz.org/documentation/
```dot [DELETE THIS]
digraph finite_state_machine {
rankdir=LR;
size="20,5"
node [shape = point ]; qi
node [shape = rectangle];
qi -> Created;
Created -> "In Process";
Created -> "Closed";
"In Process" -> "Waiting for Approval"
"In Process" -> "Approved"
"In Process" -> "Rejected"
"In Process" -> "Transit"
"In Process" -> "Completed"
"In Process" -> "Processed"
"In Process" -> "Pending Payment"
"Waiting for Approval" -> "Rejected"
"Waiting for Approval" -> "Approved"
"Waiting for Approval" -> "In Process"
"Waiting for Approval" -> "Closed"
"Waiting for Approval" -> "Completed"
"Waiting for Approval" -> "Processed"
"Approved" -> "Rejected";
"Approved" -> "Option selected";
"Approved" -> "Closed";
"Approved" -> "In Process";
"Approved" -> "Transit";
"Approved" -> "Completed";
"Approved" -> "Processed";
"Rejected" -> "Approved";
"Rejected" -> "Closed";
"Rejected" -> "In Process";
"Rejected" -> "Completed";
"Pending Payment" -> "Option Selected";
"Pending Payment" -> "Closed";
"Option Selected" -> "Pre-Transit"
"Option Selected" -> "Transit"
"Pre-Transit" -> "Closed"
"Pre-Transit" -> "Transit"
"Transit" -> "Warehouse"
"Transit" -> "Exception"
"Exception" -> "Transit"
"Warehouse" -> "Processed"
"Warehouse" -> "Transit"
"Warehouse" -> "Closed"
"Processed" -> "Completed"
"Processed" -> "Warehouse"
"Completed" -> "Processed"
"Completed" -> "Closed"
}
```