Online Markdown Editor

Free online Markdown editor with live preview, GitHub Flavored Markdown support, and HTML conversion. Perfect for creating documentation, README files, and formatted text.

Loading editor...

Features

Live Preview

See your changes in real-time as you type

GitHub Flavored Markdown

Full support for GitHub's Markdown extensions

Share & Export Features

Share your work or export to various formats

HTML Conversion

Convert your markdown to HTML instantly

Table Support

Create and format tables with ease

Code Syntax Highlighting

Highlight code blocks in multiple languages

Interactive Markdown Cheat Sheet

Quick reference guide for markdown syntax

Theme Support

Light and dark themes for comfortable editing

Frequently Asked Questions

What is Markdown?

Markdown is a lightweight markup language for formatting text documents. Here's a quick example:

# Heading 1
## Heading 2

This is a paragraph with **bold** and *italic* text.

* Bullet point 1
* Bullet point 2

> This is a blockquote

Created by John Gruber in 2004, Markdown is now one of the world's most popular markup languages, used for:

  • Documentation
  • README files
  • Blog posts
  • Technical writing
What is a markdown file?

A Markdown file uses the .md or .markdown extension and contains formatted text. Example structure:

# Project Name

## Description
This project does something awesome.

## Installation
```bash
npm install awesome-project

Features

  1. Feature one
  2. Feature two

Markdown files can be converted to:
- HTML for web pages
- PDF documents
- Documentation sites
How to style text in Markdown?

Here are common text styling options:

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

**Bold text** or __bold text__
*Italic text* or _italic text_
***Bold and italic***

~~Strikethrough text~~

`inline code`

```python
# Code block with syntax highlighting
def hello():
    print("Hello, World!")

Try these examples in our editor to see them in action.
How to create lists and tables?

Here's how to create various types of lists and tables:

# Unordered List
* Item 1
* Item 2
  * Subitem 2.1
  * Subitem 2.2

# Ordered List
1. First item
2. Second item
   1. Subitem 2.1
   2. Subitem 2.2

# Table
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

Tables can be aligned using colons:

  • :--- left align
  • :---: center align
  • ---: right align
How to add links and images?

Here's how to include links and images:

# Links
[Link text](https://example.com)
[Link with title](https://example.com "Title text")

# Images
![Alt text](image.jpg)
![Alt text](image.jpg "Image title")

# Reference-style Links
[Link 1][1]
[Link 2][2]

[1]: https://example.com
[2]: https://example.com/page2

You can also combine images and links:

[![Image alt text](image.jpg)](https://example.com)
Can I use Markdown with HTML?

Yes! You can mix HTML with Markdown. Here are some examples:

# Markdown with HTML

<div style="color: blue">
  This text is blue and contains **bold** markdown
</div>

<details>
<summary>Click to expand</summary>

* Markdown list inside HTML
* Another item
</details>

<table>
  <tr>
    <td>HTML table with **Markdown**</td>
  </tr>
</table>

Note: Some Markdown processors may have limitations on mixing HTML and Markdown.

Where can I learn more about Markdown?

Explore these official resources and learning materials:

Official Specifications:

Learning Resources:

Documentation & Technical Writing:

These resources cover everything from basic syntax to advanced documentation workflows!

Markdown Quick Reference

Common Markdown syntax and GitHub Flavored Markdown extensions.

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

Create headings using 1-6 hash symbols

Example: # Main Title
**bold text** or __bold text__
*italic text* or _italic text_
***bold and italic***

Text formatting: bold, italic, and combinations

Example: This is **bold** and *italic*
> This is a blockquote
> 
> With multiple lines
> > And nested quotes

Blockquotes for highlighting important content

Example: > Important note
1. First ordered item
2. Second ordered item
   1. Nested ordered item
   2. Another nested item

Ordered lists with numbering and nesting

- Unordered item
- Another item
  - Nested item
  - Another nested item
* Alternative bullet
+ Another alternative

Unordered lists with bullets and nesting

`inline code` and `variable names`

Inline code formatting

Example: Use `const` keyword
---

Horizontal rule above

Horizontal rule to separate content

Links & Images
[Link text](https://example.com)
[Link with title](https://example.com "Hover title")

Basic links with optional hover titles

Example: [Google](https://google.com)
[Reference link][1]
[Another reference][ref]

[1]: https://example.com
[ref]: https://example.com "Title"

Reference-style links for cleaner text

![Alt text](image.jpg)
![Alt text](image.jpg "Image title")
![Alt text][image-ref]

[image-ref]: image.jpg

Images with alt text, titles, and references

[![Image alt](image.jpg)](https://example.com)

Clickable images (image links)

Code Blocks
```javascript
const greeting = "Hello, World!";
console.log(greeting);
```

Fenced code blocks with syntax highlighting

```python
def hello_world():
    print("Hello, World!")
    
hello_world()
```

Python code with proper indentation

    // Indented code block
    function example() {
        return "indented with 4 spaces";
    }

Indented code blocks (4 spaces or 1 tab)

```bash
# Command line examples
npm install package-name
git commit -m "Update documentation"
```

Shell/bash commands and scripts

Tables
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

Basic table structure with headers and rows

| Left align | Center align | Right align |
|:-----------|:------------:|------------:|
| Left       | Center       | Right       |
| Text       | Text         | Text        |

Table alignment: left (:---), center (:---:), right (---:)

| Feature | Status | Notes |
|---------|--------|-------|
| **Bold** | `code` | *italic* |
| [Link](/) | ~~strike~~ | Normal |

Tables can contain other Markdown formatting

GitHub Flavored Markdown
- [x] Completed task
- [ ] Incomplete task
- [x] Another completed task
- [ ] Work in progress

Task lists with checkboxes

~~strikethrough text~~

Strikethrough text formatting

Example: ~~deleted content~~
==highlighted text==

Highlighted text (GitHub extension)

Example: ==important information==
:smile: :heart: :thumbsup: :rocket:

Emoji shortcodes (GitHub and many platforms)

Example: :tada: Success! :tada:
@username mentions and #123 issue references

GitHub-specific references and mentions

Advanced Features
<details>
<summary>Click to expand</summary>

Hidden content here.

- Can contain lists
- And other Markdown

</details>

Collapsible sections using HTML details/summary

<!-- This is a comment -->
<!-- Comments are not visible in rendered output -->

HTML comments for notes and documentation

<kbd>Ctrl</kbd> + <kbd>C</kbd>
<kbd>⌘</kbd> + <kbd>V</kbd>

Keyboard shortcuts using kbd tags

Text with footnote[^1]

[^1]: This is the footnote content.

Footnotes for additional information

Escaping & Special Characters
\* Escaped asterisk
\# Escaped hash
\[Escaped bracket\]

Escape special Markdown characters with backslash

Use `*literal asterisks*` in code
Or <em>HTML tags</em> directly

Alternative ways to include literal characters

Resources

CommonMark Specification

Standard Markdown specification

GitHub Flavored Markdown

GitHub's extended specification

Markdown Guide

Comprehensive learning resource

Related Online Markdown Editor Articles

Discover more insights about online markdown editor and related development topics