Advanced Markdown Features
Task lists, footnotes, Mermaid diagrams, GitHub alerts, and professional README patterns.
What You'll Learn
- Task lists and interactive checkboxes
- Footnotes, emoji shortcodes, and GitHub alerts
- Collapsible sections, Mermaid diagrams, and math
- Professional README structure and best practices
GitHub-Flavoured Markdown (GFM)
GitHub-Flavoured Markdown extends standard Markdown with extra features. Since GitHub is where most developers host code, GFM has become a de facto standard.
Task Lists
Create interactive checklists with - [ ] and - [x]:
## Sprint Backlog - [x] Set up CI/CD pipeline - [x] Design database schema - [ ] Implement user authentication - [ ] Write API documentation - [ ] Deploy to staging
On GitHub, these render as clickable checkboxes that anyone with write access can toggle!
Footnotes
Markdown was created by John Gruber[^1] in 2004. It's now used by millions of developers[^usage]. [^1]: John Gruber is also known for the Daring Fireball blog. [^usage]: GitHub alone has over 100 million repositories using Markdown.
GitHub Alerts
GitHub supports special blockquote-based alerts:
> [!NOTE] > Useful information the user should know. > [!TIP] > Helpful advice for best results. > [!IMPORTANT] > Key information users need to know. > [!WARNING] > Urgent information requiring attention. > [!CAUTION] > Actions that could cause problems.
💡 Pro Tip
GitHub alerts are rendered with coloured backgrounds and icons, making your documentation look professional with zero effort.
GitHub-Flavoured Markdown
Explore task lists, footnotes, emoji, and GitHub alerts.
// GitHub-Flavoured Markdown (GFM)
console.log("=== Task Lists ===");
console.log("- [x] Create project repository");
console.log("- [x] Write README.md");
console.log("- [ ] Add unit tests");
console.log("- [ ] Deploy to production");
console.log();
console.log("GitHub renders these as interactive checkboxes!");
console.log();
console.log("=== Footnotes ===");
console.log("Here is a statement with a footnote.[^1]");
console.log("And another one.[^note]");
console.log();
console.log("[^1]: This
...Advanced Features
Collapsible Sections
Use HTML <details> to create expandable/collapsible content:
<details>
<summary>🔍 Click to see the solution</summary>
```python
def fibonacci(n):
if n <= 1:
return n
return fibonacci(n-1) + fibonacci(n-2)
```
</details>Mermaid Diagrams
GitHub automatically renders Mermaid syntax into diagrams:
```mermaid graph LR A[User Request] --> B[Load Balancer] B --> C[Server 1] B --> D[Server 2] C --> E[Database] D --> E ``` ```mermaid sequenceDiagram Client->>Server: POST /api/login Server->>Database: Verify credentials Database-->>Server: User found Server-->>Client: 200 OK + JWT token ```
Math with LaTeX
Inline math: $E = mc^2$
Block math:
$$
\sum_{i=1}^{n} x_i = \frac{1}{n} \sum_{i=1}^{n} x_i
$$⚠️ Common Mistake
Mermaid, math, and alerts only work on platforms that support them (mainly GitHub). Standard Markdown processors will show them as plain code blocks.
Advanced Patterns
Try collapsible sections, Mermaid diagrams, and README patterns.
// Advanced Markdown Patterns
console.log("=== Collapsible Sections ===");
console.log("Use HTML <details> for expandable content:");
console.log();
console.log("<details>");
console.log("<summary>Click to expand</summary>");
console.log();
console.log("Hidden content goes here.");
console.log("You can use **Markdown** inside!");
console.log();
console.log("</details>");
console.log();
console.log("=== Diagrams with Mermaid ===");
console.log("GitHub renders Mermaid diagrams automatically:");
c
...Writing a Professional README
A great README is your project's first impression. Here's the standard structure used by popular open-source projects:
# Project Name
> One-line description of what this project does.
## Features
- ⚡ Feature one
- 🔒 Feature two
- 📱 Feature three
## Installation
```bash
npm install my-project
```
## Usage
```javascript
import { myFunction } from 'my-project';
myFunction();
```
## API Reference
| Method | Description | Returns |
|:-----------|:---------------------|:--------|
| `init()` | Initialise the app | void |
| `getData()`| Fetch all records | Array |
## Contributing
1. Fork the repo
2. Create a feature branch
3. Submit a pull request
## License
MIT © Your Name📋 Quick Reference
| Feature | Syntax |
|---|---|
| Task (unchecked) | - [ ] item |
| Task (checked) | - [x] item |
| Footnote | text[^1] [^1]: note |
| Emoji | :rocket: :star: |
| Collapsible | <details><summary>...</summary></details> |
| Alert | > [!NOTE] |
🎉 Course Complete!
Congratulations! You've mastered Markdown — from basic syntax to advanced GitHub features. You can now write professional documentation, READMEs, blog posts, and notes with confidence. Keep practising by writing Markdown every day! 📝
Sign up for free to track which lessons you've completed and get learning reminders.