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.
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
- Feature one
- 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


# 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:
[](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:
- CommonMark Specification - Standard Markdown specification
- GitHub Flavored Markdown - GitHub's extended specification
- Original Markdown Syntax - John Gruber's original spec
Learning Resources:
- Markdown Guide - Comprehensive learning resource
- Markdown Tutorial - Interactive learning
- Markdown Cheatsheet - Quick reference
Documentation & Technical Writing:
- GitBook Documentation - Documentation platform
- Notion Markdown - Note-taking with Markdown
- README Best Practices - GitHub README guide
- Technical Writing with Markdown - GitLab's Markdown guide
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
# Main Title
**bold text** or __bold text__ *italic text* or _italic text_ ***bold and italic***
Text formatting: bold, italic, and combinations
This is **bold** and *italic*
> This is a blockquote > > With multiple lines > > And nested quotes
Blockquotes for highlighting important content
> 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
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
[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-ref] [image-ref]: image.jpg
Images with alt text, titles, and references
[](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
~~deleted content~~
==highlighted text==
Highlighted text (GitHub extension)
==important information==
:smile: :heart: :thumbsup: :rocket:
Emoji shortcodes (GitHub and many platforms)
: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
Standard Markdown specification
GitHub's extended specification
Comprehensive learning resource
Related Online Markdown Editor Articles
Discover more insights about online markdown editor and related development topics