Tutorial
Advanced GitHub Flavored Markdown: A Complete Developer's Reference
A practical developer reference for GitHub Flavored Markdown tables, task lists, syntax-highlighted code blocks, automatic tables of contents, and related documentation patterns.
12 min read
GitHub Flavored Markdown (GFM) extends standard Markdown with powerful features that make documentation more functional and interactive. Whether you're writing README files, issue templates, or technical documentation, mastering GFM is essential for modern developers. This guide covers tables, task lists, syntax-highlighted code blocks, and automatic table of contents generation—all features supported by the Prescosoft Markdown Editor.
If you're already familiar with basic Markdown and want to level up your documentation game, this comprehensive reference will give you everything you need to write professional, GitHub-ready content. For those interested in mathematical notation as well, check out our Markdown Math Notation Guide after reading this guide.
What is GitHub Flavored Markdown (GFM)?
GitHub Flavored Markdown is a strict superset of standard Markdown (also known as CommonMark) that adds features specifically designed for GitHub's ecosystem. While standard Markdown handles basic formatting—headers, lists, emphasis, and links—GFM extends it with tables, task lists, strikethrough, autolinks, emoji shortcodes, and syntax highlighting for code blocks. GFM has become the most widely used Markdown variant in the developer community, powering millions of README files, wikis, and documentation sites.
GFM vs Standard Markdown
Standard Markdown (CommonMark) provides the foundation: headers, paragraphs, emphasis, links, images, blockquotes, and basic ordered and unordered lists. GFM builds on this foundation by adding several key features that standard Markdown lacks:
- Tables for structured data presentation with alignment controls
- Task lists with interactive checkboxes for project tracking
- Strikethrough text using
~~text~~syntax - Automatic URL detection (autolinks) without bracket syntax
- Emoji shortcodes like
:smile:and:rocket: - Syntax highlighting for fenced code blocks with language identifiers
The key difference is scope: standard Markdown was designed for simple prose formatting, while GFM was designed for software documentation. This makes GFM inherently more capable for developer-facing content like API documentation, changelogs, and project READMEs.
Why GFM is the Standard for GitHub
GitHub adopted its own Markdown flavor in 2009 because standard Markdown couldn't meet the needs of software documentation at scale. Developers needed tables for comparing features and configuration options, task lists for tracking issues and project milestones, and syntax highlighting for code examples that would be readable without rendering. GFM became the de facto standard because it solves real documentation problems while remaining fully backward compatible with standard Markdown.
Today, GFM is used across all of GitHub's products: README files, Issues, Pull Requests, Discussions, GitHub Pages (with Jekyll), Gists, and wikis. Its influence extends beyond GitHub as well—GitLab, Bitbucket, and many other platforms support GFM or a close variant, making it the most transferable Markdown skill a developer can learn.
Prescosoft Editor's GFM Support
The Prescosoft Markdown Editor supports the full GFM specification with real-time live preview. You can write tables, task lists, and code blocks in the editor and see them rendered instantly in the preview pane. The editor also includes automatic table of contents generation—a feature not natively supported on GitHub but essential for long-form documentation. Everything renders client-side in your browser, so your content never leaves your machine.
Tables in Markdown
Basic Table Syntax
Markdown tables use pipes (|) to separate columns and dashes (---) to create the header separator row. The header separator distinguishes the header row from data rows and is required for the table to render correctly. You can control column alignment using colons in the separator row:
:---or---for left alignment (default):---:for center alignment---:for right alignment
Here's the Markdown source for a 3-column feature comparison table:
| Feature | Basic | Pro | |:-------------------|:-----------:|------------:| | Tables | Yes | Yes | | Task Lists | Yes | Yes | | Auto TOC | No | Yes | | Export Options | PDF only | PDF, HTML | | Syntax Highlight | Basic | Advanced |
This renders as a clean table with left-aligned feature names, centered Basic column values, and right-aligned Pro column values. Notice how the alignment colons in the separator row control the visual alignment of the rendered output. The column widths adjust automatically based on content.
You don't need to align the pipes in your source Markdown—the table will render correctly even with uneven spacing. However, aligning pipes in the source makes the raw Markdown easier to read and maintain, which matters when collaborating on documentation.
Table Best Practices
Keep tables simple (6 columns or fewer). Wide tables become hard to read on mobile devices and in narrow documentation sidebars. If you need more than six columns, consider restructuring your data into multiple smaller tables or using a different format entirely. Tables with too many columns force horizontal scrolling, which degrades the reading experience significantly.
Use alignment for readability. Left-align descriptive text, center-align status indicators or Boolean values (Yes/No, checkmarks), and right-align numbers and quantities. Consistent alignment across a table makes it much easier to scan and compare values across rows.
When to use tables vs lists: Use tables when you need to compare features or values across multiple categories or dimensions. Use lists for sequential steps, feature highlights, or when the information doesn't naturally fit a grid format. A good rule of thumb: if you're writing the same sub-headings for multiple items, a table is likely the better choice.
Tables work best for:
- Feature comparisons (Basic vs Pro vs Enterprise pricing)
- Configuration options with types and default values
- API endpoint documentation (Method, Path, Description)
- Version compatibility matrices across platforms
- Team rosters with roles and responsibilities
Write GitHub-ready Markdown with live preview
Prescosoft Markdown Editor supports full GitHub Flavored Markdown with tables, task lists, code highlighting, and auto-TOC. No signup required.
Launch Markdown EditorTask Lists and Checkboxes
Task lists (also called checkbox lists or to-do lists) let you create interactive checklists directly in your Markdown documents. The syntax is simple: use - [ ] for incomplete tasks (unchecked) and - [x] for completed tasks (checked). The space between the brackets indicates an unchecked box, while an x marks it as complete.
- [x] Set up project repository - [x] Configure CI/CD pipeline - [ ] Write API documentation - [ ] Add unit tests - [ ] Deploy to staging environment
One of the most powerful features of GFM task lists is nesting. You can create subtasks by indenting additional task items with two or four spaces beneath a parent task:
- [x] Project Setup - [x] Initialize Git repository - [x] Set up package.json - [x] Configure ESLint - [ ] Testing - [ ] Write unit tests for auth module - [ ] Write integration tests for API - [ ] Set up code coverage reporting - [ ] Documentation - [ ] Write README.md - [ ] Add API reference docs - [ ] Create contributing guidelines
Real-world example: Project launch checklist
Here's a production-ready launch checklist that you could use in a GitHub issue or project README. Notice how nested items break complex tasks into actionable steps:
## v2.0 Launch Checklist ### Pre-Launch - [x] Feature development complete - [x] Code review approved by 2+ reviewers - [x] Security audit passed - [ ] Performance benchmarking - [ ] Load test: 10k concurrent users - [ ] Response time under 200ms (p95) - [ ] Cross-browser testing (Chrome, Firefox, Safari) ### Launch Day - [ ] Deploy to staging environment - [ ] Run smoke test suite - [ ] Database migration verified - [ ] Deploy to production - [ ] Monitor error rate for 24 hours ### Post-Launch - [ ] Send announcement to mailing list - [ ] Update changelog and documentation - [ ] Schedule retrospective meeting
On GitHub, task list items in issues and pull requests are interactive—users can click checkboxes to toggle their completion status directly in the rendered view. GitHub also displays a progress indicator showing the percentage of completed tasks, which is especially useful for tracking sprint progress or release readiness.
Task lists are ideal for:
- Project roadmaps and development milestones
- Bug fix verification checklists in issues
- Deployment and release procedures
- Onboarding documentation for new team members
- Code review checklists for pull request templates
Code Blocks with Syntax Highlighting
Fenced Code Blocks
Fenced code blocks use triple backticks (```) with an optional language identifier immediately after the opening fence. The language identifier triggers syntax highlighting, which applies color coding to keywords, strings, comments, and other language constructs. This makes code examples dramatically easier to read and understand compared to plain text blocks.
```javascript
const fetchData = async (endpoint) => {
try {
const response = await fetch(endpoint);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return await response.json();
} catch (error) {
console.error('Fetch failed:', error.message);
return null;
}
};
```
Python example:
```python
from dataclasses import dataclass
@dataclass
class Task:
title: str
completed: bool = False
def toggle(self):
self.completed = not self.completed
return self
# Create and manage tasks
tasks = [Task("Write docs"), Task("Add tests", completed=True)]
for task in tasks:
print(f"[{'x' if task.completed else ' '}] {task.title}")
```
Bash/shell example:
```bash #!/bin/bash # Automated deployment script echo "Starting deployment..." docker build -t myapp:latest . docker push registry.example.com/myapp:latest kubectl rollout deployment/myapp -n production echo "Deployment complete!" ```
JSON example:
```json
{
"name": "my-api",
"version": "2.1.0",
"scripts": {
"start": "node server.js",
"test": "jest --coverage"
},
"dependencies": {
"express": "^4.18.0",
"cors": "^2.8.5"
}
}
```
HTML example:
```html
<article class="post">
<header>
<h1>My Blog Post</h1>
<time datetime="2025-05-12">June 1, 2025</time>
</header>
<p>Article content goes here.</p>
</article>
```
GitHub supports syntax highlighting for over 100 programming languages. The most commonly used identifiers include: javascript, python, bash, json, html, css, typescript, ruby, go, rust, java, sql, yaml, toml, and diff.
Inline Code
Use single backticks for inline code snippets within paragraphs. Inline code uses a monospaced font and often a background highlight to distinguish it from surrounding text. Examples include variable names like apiKey, commands like npm install, file paths like /etc/config.json, and short expressions like x === null.
When to use inline code vs fenced blocks:
- Inline code: Short identifiers, single commands, file paths, environment variables, short code expressions mentioned within prose
- Fenced blocks: Multi-line code examples, complete function definitions, configuration files, code meant to be copied and pasted
Syntax Highlighting Best Practices
Always specify the language. Even if it's just text or plaintext, specifying a language helps renderers apply appropriate styling and makes your intent clear. Without a language identifier, code blocks render as plain text without any highlighting, making them significantly harder to read.
Keep code blocks under 20 lines. Long code blocks are intimidating and hard to read in documentation. If your example requires more than 20 lines, consider splitting it into smaller, focused examples with explanatory text between them. For complete source files, link to a GitHub Gist or repository instead.
Use comments for clarity. Add brief inline comments to explain why something is done a certain way, highlight the key line in a longer block, or indicate where output appears. Comments transform code blocks from opaque snippets into educational examples.
Table of Contents (TOC) Generation
Auto-Generating TOC from Headings
The Prescosoft Markdown Editor can automatically generate a table of contents from your document's heading structure. To use this feature, place [TOC] on its own line where you want the table of contents to appear, and the editor will scan your document and create a linked, hierarchically nested list of all headings.
[TOC] # Main Title ## Introduction Background and motivation for this guide. ## Getting Started ### Prerequisites Required tools and environment setup. ### Installation Step-by-step installation instructions. ## Advanced Features Deep dive into power-user capabilities. ## Conclusion Summary and next steps.
The generated TOC automatically handles:
- Proper nesting based on heading levels (H1 through H6)
- Clickable anchor links that scroll to each section
- Visual indentation showing the document hierarchy
- Automatic anchor ID generation from heading text
Best practices for heading hierarchy:
- Use only one H1 per document (typically the title or document name)
- Use H2 for main content sections
- Use H3 for subsections within H2 sections
- Never skip heading levels (don't jump from H2 directly to H4)
- Keep heading text concise (under 10 words) and descriptive
- Start headings with keywords rather than filler words
Manual TOC with Anchor Links
You can also create manual TOC entries using Markdown anchor links. GitHub automatically generates anchor IDs from headings by converting text to lowercase, replacing spaces with hyphens, and removing special characters. This means a heading ## Getting Started becomes the anchor #getting-started.
## Table of Contents - [Introduction](#introduction) - [Getting Started](#getting-started) - [Prerequisites](#prerequisites) - [Installation](#installation) - [API Reference](#api-reference) - [Troubleshooting](#troubleshooting) ## Introduction Your introduction content here... ## Getting Started Setup instructions begin here... ### Prerequisites Required tools listed here... ### Installation Step-by-step installation... ## API Reference Endpoint documentation... ## Troubleshooting Common issues and solutions...
Cross-referencing sections: You can link to any heading within your document using the same anchor syntax. For example, to reference the Installation section from within the Troubleshooting section, simply write [see Installation](#installation). This creates a clickable link that scrolls readers to the target section.
Manual TOCs give you more control over which headings appear and in what order—useful when you want to exclude certain sections (like appendices or footnotes) from the navigation. However, they require manual maintenance when headings change, which can lead to broken links over time.
Other GFM Features
Strikethrough
Use double tildes to strike through text: wrap content with ~~ on each side. For example, ~~this feature is deprecated~~ renders with a line through the middle of the text.
Common use cases for strikethrough in developer documentation include:
- Marking deprecated APIs or features in changelogs
- Showing old pricing next to new pricing
- Indicating completed or removed items in a list without deleting them
- Editing or revising text while showing what changed
Autolinks
GitHub automatically detects URLs and email addresses in your Markdown and converts them to clickable links. Simply type https://prescosoft.com or [email protected] and they become active hyperlinks without any special formatting. This works for http, https, and ftp URLs.
Disabling autolinks: If you want to display a URL as plain text without making it clickable—for example, when documenting URLs that shouldn't be followed—wrap the URL in backticks: `https://example.com` renders as monospaced plain text. This is especially useful in API documentation where you're showing example URLs that aren't meant to be visited.
Emoji Shortcodes
GitHub supports emoji shortcodes that render as actual emoji characters in your rendered Markdown. This adds visual interest and can help organize content with quick visual markers.
| Shortcode | Emoji | Common Use Case |
|---|---|---|
:rocket: |
🚀 | Performance improvements, fast features |
:warning: |
⚠️ | Important warnings, breaking changes |
:bug: |
🐛 | Bug reports, known issues |
:sparkles: |
✨ | New features, improvements |
:memo: |
📝 | Documentation updates, notes |
:white_check_mark: |
✅ | Completed tasks, passing tests |
Example usage in a changelog:
## Changelog v2.1 - :sparkles: Added dark mode support - :rocket: Improved page load time by 40% - :bug: Fixed login redirect loop on Safari - :memo: Updated API documentation - :warning: Deprecated `v1/auth` endpoint
Emoji shortcodes make documentation more scannable and engaging, but use them sparingly in formal documentation. They work best in changelogs, issue templates, and community-facing READMEs where a friendly tone is appropriate.
Frequently Asked Questions
What's the difference between Markdown and GFM?
GitHub Flavored Markdown (GFM) is a superset of standard Markdown that adds features like tables, task lists, strikethrough, autolinks, and syntax highlighting for code blocks. While standard Markdown covers basic formatting like headers, lists, and emphasis, GFM extends it with GitHub-specific features that make documentation more functional and interactive. GFM is the default format for README files, issues, and pull requests on GitHub.
How do I create a table in Markdown?
Create a table using pipes (|) to separate columns and dashes (---) for the header separator row. Add colons for alignment: :--- for left, :---: for center, and ---: for right alignment. Example: write | Feature | Basic | Pro | on the first line, |---|---|---| on the second line, then add data rows below. Keep tables simple with 6 or fewer columns for readability. The Prescosoft Markdown Editor renders tables in real-time with live preview.
Can I add checkboxes to GitHub READMEs?
Yes! GitHub supports task lists (checkboxes) in READMEs and issues. Use - [ ] (with a space between brackets) for incomplete tasks and - [x] for completed tasks. These render as interactive checkboxes on GitHub that users can click to toggle status directly. You can also nest task lists by indenting with spaces. Task lists are perfect for project roadmaps, feature checklists, and progress tracking in documentation.
How do I add syntax highlighting to code blocks?
Use triple backticks with a language identifier immediately after the opening backticks. For example, ```javascript highlights JavaScript syntax, ```python for Python, ```bash for shell commands, and ```json for JSON data. GitHub supports over 100 programming languages. Always specify the language for proper highlighting—without it, code renders as plain text. For inline code within paragraphs, use single backticks instead. The Prescosoft editor shows syntax highlighting in live preview.
How do I generate a table of contents automatically?
The Prescosoft Markdown Editor can auto-generate a table of contents from your headings. Place [TOC] on its own line where you want the TOC to appear, and the editor creates a linked list of all headings with proper nesting and indentation. Alternatively, create manual TOC entries using anchor links: [Section Name](#section-name) where section-name is the heading text in lowercase with spaces replaced by hyphens. For best results, use a clear heading hierarchy with H2 for main sections and H3 for subsections.
Does GitHub support all GFM features?
GitHub supports most GFM features including tables, task lists, strikethrough (~~text~~), autolinks, emoji shortcodes, and syntax-highlighted code blocks. However, some features like automatic table of contents generation ([TOC]) are not natively supported on GitHub, though they work perfectly in the Prescosoft editor. GitHub also does not support footnotes or definition lists natively, which are available in other Markdown flavors. For more on extended Markdown features, see our Markdown Math Notation Guide.
Write GitHub-ready Markdown with live preview
Prescosoft Markdown Editor supports full GitHub Flavored Markdown with tables, task lists, code highlighting, and auto-TOC. No signup required.
Launch Markdown EditorFor more advanced Markdown features including mathematical notation and LaTeX support, check out our Markdown Math Notation Guide. If you're working with text processing and formatting beyond Markdown, our Text Tools Guide covers additional utilities that complement your documentation workflow.