This post is a revised version of Chirpy:Text and Typography by Cotes Chung. It serves as a concise Markdown cheat sheet, that I use daily, covering a range of commonly used syntax elements. There are numerous additional features and extensions not covered here. For comprehensive information, refer to the official Markdown documentation. official Markdown documentation.
Now, let’s start looking at text and typography.
Headings
H1 - heading
H2 - heading
H3 - heading
H4 - heading
1
2
3
4
5
6
7
| <h1 class="mt-5">H1 - heading</h1>
<h2 data-toc-skip>H2 - heading</h2>
<h3 data-toc-skip>H3 - heading</h3>
<h4>H4 - heading</h4>
|
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
1
| ## Heading {#custom-id}
|
Emphasis
- Italic Text
- Bold Text
Strikethrough Text- Underline
1
2
3
4
| *Italic Text*
**Bold Text**
~~Strikethrough Text~~
<u>Underline</u>
|
Highlight text
Inline HTML: Since Markdown supports inline HTML, you can directly use HTML code for highlighting within your Markdown document.
1
| This is some <span style="background-color: #FFFF99;">highlighted text</span> in Markdown.
|
- This is some highlighted text in Markdown.
Horizontal Rule
Some text
Some other text
Line Breaks
Text 1
Text 2
Escaping Characters
* Escaped Asterisk *
Lists
Ordered list
- Firstly
- Secondly
- Thirdly
1
2
3
| 1. Firstly
2. Secondly
3. Thirdly
|
Unordered list
1
2
3
| - Chapter
+ Section
* Paragraph
|
ToDo list
1
2
3
4
| - [ ] Job
+ [x] Step 1
+ [x] Step 2
+ [ ] Step 3
|
Description list
- Sun
- the star around which the earth orbits
- Moon
- the natural satellite of the earth, visible by reflected light from the sun
1
2
3
4
5
| Sun
: the star around which the earth orbits
Moon
: the natural satellite of the earth, visible by reflected light from the sun
|
Collapsible
You can use HTML and CSS to create a collapsible section in Markdown. The most common way is to use a combination of HTML and CSS with a checkbox and the adjacent sibling selector (+).
Write your Markdown content as usual, including the content you want to make collapsible.
Convert the collapsible section into an HTML block using <details> and <summary> tags. The <summary> tag will serve as the collapsible header.
Style the collapsible section with CSS to control its appearance and behavior.
Here’s an example of how to create a collapsible section in Markdown:
1
2
3
4
5
6
7
8
9
10
| <details>
<summary>Click to expand/collapse</summary>
This is the content of the collapsible section.
- You can include lists
- Add various elements
- Any content you want!
</details>
|
When rendered, the content inside the <details> element will be hidden initially, and users will see the summary as the header of the collapsible section. Clicking on the summary will toggle the visibility of the content.
The exact appearance and behavior of collapsible sections may vary slightly depending on the Markdown rendering engine.
Block Quote
This line shows the block quote.
1
| > This line shows the _block quote_.
|
Prompts
An example showing the tip type prompt.
An example showing the info type prompt.
An example showing the warning type prompt.
An example showing the danger type prompt.
Tables
| Company | Contact | Country |
|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Island Trading | Helen Bennett | UK |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
1
2
3
4
5
| | Company | Contact | Country |
| :--------------------------- | :--------------- | ------: |
| Alfreds Futterkiste | Maria Anders | Germany |
| Island Trading | Helen Bennett | UK |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
|
Links
Inline hyperlink
http://127.0.0.1:4000
1
| <http://127.0.0.1:4000>
|
Inline hyperlink Text
Link Text
1
| [Link Text](https://www.example.com)
|
Inline hyperlink with new tab attribute
Link Text open in a new tab
1
| [Link Text](https://www.example.com){:target="_blank"}
|
Inline code
This is an example of Inline Code.
1
| This is an example of `Inline Code`.
|
Filepath
Here is the /path/to/the/file.extend
1
| Here is the `/path/to/the/file.extend`{: .filepath}
|
Code blocks
Common
1
| This is a common code snippet, without syntax highlight and line number.
|
``` plaintext
This is a common code snippet, without syntax highlight and line number.
```
Specific Language
1
2
3
4
| if [ $? -ne 0 ]; then
echo "The command was not successful.";
# do the needful / exit
fi;
|
```bash
if [ $? -ne 0 ]; then
echo “The command was not successful.”;
#do the needful / exit
fi;
```
Specific filename
1
2
3
| @import
"colors/light-typography",
"colors/dark-typography";
|
```sass
@import
“colors/light-typography”,
“colors/dark-typography”;
```
Mathematics
The mathematics powered by MathJax:
\[\sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}\]
When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\]
1
2
3
4
5
6
7
| The mathematics powered by [**MathJax**](https://mathjax.org){:target="_blank"}:
$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$
When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
|
Mermaid SVG
gantt
title Adding GANTT diagram functionality to mermaid
apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d
cherry :active, c, after b a, 1d
```mermaid
gantt
title Adding GANTT diagram functionality to mermaid
apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d
cherry :active, c, after b a, 1d
```
Click the hook will locate the footnote, and here is another footnote.
1
| Click the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2].
|
1
2
| [^footnote]: The footnote source
[^fn-nth-2]: The 2nd footnote source
|