This Markdown cheat sheet provides a quick overview of all the Markdown syntax elements. It can’t cover every edge case, so if you need more information about any of these elements, refer to the reference guides for basic syntax and extended syntax.

1. For generated page.excerpt, include the first paragraphs and/or avoid using comments after the front matter.

2. If using the inline attribute list {: ... } and it doesn’t work as expected, see further Attribute List Definitions.

Table of Contents

Basic Features

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs

Elit ex ex eiusmod duis cupidatat duis esse laboris et sit reprehenderit eu. Elit sint nostrud ex reprehenderit fugiat do elit anim veniam nulla veniam amet. Nisi velit deserunt sunt excepteur irure ut ipsum excepteur minim.

Et laborum minim elit laboris dolor in. Nisi sunt labore pariatur magna fugiat cupidatat qui quis consequat aliqua commodo. Dolor nisi veniam elit proident. Irure laboris tempor consectetur ad enim ea officia ullamco.

Emphasis

Bold text

Italicized text

Strikethrough

Lists

Ordered List

1. First item
2. Second item
3. Third item
   1. Indented item
   2. Indented item
4. Fourth item

Unordered List

• First item
• Second item
• Third item
  • Indented item
    • Indented item
• Fourth item

Definition List

First Term

This is the definition of the first term.

Second Term

This is one definition of the second term.

This is another definition of the second term.

Task/Todo List

• Write the press release
• Update the website
• Contact the media

Links

https://jekyllrb.com

Free Palestine.

Blockquotes

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.

—Aldous Huxley, Brave New World

Codes

Sample output: This is sample output from a computer program.

Keyboard input: Ctrl + Shift + Esc

Inline code: {"firstName": "John","lastName": "Smith","age": 25}

Block code:

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

Footnotes

Here’s a simple footnote,¹ and here’s a longer one.²

Tables

Table with Github Flavored Markdown:

Column 1	Column 2	Column 3
Cell 1	Cell 1	Cell 1
Cell 2	Cell 2	Cell 2
Cell 3	Cell 3	Cell 3
Cell 4	Cell 4	Cell 4

Table with HTML elements:

Front-end web developer course 2021

Person	Most interest in	Age
Chris	HTML tables	22
Dennis	Web accessibility	45
Sarah	JavaScript frameworks	29
Karen	Web performance	36
Average age		33

Horizontal Rule

---

Images

Float to left

Labore do pariatur labore labore Lorem occaecat nulla. Non do adipisicing est officia et. Dolore ullamco laboris est commodo laborum magna ut amet ad dolor ipsum anim aliquip consectetur. Cupidatat culpa in quis ea quis dolor amet velit minim.

Float to right

Enim voluptate ullamco amet ipsum qui incididunt aliqua culpa cillum commodo aliqua. Incididunt Lorem consequat elit tempor officia sunt incididunt Lorem nulla minim excepteur duis consequat. Ullamco eiusmod ex consectetur fugiat dolore laboris nulla dolor. Consequat esse cupidatat sunt sit proident consequat officia sit. In enim ea tempor laborum. Dolor laboris esse ad consectetur minim ut velit non ipsum minim labore.

Extended Features

Code Blocks

This is a code block with syntax highlighting:

{
  "thisSyntax": error,
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

For more syntax highlighting see: Rouge Highlighting

Admonitions

Alerts or admonitions are frequently used in documentation to draw attention to warnings, notes, and other important information. The example below is adapted from GitHub Flavored Markdown.

Default:

General information or also for Blockquote alternatives.

Note:

Highlights information that users should consider, even when skimming.

Tip:

Optional information to help a user be more successful.

Important:

Crucial information necessary for users to succeed.

Warning:

Critical content requiring immediate user attention due to potential risks.

Caution:

Potential negative consequences of an action.

Diagramming

Diagramming and charting powered by Mermaid:

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit

For more Mermaid syntax see: Mermaid Diagram

Mathematics

inline: \(f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi\)

display mode (centered):

\[f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi\]

Other elements

Abbreviation: *[HTML]: Hyper Text Markup Language The HTML specification is maintained by the W3C.

Marked: very important words.

Subscript: C₈H₁₀N₄O₂

Superscript: E=mc².

Emoji Shortcodes

If you see as an emoji like this ✋ it means Emoji Shortcode is enable by plugin, otherwise open terminal and run the command below:

# Add plugin to Gemfile
echo 'gem "jemoji", group:jekyll_plugins' >> Gemfile

# Install plugin
bundle install

# Test on local
bundle exec jekyll serve --watch

In most cases, you can simply copy an emoji from a source like Emojipedia or EmojiCopy then paste it into your document.

1. This is the first footnote. ↩

2. Here’s one with multiple paragraphs and code.

   Indent paragraphs to include them in the footnote.

   { my code }

   Add as many paragraphs as you like. ↩