Yuri Almeida
Web Developement

Markdown Showcase

Yuri Almeida
<!DOCTYPE html>

A living cheat-sheet of Markdown patterns you can copy/paste. Tip: Use the table of contents below to jump to sections.

Table of Contents - Headings - Text Styles - Paragraphs &amp; Line Breaks - Lists - Task Lists - Links - Images - Blockquotes - Code - Tables - Footnotes - Definitions - Details / Summary - Horizontal Rules - Escaping &amp; Special Characters - Callouts (Ad-hoc) - Mermaid Diagrams - HTML in Markdown - Misc Tips - References


Headings

H1 — Big Title

H2 — Section

H3 — Subsection

H4 — Minor Heading

H5 — Tiny Heading
H6 — Microscopic Heading

Text Styles

Normal text, with bold, italic, and bold italic. ~~Strikethrough~~ is useful for change logs. Inline code for identifiers, npm run build, or variables like FOO=bar. Highlight ==important text== with &lt;mark&gt; in HTML: this is highlighted. Superscript: 2^10^ and Subscript: H~2~O (may require HTML: H2O). Emoji: 🎯 🚀 😄 or via shortcodes: :sparkles: :warning: :memo:

Note: GFM supports tables, task lists, strikethrough, autolinks, and footnotes.


Paragraphs &amp; Line Breaks

A paragraph is made of one or more lines of text separated by a blank line.

Line breaks occur when you end a line with two spaces. Or configure your renderer to treat single newlines as breaks.


Lists

Unordered

  • Apples
  • Fuji
  • Gala
  • Oranges
  • Navel
  • Blood orange
  • Bananas

Ordered

  1. First
  2. Second
  3. Sub-step A
  4. Sub-step B
  5. Third

Mixed

  • Install dependencies 1. npm install 2. npm run dev
  • Configure environment
  • .env.local
  • API keys

Task Lists

  • [x] Write spec
  • [x] Add tests
  • [ ] Implement feature
  • [ ] Review &amp; merge

Tasks can be nested: - [ ] Parent - [x] Child done - [ ] Child pending


Links

Inline link: Markdown Guide Reference link: GitHub or this repo. Autolink (GFM): https://example.com


Images

Inline image:

Sample image alt text

Reference image:

Robot

Tip: For local images, use relative paths like ./assets/diagram.png.


Blockquotes

Single-level blockquote for quotes or callouts.

Multi-level:

Nested quote level 2

Nested quote level 3


Code

Inline

Use console.log("hello") for quick debug.

Fenced Code Blocks

# Bash
mkdir -p dist &amp;&amp; echo &quot;Hello&quot; &gt; dist/hello.txt
ls -lah dist