TodayTools

Markdown flashcards

Plain text that renders as clean pages: READMEs, docs sites, PR descriptions and AI-ready content.

Donate
Beginner friendly, starts from zero
Section
How to study
0
MarkdownStart from zero · 1 of 12

What is Markdown, in one plain sentence?

A simple way to format writing with ordinary keyboard symbols, like # for a and ** for bold, so turns into a neat page.

Type symbols, get formatting.

All topics

Markdown at a glance

Markdown is a simple way to format writing with keyboard symbols, so plain text becomes a neat page.

Like writing small notes for a printer, such as make this a title or make this bold, and getting back a tidy page.

Words you will meet

Plain text
Just letters and symbols, with no hidden formatting inside the file
Render
Turn the Markdown symbols into a formatted page
Heading
A title line that starts a section
Paragraph
A block of normal text, separated from the next by a blank line
Link
Clickable text that takes you to a web address
Alt text
A short description of a picture for people who cannot see it
Inline code
A command or file name shown in a code font inside a sentence
README
The welcome file of a project that explains what it is and how to use it

The steps

  1. 1. Start from zero (12 cards): What Markdown is, where you meet it and the words you need, in plain English.
  2. 2. Core basics (15 cards): Headings, paragraphs, emphasis, lists, links, images, code and the rules that trip people up.
  3. 3. Next steps (16 cards): CommonMark and GFM, tables, tasks, nesting, anchors, references, HTML and footnotes.
  4. 4. Go deeper (16 cards): Front matter, MDX, diagrams, maths, parsers, security, linting and conversion.
All 12 cards in Start from zero
What is Markdown, in one plain sentence?
A simple way to format writing with ordinary keyboard symbols, like # for a heading and ** for bold, so plain text turns into a neat page.
Before Markdown, how did people format notes and docs?
With word processor files that need a special app, or with HTML tags like <b> that are hard to read and write by hand. Plain notes had no structure at all.
Where have you already seen Markdown-style symbols?
Chat apps like WhatsApp, Slack and Discord turn *stars* or **double stars** into bold text. Project pages on GitHub and many note apps use Markdown too.
What is a good everyday picture of Markdown?
Writing a letter with small marks for the printer: "make this a title", "make this bold". The printer follows the marks and hands back a tidy page.
What do you need to start writing Markdown?
Any text editor, like Notepad, TextEdit or VS Code, and a file name ending in .md. Nothing to install. A text editor saves plain text: letters only, no hidden formatting.
What do render, raw and HTML mean here?
To render is to turn the Markdown symbols into a formatted page; raw is the text before that. Most tools render Markdown into HTML, the language web pages are built from.
What are a heading and a paragraph?
A heading is a title line that starts a section. A paragraph is a block of normal text; in Markdown, a blank line between blocks starts a new paragraph.
Your first tiny win: what do the symbols in these two lines do?
The hash sign makes the first line a heading. The two stars around Madurai make that word bold. Everything else stays normal text.
What are a URL, a link and alt text?
A URL is a web address, like https://sdev.in. A link is clickable text that takes you to a URL. Alt text is a short description of a picture for people who cannot see it.
What are a README, Git and a diff?
A README is the welcome file of a project, usually README.md. Git is a tool that saves every version of your files. A diff shows exactly which lines changed between two versions.
Why does Markdown have a special way to show code?
Code is instructions for a computer, and one wrong symbol breaks it. Markdown shows code in a fixed-width font, exactly as typed, using the backtick key (usually under Esc).
What will you be able to do after this topic?
Write headings, lists, links, pictures, tables and code blocks, avoid the common rendering surprises, and write a clear README for any project.
Markdown cheatsheet

Text

  • # H1 / ## H2 / ### H3 Headings, space after #
  • **bold** / *italic* Emphasis
  • ~~old~~ Strikethrough (GFM)
  • `npm ci` Inline code
  • > quote Blockquote
  • line one\ Hard line break
  • \* \# \| Escape a symbol

Lists and tasks

  • - item Bullet
  • 1. item Numbered, any digits
  • - child Indent to parent's text
  • - [ ] task Open task
  • - [x] task Done task
  • 1. step + indented ``` Code inside a list

Links and media

  • [text](url "title") Link
  • ![alt text](img.png) Image
  • [text][ref] / [ref]: url Reference link
  • <https://sdev.in> Autolink everywhere
  • [Setup](#local-setup) Link to a heading
  • text[^1] / [^1]: note Footnote

Blocks

  • ```python Fenced code with colours
  • ```diff Green and red changed lines
  • | a | b | / | :-- | --: | Table, left and right align
  • --- Rule, blank line above
  • ```mermaid Diagram
  • ```math or $...$ LaTeX maths
  • > [!WARNING] GitHub alert
  • <details><summary> Collapsible section

Tooling

  • npx markdownlint-cli2 "**/*.md" Lint docs
  • pandoc in.md -o out.docx Convert to Word
  • pandoc in.md -o out.pdf --pdf-engine=typst Convert to PDF
  • DOMPurify.sanitize(html) Make user HTML safe
  • Ctrl+K V VS Code side preview
Donate