Markdown Syntax Examples: Complete Code & Rendered Output Reference

Why You Need a Markdown Examples Reference

Let's be honest — Markdown syntax isn't hard, but sometimes you just can't remember that one specific thing. How do you align table columns again? Can you nest lists inside blockquotes? What's the syntax for task lists?

This article puts all the common Markdown syntax examples in one place, each with both source code and rendered output. Use it as a quick reference, or read through it once to cover about 90% of your daily writing needs.

All the examples below use standard Markdown and GitHub Flavored Markdown (GFM), which is the most widely supported flavor across GitHub, VS Code, Obsidian, Notion, and other popular platforms.

Heading Examples

Markdown uses # symbols for headings. The number of # symbols determines the heading level:

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

The rendered result looks like the different-sized headings you see on this page. In practice, Heading 1 is typically used for the document title, while Heading 2 and Heading 3 organize sections. Using only one Heading 1 per document is a solid convention.

By the way, there's also an older Setext-style heading syntax using === and ---:

Heading 1
=========

Heading 2
---------

You don't see this style much anymore, but it still shows up in some legacy documents.

Text Formatting Examples

Bold and Italic

These are the most fundamental markdown formatting examples:

**Bold text**
*Italic text*
***Bold and italic***
~~Strikethrough~~

Results:

• Bold text: wrap with double asterisks
• Italic text: wrap with single asterisks
• Bold and italic: wrap with triple asterisks
• Strikethrough: wrap with double tildes (GFM extension)

You can also use __bold__ for bold and _italic_ for italic. I personally stick with asterisks for everything — consistency matters more than which symbol you pick.

Paragraph and Line Break Examples

This is the first paragraph.

This is the second paragraph.

Paragraphs are separated by blank lines.
To break a line within a paragraph, add two spaces at the end.

This is easy to miss — pressing Enter alone doesn't create a line break. You need two trailing spaces or a <br> tag. I've been bitten by this before: wrote a long section expecting line breaks, and everything rendered on one line.

List Examples

Unordered Lists

- Apples
- Bananas
  - Baby bananas
  - Plantains
- Oranges

Result:

• Apples
• Bananas
  • Baby bananas
  • Plantains
• Oranges

You can use -, *, or + for unordered lists — they all work the same way. Nested lists use indentation, typically 2 or 4 spaces.

Ordered Lists

1. Install dependencies
2. Configure environment
3. Start the project

Result:

1. Install dependencies
2. Configure environment
3. Start the project

Task Lists

This is a GFM extension, particularly useful in GitHub READMEs and Issues:

- [x] Completed task
- [ ] Pending task
- [ ] Another to-do

Result:

• [x] Completed task
• [ ] Pending task
• [ ] Another to-do

Link Examples

[Visit GitHub](https://github.com)
[Link with title](https://github.com "GitHub Homepage")

Result: Click Visit GitHub to navigate.

There's also a reference-style link syntax, handy when you reference the same URL multiple times:

[Markdown Guide][1] is a great learning resource with lots of useful [markdown examples][2].

[1]: https://www.markdownguide.org "Markdown Guide"
[2]: https://www.markdownguide.org/basic-syntax "Basic Syntax"

Reference-style links keep URLs at the bottom of your document, making the body text cleaner. I use this approach for longer articles.

Image Examples

![Alt text](https://picsum.photos/200/100)
![Image with title](https://picsum.photos/200/100 "Sample image")

The syntax is similar to links, just with a ! prefix. The alt text in brackets displays when the image fails to load, and it helps with SEO and accessibility.

To make an image clickable, nest it inside a link:

[![Click the image](https://picsum.photos/200/100)](https://github.com)

Standard Markdown doesn't support image resizing directly, but you can use HTML <img> tags on GitHub and many editors to control dimensions.

Code Examples

Inline Code

Use `console.log()` to print debug info.

Result: Use console.log() to print debug info.

Code Blocks

Wrap code with triple backticks, optionally specifying a language for syntax highlighting:

​```javascript
function greet(name) {
  return `Hello, ${name}!`;
}
​```

Rendered result:

function greet(name) {
  return `Hello, ${name}!`;
}

Syntax highlighting supports many languages: python, java, go, rust, bash, css, html, json, yaml, and more.

Blockquote Examples

> This is a blockquote.
>
> It can span multiple paragraphs.
>
> > Blockquotes can be nested.
>
> - They can contain lists
> - And **formatted text**

Result:

This is a blockquote.

It can span multiple paragraphs.

Blockquotes can be nested.

• They can contain lists
• And formatted text

Blockquotes are great for callouts, quoting others, or highlighting important information.

Table Examples

Tables are one of the most frequently used markdown syntax examples:

| Syntax | Description | Support |
|--------|-------------|---------|
| `**bold**` | Bold text | Universal |
| `*italic*` | Italic text | Universal |
| `~~strikethrough~~` | Strikethrough | GFM |
| `[]()` | Link | Universal |

Result:

Table Alignment

| Left | Center | Right |
|:-----|:------:|------:|
| a    | b      | c     |

Result:

Colons control alignment: left side for left-align, both sides for center, right side for right-align.

Tables are the most tedious part of writing Markdown. Once you go beyond 5 columns, maintenance gets painful. For complex tables, I usually generate them with an online table tool first, then paste the result.

Horizontal Rule Examples

---

***

___

All three render as a horizontal line. The --- style is the most common. Make sure to leave blank lines before and after, otherwise it might be interpreted as a Setext heading.

Footnote Examples

Here's some text with a footnote[^1]. The footnote appears at the bottom of the document.

[^1]: This is the footnote content.

Clicking the superscript number jumps to the corresponding note. Footnotes are an extension — they work in Obsidian, Typora, and Pandoc, but not natively on GitHub.

Escape Character Examples

When you want to display Markdown special characters literally, escape them with a backslash:

\*This is not italic\*
\# This is not a heading
\[This is not a link\]

Result: *This is not italic*, # This is not a heading.

These characters can be escaped: \, `, *, _, {}, [], (), #, +, -, ., !, |.

A Complete Markdown Document Example

Tying everything together, here's a full README-style markdown document example:

# My Open Source Project

A lightweight and efficient **Web component library** for building modern interfaces.

## Features

- Rich theme customization
- Tree-shaking support
- Full TypeScript type definitions
- Test coverage > 95%

## Quick Start

​```bash
npm install my-components
​```

​```javascript
import { Button } from 'my-components';

const app = () => {
  return <Button type="primary">Click me</Button>;
};
​```

## API Reference

| Prop | Type | Default | Description |
|:-----|:-----|:-------:|:------------|
| type | string | 'default' | Button type |
| size | string | 'medium' | Button size |
| disabled | boolean | false | Disable button |

> **Note:** This library requires React >= 18.0.

## Roadmap

- [x] Core components
- [x] Documentation site
- [ ] Internationalization
- [ ] Dark theme

## Contributing

PRs are welcome! Please read the [contributing guide](https://github.com/example/contributing) first.

---

© 2024 My Open Source Project

Feel free to copy this template and adapt it for your own projects.

Platform Compatibility Notes

Markdown support varies across platforms. Here's a quick comparison of the common differences:

From my testing, GitHub is strict about nested list indentation — you must align with the parent list marker. Obsidian is more forgiving. If your document needs to work across platforms, stick with standard Markdown syntax and avoid platform-specific extensions.

References

• CommonMark Spec — The official Markdown standard
• GitHub Flavored Markdown Spec — GitHub's extension specification
• Daring Fireball: Markdown Syntax — The original specification by Markdown's creator
• Markdown Guide — Comprehensive learning resource