Markdown
Markdown is the language used in .md
files. It's mostly used to write simple documents such as
- π Git-related documents (ex: README.md, CONTRIBUTING.md...)
- π« Documentation (ex: GIT wikis, see documentation tools...)
- ποΈ Websites (ex: GitHub Pages, see static sites generators...)
- π Articles
- πΌοΈ Presentations (ex: slick)
- ...
Note that you can use HTML inside Markdown files π«.
Resources
Editors
πͺ΅ Most used elements πͺ΅
Paragraphs
A paragraph is a block of text. Leave a blank line to close it.
Here is a text
that continues here.
Here is a text
\
that continues here. Do not use this uncommon syntax.
Here is a text that continues here.
Here is a text
that continues here. Do not use this uncommon syntax.
Basic style
-
bold:
**bold**
or__bold__
-
italic:
*italic*
or_italic_
-
bold+italic:
***bold+italic***
or___bold+italic___
-
crossed text:~~crossed text~~
or<s>crossed text</s>
-
underline:
<u>underline</u>
Titles
The more #
you add, the smaller your title becomes.
# h1 - huge title
## h2
### h3
#### h4
##### h5
###### h6 - tiny title
h1 - huge title
h2
h3
h4
h5
h6 - tiny title
Good practice π§Ή: make sure to leave a space after #
.
πΏ Other elements πΏ
Lists
Use *
, +
, or -
to create unordered lists. Use n.
for ordered lists.
1. an item
2. an item
* an item
* an item
3. an item
- an item
- an item
- an item
- an item
- an item
Links
-
example:
[example](https://example.com)
-
https://example.com:
<https://example.com>
- If supported, you can add a title
[placeholder](URL "title")
Images
-
![alt](URL)
is the same as<img src="URL" alt="alt">
-
![alt](URL "title")
with a title<img [...] title="title">
Comments
[comment]: <> (a comment)
[//]: <> (a comment)
[//]: # (a comment)
Code
Code inside a sentence is called inline code. You can write inline code in inverted quotes.
-
inline code
:`inline code`
- You can write some code blocks with syntax highlighting using 3 inverted quotes, then the highlighting language (ex: c, java, diff...).
```diff
unchanged
- removed
+ added
```
unchanged
- removed
+ added
Quotes
> some quote
some quote
Horizontal separators
***
---
___
It will work the same if you add more than 3 stars/...
π₯₯ Extended Markdown π₯₯
Extended features are available on most Markdown interpreters (ex: GitHub), but they are not available by default.
Tables
| Column name | Column name |
| --- | --- |
| tab[0][0] | tab[0][1] |
| tab[1][0] | tab[1][1] |
Column name | Column name |
---|---|
tab[0][0] | tab[0][1] |
tab[1][0] | tab[1][1] |
You may also note that you can add more than 3 hyphens (---
). And, you can use :
to align values inside a column.
-
:---
: align left -
---:
: align right -
:---:
: align center
Checkbox
* [ ] not checked
* [x] checked
- not checked
- checked
Emojis
You can write :emoji:
to render an emoji, with "emoji" the one you want. It works on GitHub, and some parsers are also supporting these. Otherwise, you may directly copy-paste emojis.
πΉ Using HTML πΉ
You can use HTML inside your Markdown.
Markdown | HTML |
---|---|
## Title | <h2>title</h2> |
**bold** | <b>bold</b> |
*italic* | <i>bold</i> |
~~crossed text~~ | <s>strike through</s> |
a list | see <ul>, <ol>, and <li> |
`code` | <code>code</code> |
[link](url) | <a href="URL">link</a> |
![alt](url) | <img src="URL" alt="alt"> |
> text | <blockquote>text</blockquote> |
--- | <hr> |
blank line | <br> |
Markdown inside HTML
You can use Markdown inside HTML, but you need to leave a blank line after the leading tag.
<div>
**Here**, you cannot use Markdown.
**But**, here you can.
</div>
But, here you can.
Center something
<div align="center">
This text is **centered**
</div>
This text is centered
Dropdowns
<details open>
<summary>Dropdown open</summary>
Content
</details>
Dropdown open
Content<details>
<summary><b>Click here to expand</b>
A short description
</summary><hr>
A long description
</details>
Click here to expand
A short description
A long description
Other nice HTML tags
Tag | Preview |
---|---|
kbd | CTRL+X |
sup (used in footnotes) | [1]: From XXX [2]: Notation used in XXX |
dl, dt (keyword), and dd (definition). (the definition is usually indented, so it looks better) |
|
abbr (show a note on hover) | some text |
mark | This word has a yellow background. |
ruby and rt (put some text above another one) | Some title |
progress | 50% |
π» To-do π»
Stuff that I found, but never read/used yet.
- GitHub Guide
- sindresorhus.com
- JetBrains
- markdown-here
- commonmark (Markdown to Java)
- remark
- unified