Writing with the Markdown syntax
This page contains examples of formatting ext with Markdown, click on the Markdown and Result tab to see how the source code corresponding outcome.
Markdown renders can look different in different places
The rendering of the same Markdown text can depend on the theme by the
rendering engine, the syntax supported by it, and the theme specified by it.
You can see how this is the case on the rendered documentaion site, the
GitHub page for this document, and Markdown preview tools (try
Ctrl+Shift+V
if you use VS Code).
Basic Syntax
The idea of Markdown is to mark text with symbols for them to be rendered, while keeping the readability of the plain text. In the following, you find standard syntaxes to Markdown, click on the result tab to see how they are rendered on a web page. A more comprehensive list of syntax can be found in this link.
# Headings start with # (hash) sign
## Add more hash to get levels of heading
Text can be formatted inline using *starts*, **double stars**; paragraphs are
separated with empty lines, single space at the end of lines should will be ignored
(and should be avoided),
New lines within a paragraph can be enforced with two spaces.
Separating lines can be manually inserted with three `-` (minus) symbols.
---
<https://url.links> and <mail.address@TeC> should be wrappend in `<>`
(pointy brackets) to be recognized.
And text with hyperlinks can be inserted with `[]` (square brackets),
in one of the three ways:
- [link with url in bracket](https://goes.to.nowhere);
- [link with url in a separated line];
- [link with an id][id_of_link].
[link with url in a separated line]: https://goes.to.nowhere
[id_of_link]: https://goes.to.nowhere
![](https://avatars.githubusercontent.com/u/45621575?s=400&u=e274624771d1656a84a223633c0397469e3a3330&v=4){width=100px}
Links can also be used to include images to the document:
## Lists
Unordered list with can be denoted with the symbols `-`, `+` or `*`:
- Apple;
- Orange;
- Banana.
Ordered list with can be denoted with numbers folowed by a `.` (dot), numbers will be
assigned automatically during the rendering:
1. Apple;
2. Orange;
3. Banana.
## Blocks
> Block quotes can be included with `>` (greater) symbols.
Code blocks can be included with the three `` ` `` (backtick or backquote)
symbols:
```bash
echo "Hello World"
```
Headings start with # (hash) sign
Add more hash to get levels of heading
Text can be formatted inline using starts, double stars; paragraphs are
separated with empty lines, single space at the end of lines should will be ignored
(and should be avoided),
New lines within a paragraph can be enforced with two spaces.
Separating lines can be manually inserted with three -
(minus) symbols.
https://url.links and mail.address@TeC should be wrappend in <>
(pointy brackets) to be recognized.
And text with hyperlinks can be inserted with []
(square brackets),
in one of the three ways:
Links can also be used to include images to the document:
Lists
Unordered list with can be denoted with the symbols -
, +
or *
:
- Apple;
- Orange;
- Banana.
Ordered list with can be denoted with numbers folowed by a .
(dot), numbers will be
assigned automatically during the rendering:
- Apple;
- Orange;
- Banana.
Blocks
Block quotes can be included with
>
(greater) symbols.
Code blocks can be included with the three `
(backtick or backquote)
symbols:
echo "Hello World"
GitHub Flavored Markdown
The above syntax gives some essential elements for technological documentations, but some extra elements might come handy, such as tables, task lists, etc. The most widely accepted set of the extensions is the ones used in GitHub. The extended syntax is called GitHub flavored markdown (GFM), and showcased below:
~~Strikeout~~ text with tildes.
Task lists with `[ ]` (square bracket with space or x) after a bullet:
- [ ] Task to be done
- [x] Finished task
Tables:
| Item | Price | Unit | Description |
|---------|-------|----------|--------------------------------------------------------------------------|
| Apple | 20 | SEK/kg | An apple is an edible fruit produced by an apple tree (Malus domestica). |
| Spinach | 30 | SEK/pack | Spinach (Spinacia oleracea) is a leafy green flowering plant. |
Strikeout text with tildes.
Task lists with [ ]
(square bracket with space or x) after a bullet:
- Task to be done
- Finished task
Tables:
Item | Price | Unit | Description |
---|---|---|---|
Apple | 20 | SEK/kg | An apple is an edible fruit produced by an apple tree (Malus domestica). |
Spinach | 30 | SEK/pack | Spinach (Spinacia oleracea) is a leafy green flowering plant. |
Extended Syntax
Some extra flexibility are given through extensions to Markdown syntax, most of
them (including the tabbed contents above) in this website are supported by the
PyMdownX package. Be aware that the following might not work as expected as a
README.md
file on GitHub.
Footnote are links labbeled with the `^` (caret) sign, they will be put into
the bottom of pages.[^1] Reference to bibtex files can be inserted with
`[@bib_key]`,[^bibtex] they will be also appear as footnotes.[^2]
[^1]: The footnote text itself can be put wherever proper in the same
document, e.g. following the paragraph.
[^bibtex]: This is supported by the [mkdocs-bibtex] package, see their
documentation for details. For this document, the bibtex file is stored
at `docs/ref.bib`, and the style is at `docs/jcp.csl`.
[mkdocs-bibtex]: https://github.com/shyamd/mkdocs-bibtex/
Math equations inline with `$...$` or in blocks with `$$ ... $$`
$$
u_{\alpha} = \frac{D^{\mathrm{s}}_{\alpha}}{RT}
= \lim_{t\to\infty} \frac{1}{6RTt}
\left\langle
\frac{1}{N_{\alpha}} \sum_{i\in\alpha}
\|\Delta \mathbf{r}_{i}(t)\|^{2}
\right\rangle
$$
Tabbed contents can be inserted with blocks indicated by three `=` (equal)
marks, followed by the title and indented text:
=== "The quick brown fox"
jumps over the lazy dog
=== "Lorem ipsum"
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
Note, warning, and error blocks may be inserted with three `!` (exclamation)
marks:
=== "Note"
!!! Note
Notes are blue.
=== "Warning"
!!! Warning "Title of the blocks can be changed"
Warnings are yellow
=== "Dangers"
!!! Danger ""
Dangers are red, and titles can be blank.
Similar syntax for collapsible blocks with three `?` (question) marks:
=== "Note"
??? Note
Notes are still blue.
=== "Warning"
??? Warning "Title of collapsible blocks can also be changed"
Warnings are still yellow.
=== "Dangers"
???+ Danger "Add a + sign to expand the block by default"
Don't set empty titles for collapsibles, though.
Footnote are links labbeled with the ^
(caret) sign, they will be put into
the bottom of pages.1 Reference to bibtex files can be inserted with
[@bib_key]
,2 they will be also appear as footnotes.3
Math equations inline with $...$
or in blocks with $$ ... $$
Tabbed contents can be inserted with blocks indicated by three =
(equal)
marks, followed by the title and indented text:
jumps over the lazy dog
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Note, warning, and error blocks may be inserted with three !
(exclamation)
marks:
Note
Notes are blue.
Title of the blocks can be changed
Warnings are yellow
Dangers are red, and titles can be blank.
Similar syntax for collapsible blocks with three ?
(question) marks:
Note
Notes are still blue.
Title of collapsible blocks can also be changed
Warnings are still yellow.
Add a + sign to expand the block by default
Don't set empty titles for collapsibles, though.
-
The footnote text itself can be put wherever proper in the same document, e.g. following the paragraph. ↩
-
This is supported by the mkdocs-bibtex package, see their documentation for details. For this document, the bibtex file is stored at
docs/ref.bib
, and the style is atdocs/jcp.csl
. ↩ -
1 A. Einstein, “Über die von der molekularkinetischen theorie der wärme geforderte bewegung von in ruhenden flüssigkeiten suspendierten teilchen,” Ann. Phys. 322(8), 549–560 (1905). ↩