This post is to show Markdown syntax rendering on Chirpy, you can also use it as an example of writing and a MarkDown cheat sheet.
This cheat sheet covers some commonly used Markdown syntax, but there are many more features and extensions available. For detailed information, refer to the official Markdown documentation.
Inline HTML: Since Markdown supports inline HTML, you can directly use HTML code for highlighting within your Markdown document.
1
This is some <spanstyle="background-color: #FFFF99;">highlighted text</span> in Markdown.
This is some highlighted text in Markdown.
Horizontal Rule
Some text
Some other text
1
---
Line Breaks
Text 1 Text 2
1
2
Text 1<br>
Text 2
Escaping Characters
* Escaped Asterisk *
1
\* Escaped Asterisk \*
Lists
Ordered list
Firstly
Secondly
Thirdly
1
2
3
1. Firstly
2. Secondly
3. Thirdly
Unordered list
Chapter
Section
Paragraph
1
2
3
- Chapter
+ Section
* Paragraph
ToDo list
Job
Step 1
Step 2
Step 3
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.
1
{: .prompt-tip }
An example showing the info type prompt.
1
{: .prompt-info }
An example showing the warning type prompt.
1
{: .prompt-warning }
An example showing the danger type prompt.
1
{: .prompt-danger }
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 |
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 ```
Images
Default (with caption)
Full screen width and center alignment
1
2
{: width="972" height="589" }
_Full screen width and center alignment_
Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
Full screen width and center alignment
