How to preview a Markdown file

A Markdown file contains plain text formatting symbols such as #, **, -, and backticks. When you open the file in a basic text editor, you see the Markdown source rather than the formatted document.

A Markdown preview converts the source into readable HTML-style content, displaying headings, lists, tables, links, code blocks, and images as they are intended to appear.

You can preview Markdown using an online viewer, a code editor, GitHub, or a dedicated Markdown application.

What is a Markdown preview?

A Markdown preview shows how the raw Markdown will look after rendering.

Raw Markdown:

# Installation Guide

## Requirements

- Node.js
- npm
- Git

Run the following command:

```bash
npm install
```

Rendered preview:

• "Installation Guide" appears as a large heading
• "Requirements" appears as a subheading
• The requirements appear as bullets
• The command appears inside a formatted code block

Previewing helps you identify formatting errors before publishing or exporting a document.

How to preview Markdown online

An online Markdown viewer is the simplest option when you do not want to install software.

Step 1: Open the Markdown previewer

Open the Markdown viewer on Markdownly.

Step 2: Paste the Markdown

Open your .md file in a text editor and copy the content.

Paste it into the Markdown editor.

If file upload is supported, upload the .md file directly.

Step 3: Review the live preview

The formatted document appears next to the editor.

As you modify the Markdown, the preview updates automatically.

Step 4: Export or copy the output

After reviewing the content, you may be able to:

• Download it as PDF
• Download it as Word
• Copy the Markdown
• Copy the rendered content
• Continue editing the document

How to preview Markdown in VS Code

Visual Studio Code includes built-in Markdown preview functionality.

Open the file

Open the .md file in VS Code.

Open the preview

Use one of these options:

• Open the Command Palette and choose Markdown: Open Preview
• Select the preview icon in the editor
• Use the Markdown preview keyboard shortcut configured for your operating system

Open the preview beside the editor

Choose Markdown: Open Preview to the Side to view the source and rendered document together.

This is useful for README files, technical documentation, and development projects.

How to preview Markdown on GitHub

GitHub automatically renders Markdown files in repositories.

Common examples include:

• README.md
• CONTRIBUTING.md
• CHANGELOG.md
• Issue templates
• Pull request templates

To preview a Markdown file on GitHub:

1. Add the .md file to a repository.
2. Open the file on GitHub.
3. GitHub displays the rendered version automatically.

When editing Markdown on GitHub, you can switch between the editing and preview tabs before committing the change.

GitHub uses GitHub-Flavoured Markdown, which supports features such as:

• Tables
• Task lists
• Strikethrough
• Autolinks
• Fenced code blocks

How to preview Markdown in a browser

Browsers do not usually render local .md files as formatted Markdown by default.

When you open a Markdown file directly, the browser may:

• Display plain text
• Download the file
• Show the raw Markdown source

To preview Markdown in a browser, you can use:

• An online Markdown viewer
• A browser extension
• A locally hosted Markdown renderer
• A documentation platform
• A static site generator

For occasional use, an online viewer is the fastest option.

Markdown elements to check in the preview

Headings

# Heading 1
## Heading 2
### Heading 3

Make sure the heading hierarchy is logical and not used only for visual size.

Lists

- First item
- Second item
  - Nested item

Check indentation carefully when using nested lists.

Tables

| Name | Status |
|---|---|
| Design | Complete |
| Development | In progress |

Verify that pipes, separators, and column counts are correct.

Links

[Visit the documentation](https://example.com)

Confirm that links point to the expected destination.

Images

![Dashboard preview](https://example.com/dashboard.png)

Check that the image URL is public and available.

Code blocks

```python
print("Hello")
```

Add a language name to enable syntax highlighting where supported.

Task lists

- [x] Complete design
- [ ] Begin development

Task-list rendering may depend on GitHub-Flavoured Markdown support.

Why is my Markdown preview not working?

Missing blank lines

Some Markdown parsers require blank lines between blocks.

Instead of:

## Heading
Paragraph text

Use:

## Heading

Paragraph text

Incorrect table separators

A Markdown table requires a separator row.

Incorrect:

| Name | Role |
| Vinoth | Product Manager |

Correct:

| Name | Role |
|---|---|
| Vinoth | Product Manager |

Improper list indentation

Nested lists usually require consistent spaces.

- Parent item
  - Child item

Unclosed code blocks

Fenced code blocks require closing backticks.

```javascript
console.log("Hello");
```

Unsupported Markdown extensions

Some tools support only standard Markdown, while others support:

• GitHub-Flavoured Markdown
• Mermaid diagrams
• Mathematical equations
• Footnotes
• Custom alerts
• Raw HTML

A document may look different across preview tools because parsers support different features.

Broken image URLs

Remote images will not appear if:

• The URL is incorrect
• The image requires login
• The server blocks external access
• The image has been removed
• Browser security restrictions prevent loading

Online preview versus installed editor

Use an online previewer for quick viewing and conversion. Use an installed editor for long-term documentation workflows.

Frequently asked questions