Markdown Cheat Sheet

All articles on this website are written in markdown and saved as separate markdown files on the server. This article or cheat sheet provides a quick overview of all the markdown syntax elements that are supported and shows how they really look on the website.

What is Markdown?

Markdown is a lightweight and easy-to-use markup language for web writers. Markdown allows you to add formatting elements to plaintext documents and then convert them to structurally valid HTML.

Markdown syntax can be divided into two broad categories. These categories are (1) basic syntax outlined in the original design document and (2) extension of basic syntax for added capability and features.

Refer to this Markdown cheat sheet for more examples.

Basic syntax

These elements are defined in the original Markdown design document and can be used in all Markdown applications.

Detailed information and examples can be fount at basic syntax guide.

Headings

H1 heading is reserved for the main title of the article. You can use H2 to H4 to create your heading structure.

## H2 Heading
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
 
### H3 Heading
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
 
#### H4 Heading
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

H2 Heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

H3 Heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

H4 Heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Paragraph

A paragraph is done by leaving an empty line inbetween.

Here's a paragraph.
 
Here's a paragraph.

Here's a paragraph.

Here's a paragraph.

Line break

Simple line breaks are done be using <br/> at the end of the line.

Here's another one<br/>  
with a line break.

Here's another one
with a line break.

Bold

Lorem **ipsum dolor** sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et **dolore magna** aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Italic

Lorem _ipsum dolor_ sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et _dolore magna_ aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Highlight

abcd <mark>Highlight</mark> efgh

abcd Highlight efgh

Blockquote and Nested Blockquote

> Blockquote
>
> > Nested Blockquote

Blockquote

Nested Blockquote

Ordered list

1. Item 1
1. Item 2
   1. Item 2a
   1. Item 2b
1. Item 3

1. Item 1
2. Item 2
   1. Item 2a
   2. Item 2b
3. Item 3

Unordered list

- Item
- Item
  - Indented item
  - Indented item
- Item

• Item
• Item
  • Indented item
  • Indented item
• Item

Inline code

This is an inline `code`.

This is an inline code.

Horizontal line

There needs to be an empty line above and below the dashes.

Top text here
 
---
 
Bottom text here

Top text here

Bottom text here

Hyperlink

[This is the hyperlink](https://www.schminkel.de)

This is the hyperlink

Image

The original image from the /public/* folder will be used.

![alt text](/trees.jpg)
Caption goes here, this image is 3.5mb.

Caption goes here, this image is 3.5mb.

Extended syntax

These elements provide additional features by extending the basic syntax. Not all Markdown applications support these elements and each Markdown Flavor differs slightly.

This webside uses MDX that allows you to use JSX as well. Detailed information and examples can be fount at mdxjs.com.

Image with MDX

When using MDX the original image will be converted to a lower resolution automatically for better loading performance. The image path is relativ to the mdx file, in our case the image is stored in the same directory as the mdx file.

import treesJPG from './trees.jpg'
 
<figure>
  <Image src={treesJPG} alt="Trees from the top" />
  <figcaption>
    Caption goes here, this image has been converted to ~1mb.
  </figcaption>
</figure>

Table

| Syntax    | Description | Link                               | Image                                        |
| --------- | ----------- | ---------------------------------- | -------------------------------------------- |
| Header    | Title       | [amazon.de](https://www.amazon.de) | <Image src={amazonLogo} width={18} alt="" /> |
| Paragraph | Text        | [amazon.de](https://www.amazon.de) | <Image src={amazonLogo} width={18} alt="" /> |

Syntax	Description	Link	Image
Header	Title	amazon.de
Paragraph	Text	amazon.de

Code Block with no highlighting [```no]

{
    "firstName": "John",
    "lastName": "Doe",
    "age": 25
}

Code Block with JSON [```json]

{
  "firstName": "John",
  "lastName": "Doe",
  "age": 25
}

Code Block with JAVA [```java]

public class HelloWorld
{
    public static void main (String[] args)
    {
        // Output "Hello World!"
        System.out.println("Hello World!");
    }
}

Footnote

Here's a sentence with a footnote reference. [^1]
[^1]: This is the footnote.

Here's a sentence with a footnote reference. ¹

Strikethrough

abcd ~~text~~ efgh

abcd text efgh

Task list

- [x] Read the Markdown guide
- [ ] Review the style guide
- [ ] Stay awesome!

• Read the Markdown guide
• Review the style guide
• Stay awesome!

Automatic URL linking

This link is automatically detected.
https://www.example.com

This link is automatically detected. https://www.example.com

Disabling automatic URL linking

This link is displayed as simple text with different background.

`https://www.example.com`

https://www.example.com

HTML

<div>
  <p>HTML test paragraph.</p>
</div>

Further reading

The Markdown Guide provides a detailed overview of Markdown, how it works, and what can be done with it.

A collection of awesome markdown goodies (libraries, services, editors, tools, cheatsheets, etc.) can be found at Awesome Markdown Repo on GitHub.

As we are using MDX in this blog the full documentation can be found at MDX | docs.