Markdown: Markdown Quick Start and Editor Selection

You don't need any complex software — any text editor can write Markdown, but the right editor doubles your productivity.

1. What You'll Learn

• How to choose a Markdown editor that fits your needs
• Creating and saving your first .md file
• Using live preview
• The basic Markdown workflow
• Pros and cons of popular editors

2. A Beginner's Real Story

(1) Pain Point: Didn't Know Which Software to Use

Marie wanted to learn Markdown. She downloaded three editors to try them out, and each had a completely different interface: one showed plain text, one showed live formatting, and another looked like a code editor. She spent two days comparing tools without writing a single word.

(2) Solution: Pick an Editor and Just Start Writing

A colleague suggested: "Start with VS Code, install a Markdown extension, and write while previewing." Marie spent 10 minutes setting it up, then opened a .md file and started writing. When she saw her typing on the left and the beautifully rendered output appearing on the right in real time, she immediately understood the appeal of Markdown. On her first day, she wrote three technical notes.

3. Types of Markdown Editors

Markdown editors fall into three categories, each suited to different users:

graph TB
    A[Markdown Editors] --> B[Plain-Text Editors]
    A --> C[Dedicated Editors]
    A --> D[Online Editors]
    B --> E[VS Code / Sublime Text]
    C --> F[Typora / Obsidian]
    D --> G[StackEdit / Jianshu]

graph TB
    A[Markdown Editors] --> B[Plain-Text Editors]
    A --> C[Dedicated Editors]
    A --> D[Online Editors]
    B --> E[VS Code / Sublime Text]
    C --> F[Typora / Obsidian]
    D --> G[StackEdit / Jianshu]

(1) VS Code — The Developer's First Choice

VS Code is the most popular code editor today, and with extensions, it becomes a powerful Markdown editor:

Recommended extensions:
- Markdown All in One (shortcuts, table of contents, auto-formatting)
- Markdown Preview Enhanced (enhanced preview)
- Paste Image (auto-saves pasted images)

▶ Example: Three Editors Opening the Same Markdown File

VS Code: Source on the left + live preview on the right (split view)
Typora: WYSIWYG, no split view (source hidden)
Notepad: Plain text, no formatting (source only)

Understanding how different editors work helps you choose the right writing tool for your needs.

(2) Typora — The Elegant WYSIWYG Choice

What makes Typora unique is the lack of split panes — you write directly in a single interface where formatting renders live. # headings immediately become large and bold, and *italic* text instantly becomes italic.

# In Typora
Type # Heading → heading immediately becomes large and bold
Type **bold** → text instantly turns bold
Type --- → a divider line appears immediately

4. Creating Your First Markdown File

(1) Creating a New File

The simplest way to create a .md file:

# In the terminal
touch my-first-doc.md

# Or in VS Code:
# File → New File → Save with .md extension

▶ Example: Embedding a Python Code Block in Markdown

## My First Code Block

\`\`\`python
print("Hello, Markdown!")
\`\`\`

▶ Example: Previewing Markdown in VS Code

Press `Ctrl+K V` to open side-by-side preview
Press `Ctrl+Shift+V` to open full-screen preview

Left pane: write Markdown source
Right pane: see rendered output in real time

5. Markdown Workflow

(1) Local Workflow

graph LR
    A[Create .md file] --> B[Write in editor]
    B --> C[Check with live preview]
    C --> D{Content looks good?}
    D -->|Yes| E[Save / commit to Git]
    D -->|No| B
    E --> F[Convert / publish]

graph LR
    A[Create .md file] --> B[Write in editor]
    B --> C[Check with live preview]
    C --> D{Content looks good?}
    D -->|Yes| E[Save / commit to Git]
    D -->|No| B
    E --> F[Convert / publish]

(2) Common Workflows

▶ Example: A Complete Writing Workflow With VS Code

1. Open VS Code, create `note.md`
2. Write the title and body
3. Press Ctrl+Shift+V to open the preview
4. Edit until satisfied
5. Ctrl+S to save the file
6. Commit to GitHub with git

6. Full Example: From Zero to Publishing a Markdown Note

Note title: [Notes] CSS Flexbox Layout

Core concept: Flexbox is a one-dimensional layout model

Common properties cheatsheet:
  display → flex
  justify-content → center, space-between
  align-items → center, stretch

Sample code:
  .container { display: flex; justify-content: center; }

Reference: MDN Flexbox Guide

Expected result: A well-structured technical note with concepts, a property cheatsheet, code examples, and reference links.

❓ FAQ

📖 Summary

• Choose an editor: VS Code for developers, Typora for writing, Obsidian for knowledge management
• Creating a .md file: essentially a plain text file with a .md or .markdown extension
• Live preview: Ctrl+Shift+V in VS Code, automatic in Typora
• Basic workflow: Write → Preview → Save → Publish
• Naming conventions: lowercase with hyphens, avoid spaces and special characters

📝 Exercises

1. Beginner: In VS Code, create a hello-markdown.md file. Write an H1 heading, an H2 heading, a paragraph, and a code block. Then press Ctrl+Shift+V to preview the result.

2. Intermediate: Compare VS Code with Markdown Preview Enhanced against Obsidian. Write a short note in each and explain which tool you prefer and why.

3. Challenge: Install the Typora trial or use StackEdit (online). Write a Markdown article that includes images and links, then export it as both PDF and HTML to verify the formatting is consistent.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us