[{"data":1,"prerenderedAt":861},["ShallowReactive",2],{"guide-markdown-extensions-explained":3},{"id":4,"title":5,"body":6,"date":716,"description":854,"extension":855,"meta":856,"navigation":225,"path":857,"readingTime":243,"seo":858,"stem":859,"__hash__":860},"guides\u002Fguides\u002Fmarkdown-extensions-explained.md","Markdown Extensions: GFM, MDX, and Beyond",{"type":7,"value":8,"toc":829},"minimark",[9,14,18,21,25,28,33,41,82,97,101,104,129,132,136,139,148,156,160,163,172,179,183,198,202,205,209,252,256,285,289,365,368,372,375,379,382,391,395,398,417,421,502,505,509,512,545,548,552,555,665,668,672,775,779,782,817,825],[10,11,13],"h2",{"id":12},"beyond-standard-markdown","Beyond Standard Markdown",[15,16,17],"p",{},"Original Markdown, defined by John Gruber in 2004, covers basics: headings, emphasis, links, images, and lists. But modern writing demands more — tables, task lists, math equations, interactive components.",[15,19,20],{},"That is where extensions come in. They extend the base syntax while preserving Markdown's core philosophy: readable in raw form, powerful when rendered.",[10,22,24],{"id":23},"github-flavored-markdown-gfm","GitHub Flavored Markdown (GFM)",[15,26,27],{},"GFM is the most widely used Markdown extension. GitHub developed it to address gaps in the original spec, and most modern parsers support it by default.",[29,30,32],"h3",{"id":31},"tables","Tables",[15,34,35,36,40],{},"GFM adds table syntax that renders HTML ",[37,38,39],"code",{},"\u003Ctable>"," elements:",[42,43,48],"pre",{"className":44,"code":45,"language":46,"meta":47,"style":47},"language-markdown shiki shiki-themes github-light github-dark","| Feature    | GFM | Standard |\n|------------|:---:|:--------:|\n| Tables     | Yes | No       |\n| Task lists | Yes | No       |\n| Strikethrough | Yes | No    |\n","markdown","",[37,49,50,58,64,70,76],{"__ignoreMap":47},[51,52,55],"span",{"class":53,"line":54},"line",1,[51,56,57],{},"| Feature    | GFM | Standard |\n",[51,59,61],{"class":53,"line":60},2,[51,62,63],{},"|------------|:---:|:--------:|\n",[51,65,67],{"class":53,"line":66},3,[51,68,69],{},"| Tables     | Yes | No       |\n",[51,71,73],{"class":53,"line":72},4,[51,74,75],{},"| Task lists | Yes | No       |\n",[51,77,79],{"class":53,"line":78},5,[51,80,81],{},"| Strikethrough | Yes | No    |\n",[15,83,84,85,88,89,92,93,96],{},"Alignment colons work exactly as in standard table syntax: ",[37,86,87],{},":---"," for left, ",[37,90,91],{},":---:"," for center, ",[37,94,95],{},"---:"," for right.",[29,98,100],{"id":99},"task-lists","Task Lists",[15,102,103],{},"Checkboxes turn lists into interactive to-do items on GitHub:",[42,105,107],{"className":44,"code":106,"language":46,"meta":47,"style":47},"- [x] Set up project structure\n- [x] Write documentation\n- [ ] Deploy to production\n- [ ] Monitor performance\n",[37,108,109,114,119,124],{"__ignoreMap":47},[51,110,111],{"class":53,"line":54},[51,112,113],{},"- [x] Set up project structure\n",[51,115,116],{"class":53,"line":60},[51,117,118],{},"- [x] Write documentation\n",[51,120,121],{"class":53,"line":66},[51,122,123],{},"- [ ] Deploy to production\n",[51,125,126],{"class":53,"line":72},[51,127,128],{},"- [ ] Monitor performance\n",[15,130,131],{},"On GitHub, these render as clickable checkboxes. In static sites, they typically render as checked or unchecked icons.",[29,133,135],{"id":134},"strikethrough","Strikethrough",[15,137,138],{},"Use double tildes for deleted text:",[42,140,142],{"className":44,"code":141,"language":46,"meta":47,"style":47},"This is ~~outdated~~ current information.\n",[37,143,144],{"__ignoreMap":47},[51,145,146],{"class":53,"line":54},[51,147,141],{},[15,149,150,151,155],{},"Renders as: This is ",[152,153,154],"del",{},"outdated"," current information.",[29,157,159],{"id":158},"autolinks","Autolinks",[15,161,162],{},"GFM automatically converts URLs into clickable links without angle brackets:",[42,164,166],{"className":44,"code":165,"language":46,"meta":47,"style":47},"Visit https:\u002F\u002Fgithub.com for more details.\n",[37,167,168],{"__ignoreMap":47},[51,169,170],{"class":53,"line":54},[51,171,165],{},[15,173,174,175,178],{},"Standard Markdown requires ",[37,176,177],{},"\u003Chttps:\u002F\u002Fgithub.com>"," for autolinking. GFM removes that necessity.",[29,180,182],{"id":181},"disallowed-raw-html","Disallowed Raw HTML",[15,184,185,186,189,190,193,194,197],{},"GFM sanitizes certain HTML tags for security. Tags like ",[37,187,188],{},"\u003Cscript>",", ",[37,191,192],{},"\u003Ctitle>",", and ",[37,195,196],{},"\u003Cstyle>"," are stripped from output. This prevents XSS attacks in user-generated content.",[10,199,201],{"id":200},"mdx-jsx-in-markdown","MDX: JSX in Markdown",[15,203,204],{},"MDX lets you write JSX components directly inside Markdown. It bridges the gap between prose content and interactive UI elements.",[29,206,208],{"id":207},"basic-usage","Basic Usage",[42,210,214],{"className":211,"code":212,"language":213,"meta":47,"style":47},"language-mdx shiki shiki-themes github-light github-dark","import Chart from '.\u002Fcomponents\u002FChart'\n\n# Quarterly Report\n\nRevenue grew 23% year-over-year.\n\n\u003CChart data={quarterlyData} \u002F>\n","mdx",[37,215,216,221,227,232,236,241,246],{"__ignoreMap":47},[51,217,218],{"class":53,"line":54},[51,219,220],{},"import Chart from '.\u002Fcomponents\u002FChart'\n",[51,222,223],{"class":53,"line":60},[51,224,226],{"emptyLinePlaceholder":225},true,"\n",[51,228,229],{"class":53,"line":66},[51,230,231],{},"# Quarterly Report\n",[51,233,234],{"class":53,"line":72},[51,235,226],{"emptyLinePlaceholder":225},[51,237,238],{"class":53,"line":78},[51,239,240],{},"Revenue grew 23% year-over-year.\n",[51,242,244],{"class":53,"line":243},6,[51,245,226],{"emptyLinePlaceholder":225},[51,247,249],{"class":53,"line":248},7,[51,250,251],{},"\u003CChart data={quarterlyData} \u002F>\n",[29,253,255],{"id":254},"why-mdx-matters","Why MDX Matters",[257,258,259,267,273,279],"ul",{},[260,261,262,266],"li",{},[263,264,265],"strong",{},"Interactive content:"," Embed charts, calculators, and dynamic widgets inside documentation",[260,268,269,272],{},[263,270,271],{},"Component reuse:"," Use your React\u002FVue component library within Markdown files",[260,274,275,278],{},[263,276,277],{},"Type safety:"," MDX files work with TypeScript for props and imports",[260,280,281,284],{},[263,282,283],{},"Ecosystem:"," Works with Next.js, Nuxt, Astro, and most modern frameworks",[29,286,288],{"id":287},"mdx-vs-standard-markdown","MDX vs Standard Markdown",[290,291,292,308],"table",{},[293,294,295],"thead",{},[296,297,298,302,305],"tr",{},[299,300,301],"th",{},"Feature",[299,303,304],{},"Markdown",[299,306,307],{},"MDX",[309,310,311,322,333,343,354],"tbody",{},[296,312,313,317,320],{},[314,315,316],"td",{},"Prose formatting",[314,318,319],{},"Yes",[314,321,319],{},[296,323,324,327,330],{},[314,325,326],{},"HTML passthrough",[314,328,329],{},"Limited",[314,331,332],{},"Full JSX",[296,334,335,338,341],{},[314,336,337],{},"Components",[314,339,340],{},"No",[314,342,319],{},[296,344,345,348,351],{},[314,346,347],{},"Build step",[314,349,350],{},"Optional",[314,352,353],{},"Required",[296,355,356,359,362],{},[314,357,358],{},"Learning curve",[314,360,361],{},"Low",[314,363,364],{},"Medium",[15,366,367],{},"Use MDX when your docs need interactive elements. Stick with standard Markdown for simple articles and READMEs.",[10,369,371],{"id":370},"math-and-katex","Math and KaTeX",[15,373,374],{},"Math rendering turns LaTeX notation into beautifully typeset equations. KaTeX and MathJax are the two leading renderers.",[29,376,378],{"id":377},"inline-math","Inline Math",[15,380,381],{},"Wrap expressions in single dollar signs:",[42,383,385],{"className":44,"code":384,"language":46,"meta":47,"style":47},"The formula $E = mc^2$ changed physics forever.\n",[37,386,387],{"__ignoreMap":47},[51,388,389],{"class":53,"line":54},[51,390,384],{},[29,392,394],{"id":393},"block-math","Block Math",[15,396,397],{},"Use double dollar signs for display equations:",[42,399,401],{"className":44,"code":400,"language":46,"meta":47,"style":47},"$$\n\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}\n$$\n",[37,402,403,408,413],{"__ignoreMap":47},[51,404,405],{"class":53,"line":54},[51,406,407],{},"$$\n",[51,409,410],{"class":53,"line":60},[51,411,412],{},"\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}\n",[51,414,415],{"class":53,"line":66},[51,416,407],{},[29,418,420],{"id":419},"common-math-examples","Common Math Examples",[290,422,423,436],{},[293,424,425],{},[296,426,427,430,433],{},[299,428,429],{},"Notation",[299,431,432],{},"Renders As",[299,434,435],{},"Use For",[309,437,438,451,463,476,489],{},[296,439,440,445,448],{},[314,441,442],{},[37,443,444],{},"$x^2$",[314,446,447],{},"x²",[314,449,450],{},"Exponents",[296,452,453,458,461],{},[314,454,455],{},[37,456,457],{},"$\\frac{a}{b}$",[314,459,460],{},"a\u002Fb Fractions",[314,462],{},[296,464,465,470,473],{},[314,466,467],{},[37,468,469],{},"$\\sqrt{n}$",[314,471,472],{},"√n",[314,474,475],{},"Square roots",[296,477,478,483,486],{},[314,479,480],{},[37,481,482],{},"$\\sum_{i=1}^{n}$",[314,484,485],{},"Σ",[314,487,488],{},"Summations",[296,490,491,496,499],{},[314,492,493],{},[37,494,495],{},"$\\alpha, \\beta, \\gamma$",[314,497,498],{},"α, β, γ",[314,500,501],{},"Greek letters",[15,503,504],{},"Math support is not part of core Markdown. It requires a plugin — check your platform's documentation for setup.",[10,506,508],{"id":507},"footnotes","Footnotes",[15,510,511],{},"Footnotes let you add references without cluttering the main text:",[42,513,515],{"className":44,"code":514,"language":46,"meta":47,"style":47},"This claim needs a source.[^1]\n\nDITA and AsciiDoc offer alternatives.[^note]\n\n[^1]: Smith, J. \"Markdown Extensions,\" 2025.\n[^note]: See the DITA OASIS standard for comparison.\n",[37,516,517,522,526,531,535,540],{"__ignoreMap":47},[51,518,519],{"class":53,"line":54},[51,520,521],{},"This claim needs a source.[^1]\n",[51,523,524],{"class":53,"line":60},[51,525,226],{"emptyLinePlaceholder":225},[51,527,528],{"class":53,"line":66},[51,529,530],{},"DITA and AsciiDoc offer alternatives.[^note]\n",[51,532,533],{"class":53,"line":72},[51,534,226],{"emptyLinePlaceholder":225},[51,536,537],{"class":53,"line":78},[51,538,539],{},"[^1]: Smith, J. \"Markdown Extensions,\" 2025.\n",[51,541,542],{"class":53,"line":243},[51,543,544],{},"[^note]: See the DITA OASIS standard for comparison.\n",[15,546,547],{},"Footnotes render as superscript numbers in the text body and as a numbered list at the bottom of the document.",[10,549,551],{"id":550},"frontmatter","Frontmatter",[15,553,554],{},"Frontmatter adds metadata to Markdown files using YAML between triple-dashed lines:",[42,556,560],{"className":557,"code":558,"language":559,"meta":47,"style":47},"language-yaml shiki shiki-themes github-light github-dark","---\ntitle: \"Getting Started with Markdown\"\ndate: 2026-05-27\nauthor: \"Jane Doe\"\ntags:\n  - markdown\n  - documentation\ndraft: false\n---\n\n# Getting Started with Markdown\n\nContent starts here...\n","yaml",[37,561,562,568,582,593,603,611,619,626,637,642,647,654,659],{"__ignoreMap":47},[51,563,564],{"class":53,"line":54},[51,565,567],{"class":566},"sScJk","---\n",[51,569,570,574,578],{"class":53,"line":60},[51,571,573],{"class":572},"s9eBZ","title",[51,575,577],{"class":576},"sVt8B",": ",[51,579,581],{"class":580},"sZZnC","\"Getting Started with Markdown\"\n",[51,583,584,587,589],{"class":53,"line":66},[51,585,586],{"class":572},"date",[51,588,577],{"class":576},[51,590,592],{"class":591},"sj4cs","2026-05-27\n",[51,594,595,598,600],{"class":53,"line":72},[51,596,597],{"class":572},"author",[51,599,577],{"class":576},[51,601,602],{"class":580},"\"Jane Doe\"\n",[51,604,605,608],{"class":53,"line":78},[51,606,607],{"class":572},"tags",[51,609,610],{"class":576},":\n",[51,612,613,616],{"class":53,"line":243},[51,614,615],{"class":576},"  - ",[51,617,618],{"class":580},"markdown\n",[51,620,621,623],{"class":53,"line":248},[51,622,615],{"class":576},[51,624,625],{"class":580},"documentation\n",[51,627,629,632,634],{"class":53,"line":628},8,[51,630,631],{"class":572},"draft",[51,633,577],{"class":576},[51,635,636],{"class":591},"false\n",[51,638,640],{"class":53,"line":639},9,[51,641,567],{"class":566},[51,643,645],{"class":53,"line":644},10,[51,646,226],{"emptyLinePlaceholder":225},[51,648,650],{"class":53,"line":649},11,[51,651,653],{"class":652},"sJ8bj","# Getting Started with Markdown\n",[51,655,657],{"class":53,"line":656},12,[51,658,226],{"emptyLinePlaceholder":225},[51,660,662],{"class":53,"line":661},13,[51,663,664],{"class":580},"Content starts here...\n",[15,666,667],{},"Static site generators like Nuxt Content, Hugo, and Jekyll read frontmatter to populate page titles, dates, categories, and templates. It is the standard way to separate content from configuration.",[29,669,671],{"id":670},"common-frontmatter-fields","Common Frontmatter Fields",[290,673,674,687],{},[293,675,676],{},[296,677,678,681,684],{},[299,679,680],{},"Field",[299,682,683],{},"Purpose",[299,685,686],{},"Example",[309,688,689,703,717,731,745,760],{},[296,690,691,695,698],{},[314,692,693],{},[37,694,573],{},[314,696,697],{},"Page title",[314,699,700],{},[37,701,702],{},"\"My Article\"",[296,704,705,709,712],{},[314,706,707],{},[37,708,586],{},[314,710,711],{},"Publication date",[314,713,714],{},[37,715,716],{},"2026-05-27",[296,718,719,723,726],{},[314,720,721],{},[37,722,607],{},[314,724,725],{},"Content categories",[314,727,728],{},[37,729,730],{},"[markdown, docs]",[296,732,733,737,740],{},[314,734,735],{},[37,736,631],{},[314,738,739],{},"Hide from production",[314,741,742],{},[37,743,744],{},"true",[296,746,747,752,755],{},[314,748,749],{},[37,750,751],{},"layout",[314,753,754],{},"Template override",[314,756,757],{},[37,758,759],{},"\"custom\"",[296,761,762,767,770],{},[314,763,764],{},[37,765,766],{},"description",[314,768,769],{},"Meta description",[314,771,772],{},[37,773,774],{},"\"A guide to...\"",[10,776,778],{"id":777},"diagram-support","Diagram Support",[15,780,781],{},"Some platforms support Mermaid diagrams inside fenced code blocks:",[42,783,785],{"className":44,"code":784,"language":46,"meta":47,"style":47},"```mermaid\ngraph LR\n    A[Start] --> B{Decision}\n    B -->|Yes| C[Action]\n    B -->|No| D[End]\n    C --> D\n",[37,786,787,792,797,802,807,812],{"__ignoreMap":47},[51,788,789],{"class":53,"line":54},[51,790,791],{},"```mermaid\n",[51,793,794],{"class":53,"line":60},[51,795,796],{},"graph LR\n",[51,798,799],{"class":53,"line":66},[51,800,801],{},"    A[Start] --> B{Decision}\n",[51,803,804],{"class":53,"line":72},[51,805,806],{},"    B -->|Yes| C[Action]\n",[51,808,809],{"class":53,"line":78},[51,810,811],{},"    B -->|No| D[End]\n",[51,813,814],{"class":53,"line":243},[51,815,816],{},"    C --> D\n",[42,818,823],{"className":819,"code":821,"language":822},[820],"language-text","\nMermaid renders flowcharts, sequence diagrams, class diagrams, Gantt charts, and more — all from text-based definitions. GitHub supports Mermaid natively in READMEs and issues.\n\n## Other Notable Extensions\n\n- **Admonitions:** Callout blocks for warnings, tips, and notes (supported by Docusaurus, Material for MkDocs)\n- **Attributes:** Add CSS classes and IDs to elements (`{: .highlight}`)\n- **Definition lists:** Term\u002Fdefinition pairs (PHP Markdown Extra, kramdown)\n- **Abbreviations:** Hover-text definitions (`*[HTML]: HyperText Markup Language`)\n- **Subscript and superscript:** `H~2~O` for H₂O, `X^2^` for X² (some parsers)\n\n## Compatibility Checklist\n\nBefore adopting an extension, ask:\n\n1. **Do your target platforms support it?** GFM works almost everywhere. MDX and Mermaid require build tools.\n2. **Will the raw text remain readable?** If the source looks like code, you lose Markdown's core advantage.\n3. **Is the extension actively maintained?** Avoid abandoned plugins that may break with updates.\n4. **Does it degrade gracefully?** If a parser ignores the extension, the content should still make sense.\n\n## Related Guides\n\n- [Markdown Syntax Guide](\u002Fguides\u002Fmarkdown-syntax-guide)\n- [Markdown Best Practices](\u002Fguides\u002Fmarkdown-best-practices)\n- [CSS Color Functions](\u002Fguides\u002Fcss-color-functions)\n\n## Try It Yourself\n\nExperiment with these extensions using our free [Markdown to HTML Converter](\u002Ftools\u002Fmarkdown-to-html). Write GFM tables, code blocks, and more — then see the rendered HTML output in real time.\n","text",[37,824,821],{"__ignoreMap":47},[826,827,828],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":47,"searchDepth":60,"depth":60,"links":830},[831,832,839,844,849,850,853],{"id":12,"depth":60,"text":13},{"id":23,"depth":60,"text":24,"children":833},[834,835,836,837,838],{"id":31,"depth":66,"text":32},{"id":99,"depth":66,"text":100},{"id":134,"depth":66,"text":135},{"id":158,"depth":66,"text":159},{"id":181,"depth":66,"text":182},{"id":200,"depth":60,"text":201,"children":840},[841,842,843],{"id":207,"depth":66,"text":208},{"id":254,"depth":66,"text":255},{"id":287,"depth":66,"text":288},{"id":370,"depth":60,"text":371,"children":845},[846,847,848],{"id":377,"depth":66,"text":378},{"id":393,"depth":66,"text":394},{"id":419,"depth":66,"text":420},{"id":507,"depth":60,"text":508},{"id":550,"depth":60,"text":551,"children":851},[852],{"id":670,"depth":66,"text":671},{"id":777,"depth":60,"text":778},"Explore Markdown extensions beyond standard syntax. Learn GitHub Flavored Markdown, MDX, math notation, and other popular extensions.","md",{"immutable":225},"\u002Fguides\u002Fmarkdown-extensions-explained",{"title":5,"description":854},"guides\u002Fmarkdown-extensions-explained","y-pZEkJ_aPPzw0G2EyiOFMC5yA_zoaa6XQCtcuL0H2o",1780401325186]