> ## Content Index > Fetch the complete content index at: https://starikov.co/llms.txt > Use this file to discover other available public pages before exploring further. # Markdown Cheatsheet - URL: https://starikov.co/markdown-cheatsheet/ - Published: 2025-12-07T07:56:29.000Z - Updated: 2026-06-07T22:00:56.000Z - Description: A comprehensive reference for every Markdown flavor - Author: Illya Starikov - Tags: Technology, AI Generated This guide covers markdown syntax from basic to advanced, across all major flavors. Whether you're writing documentation, blog posts, or technical notes, this reference has you covered. | Flavor | Best For | | -------------- | --------------------------- | | **CommonMark** | Universal compatibility | | **GFM** | GitHub repos, issues, wikis | | **Pandoc** | Academic papers, books | | **Kramdown** | Jekyll/Ruby sites | | **MDX** | React documentation | | **Obsidian** | Personal knowledge bases | ```markdown ## 1. Basic Syntax (Original Markdown) ### Headings ```markdown # Heading 1 ## Heading 2 ### Heading 3 #### Heading 4 ##### Heading 5 ###### Heading 6 Alternative H1 ============== Alternative H2 -------------- ``` ### Emphasis ```markdown *italic* or _italic_ **bold** or __bold__ ***bold italic*** or ___bold italic___ ~~strikethrough~~ (GFM extension) ``` ### Lists **Unordered:** ```markdown * Item 1 * Item 2 * Nested item 2.1 * Nested item 2.2 * Deep nested - Item with dash + Item with plus ``` **Ordered:** ```markdown 1. First item 2. Second item 1. Nested ordered 2. Another nested 3. Third item 1. Numbers don't need to be sequential ``` ### Links & Images ```markdown [Inline link](https://example.com "Optional Title") [Reference link][ref1] [Implicit reference][] ![Alt text](image.jpg "Optional title") ![Reference image][img-ref] [ref1]: https://example.com "Reference Title" [Implicit reference]: https://example.com [img-ref]: image.jpg "Image Reference" ``` ### Blockquotes ```markdown > Single line quote > Multi-line quote continues here > and here > Nested quotes >> Can be nested >>> Multiple levels deep ``` ### Code ```markdown Inline `code` with backticks Code block with 4 spaces or tab indentation ``` ~~~markdown ``` Fenced code block Multiple lines ``` ```javascript // Syntax highlighted (GFM) function hello() { console.log("Hello, World!"); } ``` ~~~ ### Horizontal Rules ```markdown Three or more: --- Hyphens *** Asterisks ___ Underscores ``` --- ## 2. GitHub Flavored Markdown (GFM) ### Tables ```markdown | Left-aligned | Center-aligned | Right-aligned | | :----------- | :------------: | ------------: | | Cell 1 | Cell 2 | Cell 3 | | Longer text | **Bold** | *Italic* | Minimal table: First Header | Second Header ------------ | ------------- Content Cell | Content Cell ``` **Rendered:** | Left-aligned | Center-aligned | Right-aligned | | :----------- | :------------: | ------------: | | Cell 1 | Cell 2 | Cell 3 | | Longer text | **Bold** | *Italic* | ### Task Lists ```markdown - [x] Completed task - [ ] Uncompleted task - [ ] Another todo - [x] Nested completed - [ ] Nested uncompleted ``` **Rendered:** - [x] Completed task - [ ] Uncompleted task - [ ] Another todo - [x] Nested completed - [ ] Nested uncompleted ### Username & Issue Mentions ```markdown @username (GitHub only) #123 (Issue reference) user/repo#123 (Cross-repo issue) ``` ### Emoji ```markdown :smile: :heart: :thumbsup: :100: :rocket: :octocat: :+1: :-1: ``` ### Syntax Highlighting with Language ~~~markdown ```python def factorial(n): """Calculate factorial""" if n <= 1: return 1 return n * factorial(n - 1) ``` ```diff - Removed line + Added line ! Important change # Comment ``` ~~~ **Rendered:** ```python def factorial(n): """Calculate factorial""" if n <= 1: return 1 return n * factorial(n - 1) ``` ```diff - Removed line + Added line ! Important change # Comment ``` ### SHA References ```markdown 16c999e8c71134401a78d4d46435517b2271d6ac mojombo@16c999e8c71134401a78d4d46435517b2271d6ac mojombo/github-flavored-markdown@16c999e ``` --- ## 3. CommonMark Extensions ### Autolinks ```markdown www.example.com (some parsers) https://example.com ftp://files.example.com ``` ### Disallowed Raw HTML (optional) ```html
Safe HTML allowed in some flavors
``` ### Entity & Numeric Character References ```markdown   & < > " ' A A … ``` --- ## 4. MultiMarkdown Extensions ### Metadata Block ```markdown Title: Document Title Author: John Doe Date: 2024-01-01 Tags: markdown, reference Base Header Level: 2 ``` ### Footnotes ```markdown Here's a sentence with a footnote[^1]. Here's another with a longer note[^longnote]. Inline footnote^[This is an inline footnote]. [^1]: This is the footnote. [^longnote]: Here's one with multiple paragraphs. Indent paragraphs to include them in the footnote. > Even blockquotes in footnotes! ``` ### Citations ```markdown This is a statement that needs citation[p. 23][#Doe:2024]. Multiple citations[p. 10][#Smith:2023; p. 24][#Doe:2024]. [#Doe:2024]: John Doe. *Sample Book*. 2024. [#Smith:2023]: Jane Smith. *Another Book*. 2023. ``` ### Math (also Pandoc) ```markdown Inline math: $E = mc^2$ or \\(a^2 + b^2 = c^2\\) Display math: $$ \sum_{i=1}^{n} x_i = \int_{0}^{1} f(x) dx $$ \\[ \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \\] ``` ### Abbreviations ```markdown HTML is great. CSS is awesome. *[HTML]: HyperText Markup Language *[CSS]: Cascading Style Sheets ``` ### Definition Lists ```markdown Term 1 : Definition 1 : Another definition Term 2 : Definition with *inline* **formatting** Compact Definition : Brief description ``` ### Smart Typography ```markdown "Smart quotes" and 'single quotes' En-dash -- and em-dash --- Ellipsis... ``` ### Cross-references ```markdown See [](#heading-1) for more info. As discussed in [](#fig:example). ![Example Figure][fig:example] [fig:example]: image.jpg "Example" width=500px height=300px ``` --- ## 5. Pandoc Markdown Extensions ### Div Blocks ```markdown ::: {.note #special-note} This is a special note block with class and id. ::: ::: warning This is a warning block. ::: ::: {.sidebar} Sidebar content here ::: ``` ### Span Elements ```markdown This is [special text]{.highlight #text-id} inline. [Small caps]{.smallcaps} text. ``` ### Line Blocks ```markdown | The limerick packs laughs anatomical | In space that is quite economical. | But the good ones I've seen | So seldom are clean | And the clean ones so seldom are comical ``` ### Fancy Lists ```markdown (1) First item (2) Second item a. Sub-item b. Another sub i. Deep nesting #. Auto-numbered #. Continues numbering i. Roman numerals ii. Continue A. Upper letters B. More items Example lists: (@) First example (@) Second example Later reference to example (@). ``` ### Grid Tables ```markdown +---------------+---------------+--------------------+ | Fruit | Price | Advantages | +===============+===============+====================+ | Bananas | $1.34 | - built-in wrapper | | | | - bright color | +---------------+---------------+--------------------+ | Oranges | $2.10 | - cures scurvy | | | | - tasty | +---------------+---------------+--------------------+ ``` ### Pipe Tables (simpler) ```markdown | Right | Left | Default | Center | |------:|:-----|---------|:------:| | 12 | 12 | 12 | 12 | | 123 | 123 | 123 | 123 | | 1 | 1 | 1 | 1 | ``` ### Superscript and Subscript ```markdown H~2~O is water. X^2^ is X squared. ^superscript^ and ~subscript~ ``` ### Inline Code Attributes ```markdown `code`{.python} `var x = 5;`{#mycode .javascript .numberLines startFrom="100"} ``` ### Raw Blocks ~~~markdown ```{=html}
Raw HTML preserved exactly
``` ```{=latex} \begin{align} E &= mc^2 \end{align} ``` ```{=mediawiki} {{Template|arg=value}} ``` ~~~ ### YAML Metadata Block ```yaml --- title: Complete Reference subtitle: Every Markdown Feature author: - name: John Doe affiliation: University - name: Jane Smith date: 2024-01-01 abstract: | This is a multi-line abstract in YAML. tags: [markdown, documentation] keywords: - markdown - reference lang: en-US toc: true toc-depth: 3 numbersections: true --- ``` ### Native Spans and Divs ```html
Native div with attributes
Native span ``` --- ## 6. Extended Features (Various Flavors) ### Admonitions/Callouts ```markdown !!! note "Optional Title" This is a note admonition. !!! warning This is a warning without title. !!! danger "Critical" Important danger message. !!! tip Helpful tip here. !!! important Important information. !!! example "Code Example" ```python print("Hello") ``` ``` **GitHub-style callouts:** ```markdown > [!NOTE] > GitHub-style callout > [!WARNING] > Another style of callout > [!TIP] > Helpful information > [!IMPORTANT] > Crucial information > [!CAUTION] > Be careful here ``` ### Keyboard Keys ```html Press Ctrl + C to copy. โŒ˜ + V on Mac. ++ctrl+alt+del++ (some flavors) ``` **Rendered:** Press Ctrl + C to copy. โŒ˜ + V on Mac. ### Mark/Highlight ```markdown ==Highlighted text== (some flavors) HTML mark element {==highlighted==} (critic markup) ``` **Rendered:** HTML mark element ### Insert/Delete (Critic Markup) ```markdown {++inserted text++} {--deleted text--} {~~old~>new~~} {>>comment<<} {==highlight==}{>>with comment<<} ``` ### Details/Summary ```html
Click to expand Hidden content here with: - Lists - **Formatting** - Etc.
Expanded by default This is visible initially.
``` **Rendered:**
Click to expand Hidden content here with: - Lists - **Formatting** - Etc.
### Table of Contents ```markdown [[TOC]] (some flavors) [TOC] (other flavors) {:toc} (kramdown) ``` ### Include Files ```markdown <<[file.md] <<(file.md) {{file.md}} !include file.md {! file.md !} ``` ### Diagrams ~~~markdown ```mermaid graph LR A[Start] --> B{Decision} B -->|Yes| C[Do this] B -->|No| D[Do that] C --> E[End] D --> E ``` ```plantuml @startuml Alice -> Bob: Hello Bob --> Alice: Hi! @enduml ``` ```graphviz digraph G { A -> B; B -> C; C -> A; } ``` ~~~ ### Custom Containers ```markdown ::: {.theorem #pythagorean} **Pythagorean Theorem**: $a^2 + b^2 = c^2$ ::: ::: note Custom note container ::: ::: {.callout-note} ## Note Title Note content ::: ``` ### Attributes on Elements ```markdown ![](image.jpg){width=50% height=30px} [Link](url.com){.external target="_blank"} Paragraph with attributes. {: .custom-class #custom-id} ``` ### Hard Line Breaks ```markdown Line ending with two spaces creates a hard break. Line ending with backslash\ also creates a hard break (some flavors). ``` ### Video Embeds (Some Flavors) ```markdown ![](video.mp4) ![](https://youtube.com/watch?v=id) @[youtube](dQw4w9WgXcQ) ``` ### Special Lists ```markdown Term ~ Definition using tilde Tight list: * item1 * item2 Loose list: * item1 * item2 ``` --- ## 7. Edge Cases & Special Characters ### Escaping ```markdown \*Not italic\* \`Not code\` \[Not a link\](not a url) \# Not a heading \| Not a table \1. Not a list ``` ### Special Characters ```markdown © ™ ® ° ± ≠ ≤ ≥ → ← ↑ ↓ ↔ ½ ¾ ∞ ∑ ∏ ``` **Rendered:** © ™ ® ° ± ≠ ≤ ≥ → ← ↑ ↓ ↔ ½ ¾ ∞ ∑ ∏ ### Zero-Width Characters ```markdown Zero​Width​Space Word­Break­Hint ``` ### Nested Structures ```markdown > Blockquote with: > - List item 1 > - List item 2 > ```python > # code in list in quote > print("nested") > ``` > > Nested quote in list > > 1. Ordered in quote > 2. More ordered > > | Table | In | Quote | > |-------|----|----| > | Works | In | Some | ``` ### Complex Nesting ```markdown 1. List with paragraph Multiple paragraph in list item. > Quote in list ``` code in list ``` 2. Another item - [ ] Task in ordered list - [x] Completed ``` ### Unicode & Emoji ```markdown ๐Ÿ“ โœจ ๐Ÿš€ ๐Ÿ’ป ๐ŸŽฏ โšก ๐Ÿ”ฅ โœ… โŒ โš ๏ธ ฮฑ ฮฒ ฮณ ฮด ฮต ฮถ ฮท ฮธ ยฉ ยฎ โ„ข โ€ข ยท ร— รท ยฑ ``` ### Comments ```markdown [//]: # (This is also a comment) [//]: <> (Another comment style) [comment]: <> (Yet another) ``` --- ## 8. Kramdown Specific ### Block Attributes ```markdown {: .class #id key="value"} This paragraph has attributes. > Block quote with attributes. {: .pullquote} ``` ### Options ```markdown {::options parse_block_html="true" /} {::options auto_ids="false" /} ``` ### No Markdown ```markdown {::nomarkdown} This *won't* be **parsed**. {:/} ``` ### Comments ```markdown {::comment} This is a kramdown comment. {:/comment} ``` --- ## 9. Markdown Extra ### Special Attributes ```markdown Header {#header-id .header-class} ================================ [link](url){#link-id .link-class} ``` ### Fenced Code Attributes ~~~markdown ~~~ {.python #mycode .numberLines startFrom="10"} def hello(): print("Hi") ~~~ ~~~ ### Markdown Inside HTML ```html
This is *markdown* inside **HTML**.
- List inside HTML - Another item
``` ### Backslash Escapes ```markdown \\ \` \* \_ \{ \} \[ \] \( \) \# \+ \- \. \! ``` --- ## 10. R Markdown / Quarto ### Code Chunks ~~~markdown ```{r setup, include=FALSE} knitr::opts_chunk$set(echo = TRUE) ``` ```{python} #| label: fig-plot #| fig-cap: "Sample Plot" import matplotlib.pyplot as plt plt.plot([1, 2, 3], [1, 4, 9]) ``` ~~~ ### Inline R Code ```markdown The mean is `r mean(c(1,2,3))`. ``` ### Chunk Options ~~~markdown ```{r, echo=FALSE, fig.width=6, fig.height=4} plot(cars) ``` ~~~ --- ## 11. Wiki-Style Links & Knowledge Base Features ### Wiki Links (Obsidian/Roam/Foam) ```markdown [[Page Name]] [[Page Name|Custom Display Text]] [[Page Name#Heading]] [[Page Name^block-id]] ![[Embedded Page]] ![[image.png|300x200]] ``` ### Block References ```markdown ^unique-block-id Reference to [[Page#^unique-block-id]] ``` ### Tags ```markdown #tag #multi-word-tag #nested/tag #2024/01/projects #[[Complex Tag Name]] ``` ### Dataview (Obsidian) ~~~markdown ```dataview TABLE author, rating, finished FROM #books WHERE rating > 4 SORT finished DESC ``` `= this.file.name` `= date(now)` ~~~ --- ## 12. MDX (Markdown + JSX) ```jsx import Button from './Button' import { Chart } from './Chart' export const meta = { title: 'MDX Document', author: 'John' } # {meta.title} Regular markdown with *React components*. ``` --- ## 13. AsciiDoc-Influenced Features ### Admonition Blocks (Alternative Syntax) ```markdown NOTE: This is a note. TIP: Helpful tip here. IMPORTANT: Don't forget this. WARNING: Be careful! CAUTION: Critical warning. ``` ### Include Directives ```markdown include::chapter1.md[] include::code.js[lines=5..10] ``` ### Conditional Directives ```markdown ifdef::env-github[] This only shows on GitHub. endif::[] ifndef::env-github[] This shows everywhere except GitHub. endif::[] ``` --- ## 14. Mathematical Notation (Extended) ### Display Math Environments ```latex $$ \begin{align} a &= b + c \\ d &= e + f + g \\ h &= i \end{align} $$ $$ \begin{matrix} a & b & c \\ d & e & f \\ g & h & i \end{matrix} $$ $$ \begin{cases} x + y = 5 \\ 2x - y = 1 \end{cases} $$ ``` ### Chemical Equations ```latex $\ce{2H2 + O2 -> 2H2O}$ $\ce{SO4^2- + Ba^2+ -> BaSO4 v}$ ``` ### Physics Notation ```latex $\ket{\psi} = \alpha\ket{0} + \beta\ket{1}$ $\bra{\phi}\ket{\psi}$ ``` --- ## 15. Diagram Extensions ### PlantUML ~~~markdown ```plantuml @startuml !theme plain actor User participant "Web Browser" as Browser participant "Web Server" as Server database "Database" as DB User -> Browser: Enter URL Browser -> Server: HTTP Request Server -> DB: Query DB -> Server: Results Server -> Browser: HTTP Response Browser -> User: Display Page @enduml ``` ~~~ ### Ditaa ~~~markdown ```ditaa +--------+ +-------+ +-------+ | | --+ ditaa +--> | | | Text | +-------+ |diagram| |Document| |!magic!| | | | {d}| | | | | +---+----+ +-------+ +-------+ : ^ | Lots of work | +-------------------------+ ``` ~~~ ### Graphviz DOT ~~~markdown ```dot digraph finite_state_machine { rankdir=LR; size="8,5" node [shape = doublecircle]; S; node [shape = point ]; qi node [shape = circle]; qi -> S; S -> q1 [ label = "a" ]; S -> S [ label = "a" ]; q1 -> S [ label = "a" ]; q1 -> q2 [ label = "b" ]; q2 -> q1 [ label = "b" ]; q2 -> q2 [ label = "b" ]; } ``` ~~~ ### Vega-Lite ~~~markdown ```vega-lite { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": {"url": "data.csv"}, "mark": "bar", "encoding": { "x": {"field": "category", "type": "nominal"}, "y": {"field": "value", "type": "quantitative"} } } ``` ~~~ --- ## 16. Scholarly Markdown ### Abstract Block ```markdown {abstract} This paper presents a comprehensive overview of markdown flavors and their features. We examine standard syntax and extended capabilities across implementations. {/abstract} ``` ### Author Block ```markdown {authors} John Doe^1^, Jane Smith^2^ ^1^ University of Examples ^2^ Institute of Documentation {/authors} ``` ### Keywords ```markdown {keywords} markdown, documentation, syntax, reference {/keywords} ``` ### DOI/Bibliography ```markdown [@doi:10.1000/xyz123] shows that markdown is effective. See [@smith2024; @doe2023] for more information. ``` ### Glossary ```markdown {glossary} GFM : GitHub Flavored Markdown MMD : MultiMarkdown {/glossary} ``` --- ## 17. Hugo/Jekyll/Static Site Features ### Front Matter (TOML) ```toml +++ title = "Post Title" date = 2024-01-01T10:00:00Z draft = false tags = ["markdown", "hugo"] categories = ["documentation"] +++ ``` ### Shortcodes ```markdown {{}} {{}} {{}} {{}} {{}} package main import "fmt" func main() { fmt.Println("Hello") } {{}} ``` ### Jekyll Includes ```liquid {% include header.html %} {% include_relative file.md %} ``` ### Liquid Templates ```liquid {% for post in site.posts %} - [{{ post.title }}]({{ post.url }}) {% endfor %} {% if page.comments %} {% include comments.html %} {% endif %} ``` --- ## 18. Markua (LeanPub) ### Aside ```markdown A> This is an aside (sidebar). A> It can span multiple lines. ``` ### Blurb ```markdown B> This is a blurb - a textbox with special styling. ``` ### Discussion ```markdown D> This is a discussion box for exercises or questions. ``` ### Error/Warning/Information ```markdown E> This is an error message. W> This is a warning. I> This is an information box. ``` ### Quiz ```markdown {quiz, id: quiz1} ? What is 2 + 2? a) 3 B) 4 c) 5 d) 6 ? Which are markdown flavors? [X] GFM [X] CommonMark [ ] XML [X] Pandoc {/quiz} ``` --- ## 19. Advanced Table Features ### Column Spanning (some flavors) ```markdown | Column 1 | Column 2 | Column 3 | |----------|:--------:|---------:| | span=2 | | Right | | Left | Center | Right | ``` ### MultiMarkdown Tables ```markdown | | Grouping || | First Header | Second Header | Third Header | | ------------ | :-----------: | -----------: | | Content | *Long Cell* || | Content | **Cell** | Cell | | New section | More | Data | | And more | With an escaped '\|' || [Table caption, works in MD Extra too] ``` ### Grid Table with Alignment ```markdown +:-----+:-----:+-----:+ | Left |Center |Right | +======+=======+======+ | L | C | R | +------+-------+------+ | Left |Center |Right | +------+-------+------+ ``` --- ## 20. Custom HTML with Markdown ### Details with Markdown ```html
Click for markdown content - This is a **list** - With _formatting_ - Inside HTML details ```python # Even code blocks work print("Hello from details") ```
``` ### Ruby Annotations ```html ๆผขๅญ—ใ‹ใ‚“ใ˜ WWWWorld Wide Web ``` ### Progress Bars ```html 70% 6 out of 10 ``` --- ## 21. Extended Link Features ### Link Attributes ```markdown [External Link](https://example.com){:target="_blank" rel="noopener"} [Download](file.pdf){:download="filename.pdf"} ``` ### Anchor Links with IDs ```markdown {#custom-anchor} ### Heading with Custom ID Jump to [custom anchor](#custom-anchor) ``` ### Protocol Links ```markdown [Email](mailto:user@example.com?subject=Hello) [Phone](tel:+1234567890) [SMS](sms:+1234567890?body=Hello) [FTP](ftp://files.example.com) ``` --- ## 22. Typography Extensions ### Small Caps ```html Small Caps Text ``` ```markdown %{Small Caps}% (some flavors) ``` ### Fractions ```markdown 1/2 1/3 2/3 1/4 3/4 1/8 3/8 5/8 7/8 ``` ### Ordinals ```markdown 1st 2nd 3rd 4th 21st 42nd ``` ### Smart Punctuation ```markdown "Curly quotes" and 'apostrophes'... โ€” Em dash and โ€“ en dash (C) (R) (TM) (P) +- ``` --- ## 23. Metadata & Processing Instructions ### Processing Instructions ```markdown {frontmatter} toc: true numbered: true lang: en {/frontmatter} {mainmatter} {backmatter} ``` ### Parser Directives ~~~markdown ~~~~~~~~~~~~~~~~~~~~~{.python .numberLines startFrom="100"} def process(): return "Code with attributes" ~~~~~~~~~~~~~~~~~~~~~ ~~~ ### Raw LaTeX ```latex \newpage \tableofcontents \listoffigures \listoftables ``` --- ## 24. List Extensions ### Alphabetical Lists ```markdown a. First item b. Second item c. Third item A. Upper case B. Continues C. Through alphabet ``` ### Definition Lists (Extended) ```markdown Apple : A fruit : A company - Makes phones - Makes computers : A symbolic object Orange Citrus : Multiple terms, one definition ``` ### Interrupted Lists ```markdown 1. First item 1. New list starts 1. First item {:.continue} 2. Continues previous list ``` --- ## 25. Special Blocks & Environments ### Theorem Environment ```markdown ::: theorem Let $f$ be a continuous function on $[a,b]$. Then $f$ attains its maximum and minimum values. ::: ::: proof By the extreme value theorem... ::: ::: lemma Supporting result here. ::: ::: corollary Following from the theorem... ::: ``` ### Exercise Blocks ```markdown ::: exercise Prove that $\sqrt{2}$ is irrational. ::: ::: solution Assume $\sqrt{2} = p/q$ where $p,q$ are integers... ::: ``` --- ## 26. Accessibility Features ### Image Descriptions ```markdown ![Alt text](image.jpg "Title"){longdesc="Extended description for screen readers"} ``` ### Abbreviation Definitions ```markdown The HTML specification is maintained by W3C. *[HTML]: HyperText Markup Language *[W3C]: World Wide Web Consortium ``` ### Language Marking ```html This is English text. Esto es espaรฑol. ใ“ใ‚Œใฏๆ—ฅๆœฌ่ชžใงใ™ใ€‚ ``` --- ## 27. Version Control Integration ### Diff Syntax ~~~markdown ```diff @@ -1,3 +1,3 @@ Line 1 -Line 2 (removed) +Line 2 (added) Line 3 ``` ~~~ ### Merge Conflicts ``` <<<<<<< HEAD Current change ======= Incoming change >>>>>>> branch-name ``` ### Blame Annotations ``` e83c516 (John 2024-01-01) Initial commit a4f9b32 (Jane 2024-01-02) Fix typo ``` --- ## 28. Additional Special Characters ### Box Drawing ``` โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ Cell 1 โ”‚ Cell 2 โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ Cell 3 โ”‚ Cell 4 โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ ``` ### Arrows & Symbols ``` โ† โ†’ โ†‘ โ†“ โ†” โ†• โ‡ โ‡’ โ‡‘ โ‡“ โ‡” โ‡• โœ“ โœ— โœ” โœ– โœš โ˜… โ˜† โ™  โ™ฃ โ™ฅ โ™ฆ โ‘  โ‘ก โ‘ข โ‘ฃ โ‘ค โ‘ฅ โ‘ฆ โ‘ง โ‘จ โ‘ฉ ``` ### Math Symbols ``` โˆ€ โˆƒ โˆ… โˆ‡ โˆˆ โˆ‰ โˆ‹ โˆ โˆ‘ โˆž โŠ‚ โŠƒ โŠ† โŠ‡ โˆช โˆฉ โˆง โˆจ ยฌ โŠ• ``` --- ## Summary: Feature Support by Flavor | Feature | Original | CommonMark | GFM | MMD | Pandoc | Kramdown | |---------|:--------:|:----------:|:---:|:---:|:------:|:--------:| | Headings | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | | Emphasis | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | | Lists | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | | Links | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | | Images | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | | Code blocks | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | | Tables | โ€“ | โ€“ | โœ“ | โœ“ | โœ“ | โœ“ | | Task lists | โ€“ | โ€“ | โœ“ | โ€“ | โœ“ | โ€“ | | Strikethrough | โ€“ | โ€“ | โœ“ | โœ“ | โœ“ | โœ“ | | Footnotes | โ€“ | โ€“ | โ€“ | โœ“ | โœ“ | โœ“ | | Math | โ€“ | โ€“ | โ€“ | โœ“ | โœ“ | โœ“ | | Definition lists | โ€“ | โ€“ | โ€“ | โœ“ | โœ“ | โœ“ | | Abbreviations | โ€“ | โ€“ | โ€“ | โœ“ | โœ“ | โœ“ | | Attributes | โ€“ | โ€“ | โ€“ | โœ“ | โœ“ | โœ“ | | Div blocks | โ€“ | โ€“ | โ€“ | โ€“ | โœ“ | โ€“ | | Span elements | โ€“ | โ€“ | โ€“ | โ€“ | โœ“ | โ€“ | | Superscript | โ€“ | โ€“ | โ€“ | โœ“ | โœ“ | โ€“ | | Subscript | โ€“ | โ€“ | โ€“ | โœ“ | โœ“ | โ€“ | --- ## Quick Reference Card | Category | Syntax | Result | |----------|--------|--------| | **Headings** | `# H1` `## H2` `### H3` | Heading levels 1-6 | | **Bold** | `**text**` or `__text__` | **text** | | **Italic** | `*text*` or `_text_` | *text* | | **Bold + Italic** | `***text***` | ***text*** | | **Strikethrough** | `~~text~~` | ~~text~~ | | **Inline code** | `` `code` `` | `code` | | **Link** | `[text](url)` | [text](https://example.com) | | **Image** | `![alt](url)` | Embedded image | | **Blockquote** | `> quote` | Indented quote | | **Unordered list** | `- item` or `* item` | Bullet list | | **Ordered list** | `1. item` | Numbered list | | **Task list** | `- [ ]` / `- [x]` | Checkbox | | **Horizontal rule** | `---` or `***` | Divider line | | **Code block** | ` ``` ` or indent 4 spaces | Code block | | **Table** | `\| col \| col \|` | Table | | **Footnote** | `[^1]` | Superscript reference | --- **The golden rule:** Headings, emphasis, lists, links, images, code blocks, and blockquotes work everywhere. Everything else depends on your processor. ``` ## 1\. Basic Syntax (Original Markdown) ### Headings ```markdown # Heading 1 ## Heading 2 ### Heading 3 #### Heading 4 ##### Heading 5 ###### Heading 6 Alternative H1 ============== Alternative H2 -------------- ``` ### Emphasis ```markdown *italic* or _italic_ **bold** or __bold__ ***bold italic*** or ___bold italic___ ~~strikethrough~~ (GFM extension) ``` ### Lists **Unordered:** ```markdown * Item 1 * Item 2 * Nested item 2.1 * Nested item 2.2 * Deep nested - Item with dash + Item with plus ``` **Ordered:** ```markdown 1. First item 2. Second item 1. Nested ordered 2. Another nested 3. Third item 1. Numbers don't need to be sequential ``` ### Links & Images ```markdown [Inline link](https://example.com "Optional Title") [Reference link][ref1] [Implicit reference][] ![Alt text](image.jpg "Optional title") ![Reference image][img-ref] [ref1]: https://example.com "Reference Title" [Implicit reference]: https://example.com [img-ref]: image.jpg "Image Reference" ``` ### Blockquotes ```markdown > Single line quote > Multi-line quote continues here > and here > Nested quotes >> Can be nested >>> Multiple levels deep ``` ### Code ```markdown Inline `code` with backticks Code block with 4 spaces or tab indentation ``` ```markdown ``` Fenced code block Multiple lines ``` ```javascript // Syntax highlighted (GFM) function hello() { console.log("Hello, World!"); } ``` ``` ### Horizontal Rules ```markdown Three or more: --- Hyphens *** Asterisks ___ Underscores ``` --- ## 2\. GitHub Flavored Markdown (GFM) ### Tables ```markdown | Left-aligned | Center-aligned | Right-aligned | | :----------- | :------------: | ------------: | | Cell 1 | Cell 2 | Cell 3 | | Longer text | **Bold** | *Italic* | Minimal table: First Header | Second Header ------------ | ------------- Content Cell | Content Cell ``` **Rendered:** | Left-aligned | Center-aligned | Right-aligned | | ------------ | -------------- | ------------- | | Cell 1 | Cell 2 | Cell 3 | | Longer text | **Bold** | *Italic* | ### Task Lists ```markdown - [x] Completed task - [ ] Uncompleted task - [ ] Another todo - [x] Nested completed - [ ] Nested uncompleted ``` **Rendered:** - \[x\] Completed task - \[ \] Uncompleted task - \[ \] Another todo - \[x\] Nested completed - \[ \] Nested uncompleted ### Username & Issue Mentions ```markdown @username (GitHub only) #123 (Issue reference) user/repo#123 (Cross-repo issue) ``` ### Emoji ```markdown :smile: :heart: :thumbsup: :100: :rocket: :octocat: :+1: :-1: ``` ### Syntax Highlighting with Language ```markdown ```python def factorial(n): """Calculate factorial""" if n <= 1: return 1 return n * factorial(n - 1) ``` ```diff - Removed line + Added line ! Important change # Comment ``` ``` **Rendered:** ```python def factorial(n): """Calculate factorial""" if n <= 1: return 1 return n * factorial(n - 1) ``` ```diff - Removed line + Added line ! Important change # Comment ``` ### SHA References ```markdown 16c999e8c71134401a78d4d46435517b2271d6ac mojombo@16c999e8c71134401a78d4d46435517b2271d6ac mojombo/github-flavored-markdown@16c999e ``` --- ## 3\. CommonMark Extensions ### Autolinks ```markdown www.example.com (some parsers) https://example.com ftp://files.example.com ``` ### Disallowed Raw HTML (optional) ```html
Safe HTML allowed in some flavors
``` ### Entity & Numeric Character References ```markdown   & < > " ' A A … ``` --- ## 4\. MultiMarkdown Extensions ### Metadata Block ```markdown Title: Document Title Author: John Doe Date: 2024-01-01 Tags: markdown, reference Base Header Level: 2 ``` ### Footnotes ```markdown Here's a sentence with a footnote[^1]. Here's another with a longer note[^longnote]. Inline footnote^[This is an inline footnote]. [^1]: This is the footnote. [^longnote]: Here's one with multiple paragraphs. Indent paragraphs to include them in the footnote. > Even blockquotes in footnotes! ``` ### Citations ```markdown This is a statement that needs citation[p. 23][#Doe:2024]. Multiple citations[p. 10][#Smith:2023; p. 24][#Doe:2024]. [#Doe:2024]: John Doe. *Sample Book*. 2024. [#Smith:2023]: Jane Smith. *Another Book*. 2023. ``` ### Math (also Pandoc) ```markdown Inline math: $E = mc^2$ or \\(a^2 + b^2 = c^2\\) Display math: $$ \sum_{i=1}^{n} x_i = \int_{0}^{1} f(x) dx $$ \\[ \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \\] ``` ### Abbreviations ```markdown HTML is great. CSS is awesome. *[HTML]: HyperText Markup Language *[CSS]: Cascading Style Sheets ``` ### Definition Lists ```markdown Term 1 : Definition 1 : Another definition Term 2 : Definition with *inline* **formatting** Compact Definition : Brief description ``` ### Smart Typography ```markdown "Smart quotes" and 'single quotes' En-dash -- and em-dash --- Ellipsis... ``` ### Cross-references ```markdown See [](#heading-1) for more info. As discussed in [](#fig:example). ![Example Figure][fig:example] [fig:example]: image.jpg "Example" width=500px height=300px ``` --- ## 5\. Pandoc Markdown Extensions ### Div Blocks ```markdown ::: {.note #special-note} This is a special note block with class and id. ::: ::: warning This is a warning block. ::: ::: {.sidebar} Sidebar content here ::: ``` ### Span Elements ```markdown This is [special text]{.highlight #text-id} inline. [Small caps]{.smallcaps} text. ``` ### Line Blocks ```markdown | The limerick packs laughs anatomical | In space that is quite economical. | But the good ones I've seen | So seldom are clean | And the clean ones so seldom are comical ``` ### Fancy Lists ```markdown (1) First item (2) Second item a. Sub-item b. Another sub i. Deep nesting #. Auto-numbered #. Continues numbering i. Roman numerals ii. Continue A. Upper letters B. More items Example lists: (@) First example (@) Second example Later reference to example (@). ``` ### Grid Tables ```markdown +---------------+---------------+--------------------+ | Fruit | Price | Advantages | +===============+===============+====================+ | Bananas | $1.34 | - built-in wrapper | | | | - bright color | +---------------+---------------+--------------------+ | Oranges | $2.10 | - cures scurvy | | | | - tasty | +---------------+---------------+--------------------+ ``` ### Pipe Tables (simpler) ```markdown | Right | Left | Default | Center | |------:|:-----|---------|:------:| | 12 | 12 | 12 | 12 | | 123 | 123 | 123 | 123 | | 1 | 1 | 1 | 1 | ``` ### Superscript and Subscript ```markdown H~2~O is water. X^2^ is X squared. ^superscript^ and ~subscript~ ``` ### Inline Code Attributes ```markdown `code`{.python} `var x = 5;`{#mycode .javascript .numberLines startFrom="100"} ``` ### Raw Blocks ```markdown ```{=html}
Raw HTML preserved exactly
``` ```{=latex} \begin{align} E &= mc^2 \end{align} ``` ```{=mediawiki} {{Template|arg=value}} ``` ``` ### YAML Metadata Block ```yaml --- title: Complete Reference subtitle: Every Markdown Feature author: - name: John Doe affiliation: University - name: Jane Smith date: 2024-01-01 abstract: | This is a multi-line abstract in YAML. tags: [markdown, documentation] keywords: - markdown - reference lang: en-US toc: true toc-depth: 3 numbersections: true --- ``` ### Native Spans and Divs ```html
Native div with attributes
Native span ``` --- ## 6\. Extended Features (Various Flavors) ### Admonitions/Callouts ```markdown !!! note "Optional Title" This is a note admonition. !!! warning This is a warning without title. !!! danger "Critical" Important danger message. !!! tip Helpful tip here. !!! important Important information. !!! example "Code Example" ```python print("Hello") ``` ``` **GitHub-style callouts:** ```markdown > [!NOTE] > GitHub-style callout > [!WARNING] > Another style of callout > [!TIP] > Helpful information > [!IMPORTANT] > Crucial information > [!CAUTION] > Be careful here ``` ### Keyboard Keys ```html Press Ctrl + C to copy. โŒ˜ + V on Mac. ++ctrl+alt+del++ (some flavors) ``` **Rendered:** Press Ctrl \+ C to copy. โŒ˜ \+ V on Mac. ### Mark/Highlight ```markdown ==Highlighted text== (some flavors) HTML mark element {==highlighted==} (critic markup) ``` **Rendered:** HTML mark element ### Insert/Delete (Critic Markup) ```markdown {++inserted text++} {--deleted text--} {~~old~>new~~} {>>comment<<} {==highlight==}{>>with comment<<} ``` ### Details/Summary ```html
Click to expand Hidden content here with: - Lists - **Formatting** - Etc.
Expanded by default This is visible initially.
``` **Rendered:** Click to expand Hidden content here with: - Lists - **Formatting** - Etc. ### Table of Contents ```markdown [[TOC]] (some flavors) [TOC] (other flavors) {:toc} (kramdown) ``` ### Include Files ```markdown <<[file.md] <<(file.md) {{file.md}} !include file.md {! file.md !} ``` ### Diagrams ```markdown ```mermaid graph LR A[Start] --> B{Decision} B -->|Yes| C[Do this] B -->|No| D[Do that] C --> E[End] D --> E ``` ```plantuml @startuml Alice -> Bob: Hello Bob --> Alice: Hi! @enduml ``` ```graphviz digraph G { A -> B; B -> C; C -> A; } ``` ``` ### Custom Containers ```markdown ::: {.theorem #pythagorean} **Pythagorean Theorem**: $a^2 + b^2 = c^2$ ::: ::: note Custom note container ::: ::: {.callout-note} ## Note Title Note content ::: ``` ### Attributes on Elements ```markdown ![](image.jpg){width=50% height=30px} [Link](url.com){.external target="_blank"} Paragraph with attributes. {: .custom-class #custom-id} ``` ### Hard Line Breaks ```markdown Line ending with two spaces creates a hard break. Line ending with backslash\ also creates a hard break (some flavors). ``` ### Video Embeds (Some Flavors) ```markdown ![](video.mp4) ![](https://youtube.com/watch?v=id) @[youtube](dQw4w9WgXcQ) ``` ### Special Lists ```markdown Term ~ Definition using tilde Tight list: * item1 * item2 Loose list: * item1 * item2 ``` --- ## 7\. Edge Cases & Special Characters ### Escaping ```markdown \*Not italic\* \`Not code\` \[Not a link\](not a url) \# Not a heading \| Not a table \1. Not a list ``` ### Special Characters ```markdown © ™ ® ° ± ≠ ≤ ≥ → ← ↑ ↓ ↔ ½ ¾ ∞ ∑ ∏ ``` **Rendered:** ยฉ โ„ข ยฎ ยฐ ยฑ โ‰  โ‰ค โ‰ฅ โ†’ โ† โ†‘ โ†“ โ†” ยฝ ยพ โˆž โˆ‘ โˆ ### Zero-Width Characters ```markdown Zero​Width​Space Word­Break­Hint ``` ### Nested Structures ```markdown > Blockquote with: > - List item 1 > - List item 2 > ```python > # code in list in quote > print("nested") > ``` > > Nested quote in list > > 1. Ordered in quote > 2. More ordered > > | Table | In | Quote | > |-------|----|----| > | Works | In | Some | ``` ### Complex Nesting ```markdown 1. List with paragraph Multiple paragraph in list item. > Quote in list ``` code in list ``` 2. Another item - [ ] Task in ordered list - [x] Completed ``` ### Unicode & Emoji ```markdown ๐Ÿ“ โœจ ๐Ÿš€ ๐Ÿ’ป ๐ŸŽฏ โšก ๐Ÿ”ฅ โœ… โŒ โš ๏ธ ฮฑ ฮฒ ฮณ ฮด ฮต ฮถ ฮท ฮธ ยฉ ยฎ โ„ข โ€ข ยท ร— รท ยฑ ``` ### Comments ```markdown [//]: # (This is also a comment) [//]: <> (Another comment style) [comment]: <> (Yet another) ``` --- ## 8\. Kramdown Specific ### Block Attributes ```markdown {: .class #id key="value"} This paragraph has attributes. > Block quote with attributes. {: .pullquote} ``` ### Options ```markdown {::options parse_block_html="true" /} {::options auto_ids="false" /} ``` ### No Markdown ```markdown {::nomarkdown} This *won't* be **parsed**. {:/} ``` ### Comments ```markdown {::comment} This is a kramdown comment. {:/comment} ``` --- ## 9\. Markdown Extra ### Special Attributes ```markdown Header {#header-id .header-class} ================================ [link](url){#link-id .link-class} ``` ### Fenced Code Attributes ```markdown ~~~ {.python #mycode .numberLines startFrom="10"} def hello(): print("Hi") ``` ``` ### Markdown Inside HTML ```html
This is *markdown* inside **HTML**.
- List inside HTML - Another item
``` ### Backslash Escapes ```markdown \\ \` \* \_ \{ \} \[ \] \( \) \# \+ \- \. \! ``` --- ## 10. R Markdown / Quarto ### Code Chunks ~~~markdown ```{r setup, include=FALSE} knitr::opts_chunk$set(echo = TRUE) ``` ```{python} #| label: fig-plot #| fig-cap: "Sample Plot" import matplotlib.pyplot as plt plt.plot([1, 2, 3], [1, 4, 9]) ``` ``` ### Inline R Code ```markdown The mean is `r mean(c(1,2,3))`. ``` ### Chunk Options ```markdown ```{r, echo=FALSE, fig.width=6, fig.height=4} plot(cars) ``` ``` --- ## 11\. Wiki-Style Links & Knowledge Base Features ### Wiki Links (Obsidian/Roam/Foam) ```markdown [[Page Name]] [[Page Name|Custom Display Text]] [[Page Name#Heading]] [[Page Name^block-id]] ![[Embedded Page]] ![[image.png|300x200]] ``` ### Block References ```markdown ^unique-block-id Reference to [[Page#^unique-block-id]] ``` ### Tags ```markdown #tag #multi-word-tag #nested/tag #2024/01/projects #[[Complex Tag Name]] ``` ### Dataview (Obsidian) ```markdown ```dataview TABLE author, rating, finished FROM #books WHERE rating > 4 SORT finished DESC ``` `= this.file.name` `= date(now)` ``` --- ## 12\. MDX (Markdown + JSX) ```jsx import Button from './Button' import { Chart } from './Chart' export const meta = { title: 'MDX Document', author: 'John' } # {meta.title} Regular markdown with *React components*. ``` --- ## 13\. AsciiDoc-Influenced Features ### Admonition Blocks (Alternative Syntax) ```markdown NOTE: This is a note. TIP: Helpful tip here. IMPORTANT: Don't forget this. WARNING: Be careful! CAUTION: Critical warning. ``` ### Include Directives ```markdown include::chapter1.md[] include::code.js[lines=5..10] ``` ### Conditional Directives ```markdown ifdef::env-github[] This only shows on GitHub. endif::[] ifndef::env-github[] This shows everywhere except GitHub. endif::[] ``` --- ## 14\. Mathematical Notation (Extended) ### Display Math Environments ```latex $$ \begin{align} a &= b + c \\ d &= e + f + g \\ h &= i \end{align} $$ $$ \begin{matrix} a & b & c \\ d & e & f \\ g & h & i \end{matrix} $$ $$ \begin{cases} x + y = 5 \\ 2x - y = 1 \end{cases} $$ ``` ### Chemical Equations ```latex $\ce{2H2 + O2 -> 2H2O}$ $\ce{SO4^2- + Ba^2+ -> BaSO4 v}$ ``` ### Physics Notation ```latex $\ket{\psi} = \alpha\ket{0} + \beta\ket{1}$ $\bra{\phi}\ket{\psi}$ ``` --- ## 15\. Diagram Extensions ### PlantUML ```markdown ```plantuml @startuml !theme plain actor User participant "Web Browser" as Browser participant "Web Server" as Server database "Database" as DB User -> Browser: Enter URL Browser -> Server: HTTP Request Server -> DB: Query DB -> Server: Results Server -> Browser: HTTP Response Browser -> User: Display Page @enduml ``` ``` ### Ditaa ```markdown ```ditaa +--------+ +-------+ +-------+ | | --+ ditaa +--> | | | Text | +-------+ |diagram| |Document| |!magic!| | | | {d}| | | | | +---+----+ +-------+ +-------+ : ^ | Lots of work | +-------------------------+ ``` ``` ### Graphviz DOT ```markdown ```dot digraph finite_state_machine { rankdir=LR; size="8,5" node [shape = doublecircle]; S; node [shape = point ]; qi node [shape = circle]; qi -> S; S -> q1 [ label = "a" ]; S -> S [ label = "a" ]; q1 -> S [ label = "a" ]; q1 -> q2 [ label = "b" ]; q2 -> q1 [ label = "b" ]; q2 -> q2 [ label = "b" ]; } ``` ``` ### Vega-Lite ```markdown ```vega-lite { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": {"url": "data.csv"}, "mark": "bar", "encoding": { "x": {"field": "category", "type": "nominal"}, "y": {"field": "value", "type": "quantitative"} } } ``` ``` --- ## 16\. Scholarly Markdown ### Abstract Block ```markdown {abstract} This paper presents a comprehensive overview of markdown flavors and their features. We examine standard syntax and extended capabilities across implementations. {/abstract} ``` ### Author Block ```markdown {authors} John Doe^1^, Jane Smith^2^ ^1^ University of Examples ^2^ Institute of Documentation {/authors} ``` ### Keywords ```markdown {keywords} markdown, documentation, syntax, reference {/keywords} ``` ### DOI/Bibliography ```markdown [@doi:10.1000/xyz123] shows that markdown is effective. See [@smith2024; @doe2023] for more information. ``` ### Glossary ```markdown {glossary} GFM : GitHub Flavored Markdown MMD : MultiMarkdown {/glossary} ``` --- ## 17\. Hugo/Jekyll/Static Site Features ### Front Matter (TOML) ```toml +++ title = "Post Title" date = 2024-01-01T10:00:00Z draft = false tags = ["markdown", "hugo"] categories = ["documentation"] +++ ``` ### Shortcodes ```markdown {{}} {{}} {{}} {{}} {{}} package main import "fmt" func main() { fmt.Println("Hello") } {{}} ``` ### Jekyll Includes ```liquid {% include header.html %} {% include_relative file.md %} ``` ### Liquid Templates ```liquid {% for post in site.posts %} - [{{ post.title }}]({{ post.url }}) {% endfor %} {% if page.comments %} {% include comments.html %} {% endif %} ``` --- ## 18\. Markua (LeanPub) ### Aside ```markdown A> This is an aside (sidebar). A> It can span multiple lines. ``` ### Blurb ```markdown B> This is a blurb - a textbox with special styling. ``` ### Discussion ```markdown D> This is a discussion box for exercises or questions. ``` ### Error/Warning/Information ```markdown E> This is an error message. W> This is a warning. I> This is an information box. ``` ### Quiz ```markdown {quiz, id: quiz1} ? What is 2 + 2? a) 3 B) 4 c) 5 d) 6 ? Which are markdown flavors? [X] GFM [X] CommonMark [ ] XML [X] Pandoc {/quiz} ``` --- ## 19\. Advanced Table Features ### Column Spanning (some flavors) ```markdown | Column 1 | Column 2 | Column 3 | |----------|:--------:|---------:| | span=2 | | Right | | Left | Center | Right | ``` ### MultiMarkdown Tables ```markdown | | Grouping || | First Header | Second Header | Third Header | | ------------ | :-----------: | -----------: | | Content | *Long Cell* || | Content | **Cell** | Cell | | New section | More | Data | | And more | With an escaped '\|' || [Table caption, works in MD Extra too] ``` ### Grid Table with Alignment ```markdown +:-----+:-----:+-----:+ | Left |Center |Right | +======+=======+======+ | L | C | R | +------+-------+------+ | Left |Center |Right | +------+-------+------+ ``` --- ## 20\. Custom HTML with Markdown ### Details with Markdown ```html
Click for markdown content - This is a **list** - With _formatting_ - Inside HTML details ```python # Even code blocks work print("Hello from details") ``` \`\`\` ### Ruby Annotations ```html ๆผขๅญ—ใ‹ใ‚“ใ˜ WWWWorld Wide Web ``` ### Progress Bars ```html 70% 6 out of 10 ``` --- ## 21\. Extended Link Features ### Link Attributes ```markdown [External Link](https://example.com){:target="_blank" rel="noopener"} [Download](file.pdf){:download="filename.pdf"} ``` ### Anchor Links with IDs ```markdown {#custom-anchor} ### Heading with Custom ID Jump to [custom anchor](#custom-anchor) ``` ### Protocol Links ```markdown [Email](mailto:user@example.com?subject=Hello) [Phone](tel:+1234567890) [SMS](sms:+1234567890?body=Hello) [FTP](ftp://files.example.com) ``` --- ## 22\. Typography Extensions ### Small Caps ```html Small Caps Text ``` ```markdown %{Small Caps}% (some flavors) ``` ### Fractions ```markdown 1/2 1/3 2/3 1/4 3/4 1/8 3/8 5/8 7/8 ``` ### Ordinals ```markdown 1st 2nd 3rd 4th 21st 42nd ``` ### Smart Punctuation ```markdown "Curly quotes" and 'apostrophes'... โ€” Em dash and โ€“ en dash (C) (R) (TM) (P) +- ``` --- ## 23\. Metadata & Processing Instructions ### Processing Instructions ```markdown {frontmatter} toc: true numbered: true lang: en {/frontmatter} {mainmatter} {backmatter} ``` ### Parser Directives ```markdown ~~~~~~~~~~~~~~~~~~~~~{.python .numberLines startFrom="100"} def process(): return "Code with attributes" ``` ``` ### Raw LaTeX ```latex \newpage \tableofcontents \listoffigures \listoftables ``` --- ## 24. List Extensions ### Alphabetical Lists ```markdown a. First item b. Second item c. Third item A. Upper case B. Continues C. Through alphabet ``` ### Definition Lists (Extended) ```markdown Apple : A fruit : A company - Makes phones - Makes computers : A symbolic object Orange Citrus : Multiple terms, one definition ``` ### Interrupted Lists ```markdown 1. First item 1. New list starts 1. First item {:.continue} 2. Continues previous list ``` --- ## 25. Special Blocks & Environments ### Theorem Environment ```markdown ::: theorem Let $f$ be a continuous function on $[a,b]$. Then $f$ attains its maximum and minimum values. ::: ::: proof By the extreme value theorem... ::: ::: lemma Supporting result here. ::: ::: corollary Following from the theorem... ::: ``` ### Exercise Blocks ```markdown ::: exercise Prove that $\sqrt{2}$ is irrational. ::: ::: solution Assume $\sqrt{2} = p/q$ where $p,q$ are integers... ::: ``` --- ## 26. Accessibility Features ### Image Descriptions ```markdown ![Alt text](image.jpg "Title"){longdesc="Extended description for screen readers"} ``` ### Abbreviation Definitions ```markdown The HTML specification is maintained by W3C. *[HTML]: HyperText Markup Language *[W3C]: World Wide Web Consortium ``` ### Language Marking ```html This is English text. Esto es espaรฑol. ใ“ใ‚Œใฏๆ—ฅๆœฌ่ชžใงใ™ใ€‚ ``` --- ## 27. Version Control Integration ### Diff Syntax ~~~markdown ```diff @@ -1,3 +1,3 @@ Line 1 -Line 2 (removed) +Line 2 (added) Line 3 ``` ``` ### Merge Conflicts ``` <<<<<<< HEAD Current change ======= Incoming change >>>>>>> branch-name ``` ### Blame Annotations ``` e83c516 (John 2024-01-01) Initial commit a4f9b32 (Jane 2024-01-02) Fix typo ``` --- ## 28\. Additional Special Characters ### Box Drawing ``` โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ Cell 1 โ”‚ Cell 2 โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ Cell 3 โ”‚ Cell 4 โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ ``` ### Arrows & Symbols ``` โ† โ†’ โ†‘ โ†“ โ†” โ†• โ‡ โ‡’ โ‡‘ โ‡“ โ‡” โ‡• โœ“ โœ— โœ” โœ– โœš โ˜… โ˜† โ™  โ™ฃ โ™ฅ โ™ฆ โ‘  โ‘ก โ‘ข โ‘ฃ โ‘ค โ‘ฅ โ‘ฆ โ‘ง โ‘จ โ‘ฉ ``` ### Math Symbols ``` โˆ€ โˆƒ โˆ… โˆ‡ โˆˆ โˆ‰ โˆ‹ โˆ โˆ‘ โˆž โŠ‚ โŠƒ โŠ† โŠ‡ โˆช โˆฉ โˆง โˆจ ยฌ โŠ• ``` --- ## Summary: Feature Support by Flavor | Feature | Original | CommonMark | GFM | MMD | Pandoc | Kramdown | | ---------------- | -------- | ---------- | --- | --- | ------ | -------- | | Headings | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | | Emphasis | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | | Lists | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | | Links | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | | Images | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | | Code blocks | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | โœ“ | | Tables | โ€“ | โ€“ | โœ“ | โœ“ | โœ“ | โœ“ | | Task lists | โ€“ | โ€“ | โœ“ | โ€“ | โœ“ | โ€“ | | Strikethrough | โ€“ | โ€“ | โœ“ | โœ“ | โœ“ | โœ“ | | Footnotes | โ€“ | โ€“ | โ€“ | โœ“ | โœ“ | โœ“ | | Math | โ€“ | โ€“ | โ€“ | โœ“ | โœ“ | โœ“ | | Definition lists | โ€“ | โ€“ | โ€“ | โœ“ | โœ“ | โœ“ | | Abbreviations | โ€“ | โ€“ | โ€“ | โœ“ | โœ“ | โœ“ | | Attributes | โ€“ | โ€“ | โ€“ | โœ“ | โœ“ | โœ“ | | Div blocks | โ€“ | โ€“ | โ€“ | โ€“ | โœ“ | โ€“ | | Span elements | โ€“ | โ€“ | โ€“ | โ€“ | โœ“ | โ€“ | | Superscript | โ€“ | โ€“ | โ€“ | โœ“ | โœ“ | โ€“ | | Subscript | โ€“ | โ€“ | โ€“ | โœ“ | โœ“ | โ€“ | --- ## Quick Reference Card | Category | Syntax | Result | | | | ------------------- | ---------------------------- | -------------------------------------------- | | ----- | | **Headings** | \# H1 \## H2 \### H3 | Heading levels 1-6 | | | | **Bold** | \*\*text\*\* or \_\_text\_\_ | **text** | | | | **Italic** | \*text\* or \_text\_ | *text* | | | | **Bold + Italic** | \*\*\*text\*\*\* | **text** | | | | **Strikethrough** | \~\~text\~\~ | ~~text~~ | | | | **Inline code** | \`code\` | code | | | | **Link** | \[text\](url) | [text](https://example.com/?ref=starikov.co) | | | | **Image** | !\[alt\](url) | Embedded image | | | | **Blockquote** | \> quote | Indented quote | | | | **Unordered list** | \- item or \* item | Bullet list | | | | **Ordered list** | 1\. item | Numbered list | | | | **Task list** | \- \[ \] / \- \[x\] | Checkbox | | | | **Horizontal rule** | \--- or \*\*\* | Divider line | | | | **Code block** | \`\`\` or indent 4 spaces | Code block | | | | **Table** | \| col | col | | Table | | **Footnote** | \[^1\] | Superscript reference | | | --- **The golden rule:** Headings, emphasis, lists, links, images, code blocks, and blockquotes work everywhere. Everything else depends on your processor.