Markdown Cheat Sheet — Syntax, Tips & Live Preview

What Is Markdown?

Markdown is a lightweight markup language that allows you to format text using a plain text editor. It was created by John Gruber and Aaron Swartz in 2004 with the goal of being easy to read and write.

Markdown files use the .md or .markdown extension and can be converted to HTML, PDF, and other formats.

Why Use Markdown?

1. Simple syntax: Easy to learn and remember
2. Portable: Works across platforms and tools
3. Readable: Even unformatted, Markdown is easy to read
4. Versatile: Used for documentation, notes, blogs, books, and more
5. Supported everywhere: GitHub, GitLab, Reddit, Discord, Slack, and many more

Basic Markdown Syntax

Headings

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Alternative syntax for H1 and H2: `markdown Heading 1 Alternative =====================

Heading 2 Alternative --------------------- `

Emphasis

*Italic text*    or    _Italic text_
**Bold text**    or    __Bold text__
***Bold and italic***    or    ___Bold and italic___
~~Strikethrough~~    (GitHub Flavored Markdown)

Lists

#### Unordered Lists

- Item 1
- Item 2
  - Subitem 2.1
  - Subitem 2.2
- Item 3

You can also use * or + instead of -.

#### Ordered Lists

1. First item
2. Second item
   1. Indented item
   2. Another indented item
3. Third item

Links

[Link text](https://example.com)
[Link with title](https://example.com "This is the title")

Reference-style links: `markdown [Link text][reference]

[reference]: https://example.com "Optional title" `

Images

![Alt text](image.jpg)
![Alt text](image.jpg "Optional title")

Reference-style images: `markdown ![Alt text][image-reference]

[image-reference]: image.jpg "Optional title" `

Blockquotes

> This is a blockquote
> 
> It can span multiple lines
>
> > And can be nested

Horizontal Rules

---
***
___

Any of these three will create a horizontal rule.

Line Breaks

To create a line break, end a line with two or more spaces, then type return:

This line ends with two spaces  
So this appears on a new line

Alternatively, use a backslash: `markdown This line ends with a backslash\ So this appears on a new line `

Code Formatting

Inline Code

Use backticks to format text as inline code:

Here is some `inline code` in a sentence.

Code Blocks

Use triple backticks for multi-line code blocks:

```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}
```

You can specify the language for syntax highlighting after the opening triple backticks.

Indented Code Blocks

Alternatively, indent lines with 4 spaces or 1 tab:

    function greet(name) {
      console.log("Hello, " + name + "!");
    }

Advanced Markdown Syntax

Tables

| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Row 1, Col 1 | Row 1, Col 2 | Row 1, Col 3 |
| Row 2, Col 1 | Row 2, Col 2 | Row 2, Col 3 |

Align columns with colons: `markdown | Left-aligned | Center-aligned | Right-aligned | |:-------------|:--------------:|--------------:| | Left | Center | Right | `

Task Lists (GitHub Flavored Markdown)

- [x] Completed task
- [ ] Incomplete task
- [ ] Another incomplete task

Footnotes (GFM, Pandoc)

[^1]: This is the footnote text. `

Definition Lists (some implementations)

Term 1

Term 2 : Definition 2a : Definition 2b `

Abbreviations (some implementations)

*[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium `

Using FreeToolJet's Markdown Previewer

Our Markdown Previewer tool provides a live preview of your Markdown as you type:

Step-by-Step Guide

1. Open the Markdown Previewer tool
2. Type or paste your Markdown in the left panel
3. See the live preview in the right panel
4. Use the toolbar for quick formatting:
5. Copy the Markdown or export as HTML

Features

• Split-pane view: Edit and preview side-by-side
• Syntax highlighting: Code blocks are highlighted
• Toolbar: Quick insertion of common elements
• Export options: Copy as Markdown or export as HTML
• Client-side only: Your content never leaves your browser

Markdown Flavors

Different platforms have extended Markdown with additional features:

GitHub Flavored Markdown (GFM)

Used on GitHub, supports: - Tables - Task lists (- [ ]) - Strikethrough (~~text~~) - Autolinks (URLs become clickable automatically) - Code blocks with syntax highlighting

CommonMark

A strictly specified version of Markdown to resolve ambiguities.

Pandoc Markdown

Extends Markdown with academic writing features: - Citations - Footnotes - Definition lists - Superscripts/subscripts

MultiMarkdown

Extends Markdown with: - Metadata (title, author, date) - Footnotes - Definition lists - Tables - Image captions

Tips for Writing Great Markdown

1. Keep It Simple

Don't overuse formatting. Let the content shine.

2. Use Blank Lines

Separate paragraphs, lists, and blocks with blank lines for readability.

3. Be Consistent

Pick a style and stick to it: - Use * or - for unordered lists, but not both in the same document - Use # for headings, not the alternative underlining style - Use bold consistently, not mixing with __bold__

4. Escape Special Characters

Use backslash to escape Markdown syntax characters: `markdown This is not a *list item* This is not a # heading `

5. Use Descriptive Link Text

✅ [Read the documentation](https://example.com/docs)
❌ [Click here](https://example.com/docs)

Common Markdown Mistakes

Markdown Editors

Popular Markdown editors:

Converting Markdown

To HTML

# Using Pandoc

# Using markdown-it (Node.js) npx markdown-it input.md > output.html `

To PDF

# Using Pandoc with LaTeX

# Using Markdown PDF (VS Code extension) # Right-click in editor → "Markdown PDF: Export (pdf)" `

To DOCX

pandoc input.md -o output.docx

Markdown Linting

Use linters to ensure consistent Markdown:

# markdownlint (Node.js)
npm install -g markdownlint-cli

# mdl (Ruby) gem install mdl mdl *.md `

Common linting rules: - MD001: Heading levels should only increment by one level at a time - MD012: No multiple consecutive blank lines - MD031: Fenced code blocks should be surrounded by blank lines - MD041: First line should be a top-level heading

Keyboard Shortcuts for Markdown

In most Markdown editors:

Accessibility in Markdown

1. Alt text for images: Always provide meaningful alt text

1. Descriptive links: Avoid "click here"

1. Use headings hierarchically: Don't skip heading levels

Related Tools

• Markdown Previewer — Live preview Markdown as you type
• Word Counter — Count words in your Markdown
• Text Case Converter — Convert text case in Markdown
• Slug Generator — Generate slugs from Markdown headings