This post has been sourced from Chirpy and it is intended to demonstrate Markdown syntax rendering, You can also utilize it as a writing example. For more information, please visit the markdown documentation guide. Now, let’s begin exploring the markdown syntax.

Headings

To create a heading, add number signs (#) in front of a word or phrase. The number of number signs you use should correspond to the heading level. For example, to create a heading level three (<h3>), use three number signs (e.g., ### My Header). Or you can also use html tags.

Markdown HTML
# H1 - Heading level 1 <h1>H1 - Heading level 1</h1>
## H2 - Heading level 2 <h2>H2 - Heading level 2</h2>
### H3 - Heading level 3 <h3>H3 - Heading level 3</h3>
#### H4 - Heading level 4 <h4>H4 - Heading level 4</h4>
##### H5 - Heading level 5 <h5>H5 - Heading level 5</h5>
###### H6 - Heading level 6 <h6>H6 - Heading level 6</h6>
Rendered Output

H1 - Heading level 1

H2 - Heading level 2

H3 - Heading level 3

H4 - Heading level 4

H5 - Heading level 5
H6 - Heading level 6

Paragraph

To create paragraphs, use a blank line to separate one or more lines of text.

Generating random paragraphs can be an excellent way for writers to get their creative flow going at the beginning of the day. The writer has no idea what topic the random paragraph will be about when it appears. This forces the writer to use creativity to complete one of three common writing challenges. The writer can use the paragraph as the first one of a short story and build upon it. A second option is to use the random paragraph somewhere in a short story they create. The third option is to have the random paragraph be the ending paragraph in a short story. No matter which of these challenges is undertaken, the writer is forced to use creativity to incorporate the paragraph into their writing.

Lists

You can organize items into ordered and unordered lists.

Ordered list

  1. Firstly
  2. Secondly
  3. Thirdly

Unordered list

1
2
3

- Chapter
  - Section
    - Paragraph
Rendered Output
  • Chapter
    • Section
      • Paragraph

Mix list

You can nest an unordered list in an ordered list, or vice versa.

1
2
3
4
5

1. First item
2. Second item
   - Indented item
     - Indented item
3. Third item
Rendered Output
  1. First item
  2. Second item
    • Indented item
      • Indented item
  3. Third item

ToDo list

1
2
3
4

- [ ] Job
  - [x] Step 1
  - [x] Step 2
  - [ ] Step 3
Rendered Output

  • Job

    • Step 1
    • Step 2
    • Step 3

    Hover Text

1
2
3

[id1]: ## "your hover text"

This is a [hover text][id1] example.
Rendered Output

This is a hover text example.

Description list

1
2

Def-name
\ \ : description/definition
Rendered Output
Sun
the star around which the earth orbits
Moon
the natural satellite of the earth, visible by reflected light from the sun

Block Quote

Add “> “ to the beginning of the paragraph

This line shows the block quote.

Prompts

1
2

> An example showing the `tip` type prompt.
> {: .prompt-tip }

An example showing the tip type prompt.

1
2

> An example showing the `info` type prompt.
> {: .prompt-info }

An example showing the info type prompt.

An example showing the warning type prompt.

An example showing the danger type prompt.

Tables

To add a table, just copy and modify the code below

1
2
3

| Company | Contact      | Country |
| :------ | :----------- | ------: |
| Tesla   | Maria Anders | Germany |
Rendered Output
Company Contact Country
Tesla Maria Anders Germany
Apple Helen Bennett UK
Rolex Giovanni Rovelli Italy

To create a link, enclose the link text in brackets (e.g., [Markdown Guide]) and then follow it immediately with the URL in parentheses (e.g., (https://www.markdownguide.org/basic-syntax/#overview)).

1

[link-name](link-url)
Rendered Output

Markdown Guide

To quickly turn a URL into a link, enclose it in angle brackets “<>”.

1

<https://www.markdownguide.org/basic-syntax>
Rendered Output

https://www.markdownguide.org/basic-syntax

Emphasis

You can add emphasis by making text bold or italic.

Bold

1

**bold text**

This is a bold text

Italic

remove the “"

1

\*Italic text\*

This is an italic text

Footnote

Click the hook will locate the footnote1, and here is another footnote2.

Inline code

1

`Inline Code`

This is an example of Inline Code.

Filepath

1

Here is the `/path/to/the/file.extend`{: .filepath}.

Here is the /path/to/the/file.extend.

Code blocks

Common

1
2
3

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;

Specific filename

@import “colors/light-typography”, “colors/dark-typography”;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

{: file='\_sass/jekyll-theme-chirpy.scss'}

## Mathematics

The mathematics powered by [**MathJax**](https://www.mathjax.org/):

$$ \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

```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

Add Images

Default (with caption)

Desktop View Full screen width and center alignment

Left aligned

Desktop View

Float to left

Desktop View 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.

Float to right

Desktop View 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.

Dark/Light mode & Shadow

The image below will toggle dark/light mode based on theme preference, notice it has shadows.

light mode only dark mode only

Video

Adding a Youtube video is super easy, you just copy the code below and modify the id. Make sure to delete the dashes (-)

1

{-% include embed/youtube.html id='xopvkx6CpNs' %-}
Rendered Output

📺 Watch Video

Reverse Footnote

  1. The footnote source ↩

  2. The 2nd footnote source ↩