webdev-resources

Markdown Cheatsheet

Tecnate

Last Updated: 2024-05-19

VSCode Markdown Preview Shortcut: ⌘K V (note space).

• After opening Preview, ⌘+Shift+P and search Markdown: Open Locked Preview to the Side to lock the preview mode on this document. (Otherwise, if you open another Markdown file, the preview window will switch that the new file.)

Table of Contents

• Markdown Cheatsheet
  • Table of Contents
  • About This Document
• # h1 heading
  • ## h2 heading
    • ### h3 heading
      • #### h4 heading
        • ##### h5 heading
          • ###### h6 heading
  • Text Elements
    • Blockquotes
  • Typographic Replacements
  • Links \& Images
  • Code
  • Horizontal Rules \& Breaks
  • Lists
    • Unordered
    • Ordered

About This Document

This is a quick reference guide for the most common Markdown syntax you’ll need for your documents. For the best viewing and editing experience of this and other Markdown files:

1. Open the .md file in VSCode.
2. Install/enable the Markdown All in One extension.
3. Preview your rendered document in a side window: ⌘K V

---

---

# h1 heading

## h2 heading

### h3 heading

#### h4 heading

##### h5 heading

###### h6 heading

Text Elements

Paragraphs are the default. No special tags required for this magic!

• **Bold Text** = Bold Text
• _Italic Text_ = Italic Text
• <u>Underlined Text</u> = Underlined Text
• ~~Strikethrough Text~~ = Strikethrough Text
• ⇧⌥- — (Em Dash)

Blockquotes

Blockquotes can be nested:

> Level 1

> > Level 2

> > > Level 3

Typographic Replacements

Remove the spaces inside the parentheses of these elements:

• Copyright ( c ) = (c)
• Registered Trademark ( r ) = (r)
• Unregistered Trademark ( tm ) = (tm)
• Section/Silcrow ( p ) = (p)

To see these replacements in your preview window in VSCode, you need to change the default settings:

VSCode Settings: ⌘,

• Markdown › Preview: Typographer
• Check to enable.

Links & Images

This is how you make a link to Github with a URL.

You can link to other files as well. Type ## in the link to trigger intellisense and see markdown headers in the current workspace.

Images are similar to links Alternatively, drag an image while holding SHIFT into your document

Code

console.log(
    "Remember to include your code language after the backticks above."
);

Horizontal Rules & Breaks

• You can use HTML break syntax <br> wherever you want a line break.
• Three --- will create a horizontal rule:
• Horizontal rules are added by default under h1 and h2 headings.

Lists

Unordered

Use - to create lists:

• Item A
  • Item B
    • Multiple markers will work…
  • Keep markers consistent to prevent accidental new lists…
• Or unexpected formatting inconsistencies.

Ordered

Start numbered lists by typing 1. (note the space); press Return or Enter to start a new line/number; press Tab or Shift+Tab after a list level to nest items underneath it.

1. foo
   1. bar
   2. baz
      1. qux
      2. quux
      3. corge
   3. grault
2. garply
3. waldo
   1. fred
      1. plugh
         1. xyzzy
   2. thud

Note: it doesn’t matter if you type the correct sequential number after 1. . Any number you type will automatically render as the next number in the list.