Advanced

By the end of this lesson you'll write GitHub-Flavoured Markdown like a maintainer: footnotes, collapsible sections, escaped characters, raw HTML, anchor-link tables of contents, badges, emoji, and highlighted code — everything a polished README needs.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free Markdown course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

Basic Markdown is like a label maker : quick, tidy, perfect for everyday text. GitHub-Flavoured Markdown adds a toolbox — a collapsible drawer ( <details> ), little reference cards stapled to the back (footnotes), status stickers (badges), and the option to drop in a raw HTML part when the label maker can't do the job. You still write plain text, but now you can build documentation that looks hand-crafted.

1. Footnotes

A footnote lets you add a note without cluttering your sentence. You drop a marker like [^1] where the note belongs (the reference ), then define it on its own line as [^1]: text (the definition ). The label can be a number or a word — what matters is that the reference and definition use the exact same label . When rendered, the marker becomes a small superscript link, and all the notes collect at the bottom of the page.

Markdown was created in 2004 [1] and is now everywhere [docs] .

You can even put a footnote mid-sentence [tip] like this.

2. Embedding Raw HTML

Markdown can't do everything — there's no syntax for centring text or colouring a word. When you hit that wall, you can drop raw HTML straight into your Markdown and most renderers (GitHub included) will honour it. Common uses: <p align="center"> to centre a logo, <kbd> to style keyboard keys, <br> for a manual line break, and <span style="..."> for inline colour.

Markdown is great, but sometimes you need raw HTML.

This text is tomato-coloured and this is Ctrl + C in a keyboard tag.

3. Escaping Special Characters

Characters like * , _ , # , and not code * _ [] () # + - . ! | ); everywhere else the backslash stays literal. Bold/lists won't render inside my <details> . Add a blank line after </summary> . Without it, the Markdown is treated as raw HTML text. My TOC link goes nowhere. The anchor is wrong. Lowercase the heading, swap spaces for hyphens, drop punctuation: ## My Setup! → #my-setup . 📋 Quick Reference — GFM Extras Feature Syntax Footnote text[^1] … [^1]: note Escape \* \# \ python … ` Mini-Challenge: Build a README Section No blanks this time — just a brief and an outline. Use console.log to print the source for a small README that combines four things you learned: a title, a badge, a collapsible install section, and a highlighted code fence. Run it, then paste the output into a GitHub README to see it render.

No. Footnotes, GitHub alerts, and emoji shortcodes are GFM (or GitHub) extensions. Standard Markdown processors may show [^1] or :tada: as plain text. When in doubt, target GitHub.

On GitHub, basic structural HTML is fine and common. But scripts and many attributes are stripped, and some platforms remove HTML entirely — so don't rely on it for anything that must always appear.

Only when a special character would otherwise be interpreted — e.g. a literal * at the start of a word, or a # at the start of a line. Inside normal prose those characters usually render fine without escaping.

Q: Why won't Markdown render inside my collapsible section?

You need a blank line after </summary> . With it, GitHub parses the inner content as Markdown; without it, the content is treated as raw HTML.

Where to go next: put it all to work. Write a real README.md for one of your own projects, or revisit the course overview to review earlier lessons. From here, explore a documentation site generator like MkDocs or Docusaurus — they're powered by the exact Markdown you now know. Congratulations on completing the Markdown course! 📝

Practice quiz

• Browse all free courses
• Cheat sheets & quizzes
• Coding dictionary