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
is the same as<img src="URL" alt="alt">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> |
|  | <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