Markdown is a lightweight markup language created by John Gruber in 2004. Its design philosophy is to enable people to write documents using an easy-to-read, easy-to-write plain text format that can be converted to structured HTML. Today, Markdown has become the de facto standard for technical documentation, blog writing, and README files. This article systematically explains Markdown's core syntax and introduces practical conversion techniques.
History and Applications of Markdown
Origins
In 2004, John Gruber collaborated with Aaron Swartz to design Markdown. They wanted to create a format that could be read directly as plain text while being easily convertible to HTML. This "what you see is what you get" design philosophy led to Markdown's rapid adoption in the tech community.
Major Variants
As Markdown gained popularity, several extended variants emerged:
| Variant | Features | Use Cases |
|---|---|---|
| CommonMark | Standardized specification | General documentation |
| GFM | Tables, task lists support | GitHub projects |
| MDX | JSX component support | React documentation |
| R Markdown | R code execution support | Data analysis reports |
Application Scenarios
Markdown is widely used in the following areas:
- Technical Documentation: API docs, development guides, README files
- Blog Writing: Static site generators like Hugo, Jekyll, Hexo
- Note-taking Apps: Notion, Obsidian, Typora
- Collaboration Platforms: GitHub, GitLab, Confluence
Basic Syntax Explained
Headings
Markdown uses # symbols to define heading levels, supporting levels 1-6:
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
An alternative syntax uses underlines (only for levels 1 and 2):
Heading 1
=========
Heading 2
---------
Paragraphs and Line Breaks
Paragraphs are separated by blank lines. To create a line break within a paragraph, add two spaces at the end of the line, or use the <br> tag.
Text Emphasis
| Syntax | Effect | Description |
|---|---|---|
*italic* or _italic_ |
italic | Single asterisk or underscore |
**bold** or __bold__ |
bold | Double asterisks or underscores |
***bold italic*** |
bold italic | Triple asterisks |
~~strikethrough~~ |
Double tildes | |
`inline code` |
code |
Backticks |
Lists
Unordered lists use -, *, or +:
- Item one
- Item two
- Sub-item A
- Sub-item B
- Item three
Ordered lists use numbers followed by periods:
1. First step
2. Second step
3. Third step
Task lists (GFM extension):
- [x] Completed task
- [ ] Pending task
- [ ] Another todo item
Links and Images
Link syntax:
[Link text](URL "Optional title")
[QubitTool](https://qubittool.com "Online Toolbox")
Reference-style links are suitable for managing long documents:
[Link text][reference-id]
[reference-id]: URL "Optional title"
Image syntax is similar to links, just add ! at the beginning:

Blockquotes
Use > to create blockquotes, which can be nested:
> This is a quoted text.
> It can span multiple lines.
>
> > This is a nested quote.
Horizontal Rules
Use three or more -, *, or _ to create horizontal rules:
---
***
___
Advanced Syntax
Code Blocks
Inline code uses backticks:
Use `npm install` to install dependencies
Code blocks use triple backticks with optional language specification for syntax highlighting. Supported language identifiers include: javascript, python, java, go, rust, sql, bash, json, yaml, html, css, etc.
Tables
Create tables using | and -, with alignment determined by : placement:
| Left Aligned | Center Aligned | Right Aligned |
|:-------------|:--------------:|--------------:|
| Content 1 | Content 2 | Content 3 |
:---Left align:---:Center---:Right align
Footnotes
This is text with a footnote[^1].
[^1]: This is the footnote content.
HTML and Markdown Conversion
Using HTML in Markdown
Markdown supports direct HTML embedding, which is useful when finer control is needed:
<div align="center">
<img src="image.png" width="300">
</div>
<details>
<summary>Click to expand</summary>
This is the collapsed content.
</details>
Common HTML enhancements:
| Purpose | HTML Code |
|---|---|
| Center image | <div align="center">...</div> |
| Collapsible content | <details><summary>...</summary>...</details> |
| Keyboard keys | <kbd>Ctrl</kbd> + <kbd>C</kbd> |
| Subscript/Superscript | H<sub>2</sub>O, x<sup>2</sup> |
HTML to Markdown
Converting existing HTML content to Markdown is a common need, especially when migrating blogs or organizing documentation. Use the HTML to Markdown tool to automate this process.
Conversion example:
HTML code <h1>Title</h1><p>This is <strong>important</strong> text.</p> converts to:
# Title
This is **important** text.
Markdown to HTML
When you need to publish Markdown content to platforms that don't support Markdown, use the Markdown to HTML tool for conversion. This is particularly useful for:
- Sending rich-text emails
- Publishing content in traditional CMS
- Generating static HTML pages
- Embedding in other applications
Extended Syntax
Math Formulas (LaTeX)
Many Markdown parsers support LaTeX math formulas:
- Inline formula:
$E = mc^2$ - Block formula: Use
$$wrapper, like$$\sum_{i=1}^{n} x_i$$
Flowcharts (Mermaid)
GFM and some editors support Mermaid flowchart syntax, allowing you to draw flowcharts, sequence diagrams, Gantt charts, and more using text descriptions.
Practical Tips and Best Practices
Writing Guidelines
- Heading Hierarchy: Maintain continuous heading levels, don't skip levels
- Blank Lines: Add blank lines before and after headings, lists, and code blocks
- Link Management: Use reference-style links in long documents for easier maintenance
- Image Optimization: Add meaningful alt text to improve accessibility
Common Problem Solutions
Escaping Special Characters: Use backslashes to escape Markdown special characters, like \*This is not italic\*.
Line Breaks in Tables: Use <br> tags for line breaks within table cells.
Recommended Tools
To improve Markdown writing efficiency, consider using professional online tools:
- Markdown Editor: Real-time preview, syntax highlighting, one-click export, GFM extension support
- HTML to Markdown: Intelligently convert HTML to clean Markdown format
- Markdown to HTML: Convert Markdown to standard HTML with custom styling support
Conclusion
With its concise syntax and powerful expressiveness, Markdown has become the preferred format for modern document writing. By mastering the basic syntax and advanced techniques covered in this article, combined with QubitTool's Markdown toolset, you can efficiently create professional technical documentation, blog posts, and project descriptions.
Whether for daily notes or formal documentation, Markdown lets you focus on the content itself rather than tedious formatting. Start using Markdown and experience the charm of plain text writing!