Basic Formatting
Master headings, emphasis, code blocks, blockquotes, and horizontal rules.
Ctrl+Shift+V).What You'll Learn
- Six heading levels and when to use each
- Bold, italic, strikethrough, and combined emphasis
- Inline code and fenced code blocks with syntax highlighting
- Blockquotes, horizontal rules, and paragraphs
Headings
Headings create the structure of your document. Use # through ###### for six levels. Think of them like a book's outline: # Title, ## Chapter, ### Section.
# My Project Name → <h1> (use once per page) ## Installation → <h2> (major sections) ### Prerequisites → <h3> (subsections) #### macOS → <h4> (sub-subsections) ##### Homebrew Users → <h5> (rare) ###### Very Specific Detail → <h6> (very rare)
⚠️ Common Mistake
Don't skip heading levels (e.g., going from ## straight to ####). This hurts accessibility and SEO. Always go in order: H1 → H2 → H3.
Alternative Heading Syntax
For H1 and H2 only, you can use underlines:
Heading 1 ========= Heading 2 ---------
Text Emphasis
📝 Real-World Analogy: Think of asterisks like layers of paint. One layer (*) gives you italic. Two layers (**) give you bold. Three layers (***) give you both!
*italic* → italic **bold** → bold ***bold and italic*** → bold and italic ~~strikethrough~~ → strikethrough You can also use underscores: _italic_ __bold__ ___both___ Mix them: **This is bold with *italic* inside**
💡 Pro Tip
Prefer asterisks (*) over underscores (_) for emphasis. Underscores in the middle of words (like file_name) can cause issues in some parsers, but asterisks never do.
Headings & Emphasis
Practice heading levels and text formatting.
// Markdown Headings & Emphasis — rendered as text
console.log("=== Heading Levels ===");
console.log();
console.log("# Heading 1 → <h1> — Page title (use only ONCE)");
console.log("## Heading 2 → <h2> — Major sections");
console.log("### Heading 3 → <h3> — Subsections");
console.log("#### Heading 4→ <h4> — Sub-subsections");
console.log();
console.log("=== Text Emphasis ===");
console.log("*italic* → italic (single asterisk)");
console.log("_italic_ → italic (single unde
...Code in Markdown
Inline Code
Wrap code in single backticks for inline formatting:
Run `npm install` to install dependencies. The `Array.map()` method transforms each element.
Fenced Code Blocks
Use triple backticks with an optional language identifier for syntax highlighting:
```python
def greet(name):
return f"Hello, {name}!"
print(greet("World"))
```
```bash
# Install dependencies
npm install
npm run dev
```Blockquotes
> This is a blockquote. > It can span multiple lines. > You can also nest them: >> Like this inner quote. >>> And even deeper!
Code & Blockquotes
Practice code formatting and blockquotes.
// Markdown Code Formatting
console.log("=== Inline Code ===");
console.log("Use backticks for inline code:");
console.log(" Run \`npm install\` to install packages.");
console.log(" The \`console.log()\` function prints output.");
console.log();
console.log("=== Fenced Code Blocks ===");
console.log("Use triple backticks with optional language:");
console.log();
console.log("\`\`\`javascript");
console.log("function greet(name) {");
console.log(" return 'Hello, ' + name + '!';");
console.lo
...📋 Quick Reference
| Element | Syntax |
|---|---|
| Heading | # ## ### #### |
| Bold | **text** |
| Italic | *text* |
| Strikethrough | ~~text~~ |
| Inline code | `code` |
| Code block | ```language ... ``` |
🎉 Lesson Complete!
You can now format text beautifully with Markdown! Next up: lists and tables — essential for organising information in any document.
Sign up for free to track which lessons you've completed and get learning reminders.