Markdown Demo — Every Syntax Cheat Sheet

This post exists purely as a reference. It exercises every common markdown feature so you can see exactly how each one renders on this blog before you use it in a real post.

Headings

Headings start at h2 in post body (the post title itself is the page's h1).

This is an h3

This is an h4

This is an h5

This is an h6

Text formatting

Plain paragraph text looks like this. You can make text bold using double asterisks, or italic using single asterisks. You can also combine bold and italic together.

You can mark something as strikethrough using double tildes.

Inline code looks like const x = 1 using single backticks — different from a full code block below.

Blockquotes

This is a blockquote. Useful for callouts, quoted text, or notes.

Note: blockquotes can contain other markdown too, like bold text or inline code.

Lists

Unordered list

• First item
• Second item
  • Nested item one
  • Nested item two
• Third item

Ordered list

1. First step
2. Second step
   1. Sub-step A
   2. Sub-step B
3. Third step

Task list

• Write the demo post
• Cover code blocks
• Publish more real posts

Links

This is a link to Gatsby's docs.

You can also use a bare autolink: https://www.gatsbyjs.com

Images

Markdown image syntax looks like this (shown as code here since this demo post has no real image file to point to — swap in a real relative path in your own posts):

![Description of the image](../assests/your-image.png)

Horizontal rule

Below this line is a horizontal rule.

Above this line was a horizontal rule.

Code blocks

Fenced code blocks support syntax highlighting per language. Specify the language right after the opening triple backtick.

function greet(name) {
  const message = `Hello, ${name}!`
  console.log(message)
  return message
}

{
  "name": "demo",
  "nested": {
    "enabled": true,
    "count": 3
  }
}

.dangerHtml {
  font-size: 1.4rem;
  line-height: 1.8;
}

npm install gatsby-remark-prismjs prismjs
npm run dev

A code block with no language specified still renders in monospace, just without color highlighting:

plain text block
no syntax highlighting here

Tables

Combining things

You can mix formatting inside a single list item, like bold, italic, inline code, and a link to the Gatsby homepage all together.

A blockquote can also contain a list:

• item one
• item two