[{"data":1,"prerenderedAt":42},["ShallowReactive",2],{"i-lucide:grip":3,"i-lucide:chevron-right":8,"i-lucide:moon":10,"i-lucide:sun":12,"i-lucide:languages":14,"i-lucide:chevron-down":16,"i-lucide:shield-check":18,"i-lucide:mail":20,"blog-body-markdown-advanced-syntax-en":22,"i-lucide:lightbulb":23,"i-lucide:graduation-cap":25,"i-lucide:code":27,"i-lucide:pen-tool":29,"i-lucide:pen-line":31,"i-lucide:square-sigma":33,"i-lucide:git-branch":35,"i-lucide:file-code-2":37,"i-lucide:star":40},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"12\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"12\" cy=\"19\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"19\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"19\" r=\"1\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m9 18l6-6l-6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"4\"\u002F>\u003Cpath d=\"M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m5 8l6 6m-7 0l6-6l2-3M2 5h12M7 2h1m14 20l-5-10l-5 10m2-4h6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":17},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m6 9l6 6l6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":19},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"\u002F>\u003Cpath d=\"m9 12l2 2l4-4\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":21},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7\"\u002F>\u003Crect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"\u002F>\u003C\u002Fg>","\u003Cblockquote>\n\u003Cp>After headings, lists, and tables, Markdown still has \u003Cstrong>advanced extensions\u003C\u002Fstrong> that make docs feel professional: LaTeX math, Mermaid diagrams from text, \u003Ccode><details>\u003C\u002Fcode> for collapse, and sub\u002Fsuperscripts for chemistry and powers. These are \u003Cstrong>renderer-dependent\u003C\u002Fstrong>—check the target platform first. Each section below pairs source with a real render screenshot and a copy-paste practice sample.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fmarkdown-advanced-syntax\u002Fcover.webp\" alt=\"Advanced Markdown: math, diagrams, collapse, sub\u002Fsuperscript\">\u003C\u002Fp>\n\u003Ch2>What Counts as “Advanced,” and Who Needs It?\u003C\u002Fh2>\n\u003Cp>Advanced syntax means extensions beyond core Markdown—math, diagrams, sub\u002Fsuperscripts, collapsible blocks, footnotes, highlight, and similar. They were \u003Cstrong>added by renderers later\u003C\u002Fstrong>, so support is uneven: the same source can look polished on one site and raw on another.\u003C\u002Fp>\n\u003Cp>Typical audiences: researchers and students need math; engineers and PMs need flowcharts and sequence diagrams; long-doc authors need collapse. For a short blog post or weekly update you may never need them—that is why this guide is separate. \u003Cstrong>Rule one: confirm your platform renders the feature\u003C\u002Fstrong>, or readers only see symbols. The demos below come from this site’s online editor preview; paste them there to experiment.\u003C\u002Fp>\n\u003Ch2>How Do You Write Math (LaTeX)?\u003C\u002Fh2>\n\u003Cp>Use LaTeX: \u003Cstrong>inline\u003C\u002Fstrong> math in \u003Ccode>$...$\u003C\u002Fcode>, \u003Cstrong>display\u003C\u002Fstrong> math (centered block) in \u003Ccode>$$...$$\u003C\u002Fcode>. The renderer must load KaTeX or MathJax; otherwise you see the raw dollars.\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark mac-code-block\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003Cspan class=\"mac-lang-badge\">markdown\u003C\u002Fspan>\u003Ccode class=\"language-markdown\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">The mass–energy equation $E = mc^2$ is inline math.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">Display math:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">$$\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">$$\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fmarkdown-advanced-syntax\u002Fmath.en.webp\" alt=\"Rendered LaTeX math\">\u003C\u002Fp>\n\u003Cp>Common tokens: \u003Ccode>^\u003C\u002Fcode> superscript (\u003Ccode>x^2\u003C\u002Fcode>), \u003Ccode>_\u003C\u002Fcode> subscript (\u003Ccode>a_1\u003C\u002Fcode>), \u003Ccode>\\frac{}{}\u003C\u002Fcode> fraction, \u003Ccode>\\sqrt{}\u003C\u002Fcode> root, \u003Ccode>\\pm\u003C\u002Fcode>, \u003Ccode>\\sum\u003C\u002Fcode>. Faster than Word’s equation editor for papers and STEM notes. If you forget commands, the \u003Ca href=\"\u002Fmarkdown\u002Flatex\u002F\">LaTeX formula editor\u003C\u002Fa> offers a symbol palette.\u003C\u002Fp>\n\u003Ch2>How Do You Draw Flowcharts and Sequence Diagrams (Mermaid)?\u003C\u002Fh2>\n\u003Cp>Mermaid turns a fenced \u003Ccode>mermaid\u003C\u002Fcode> block into diagrams—flowcharts, sequence diagrams, Gantt charts, and more. Nodes and arrows stay \u003Cstrong>versionable text\u003C\u002Fstrong>; change a line instead of redrawing.\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark mac-code-block\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003Cspan class=\"mac-lang-badge\">markdown\u003C\u002Fspan>\u003Ccode class=\"language-markdown\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">```mermaid\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">flowchart LR\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">  A([Start]) --> B{Decision}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">  B -- Yes --> C[Do A]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">  B -- No --> D[Do B]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">  C --> E([End])\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">  D --> E\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">```\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fmarkdown-advanced-syntax\u002Fmermaid.en.webp\" alt=\"Rendered Mermaid flowchart\">\u003C\u002Fp>\n\u003Cp>\u003Ccode>flowchart LR\u003C\u002Fcode> is left-to-right (\u003Ccode>TD\u003C\u002Fcode> is top-down); \u003Ccode>[]\u003C\u002Fcode> rectangle, \u003Ccode>{}\u003C\u002Fcode> diamond, \u003Ccode>([])\u003C\u002Fcode> stadium. Platforms like WeChat or Xiaohongshu often do not render Mermaid source—render in \u003Ca href=\"\u002Fmarkdown\u002Fmermaid\u002F\">Mermaid online\u003C\u002Fa>, export PNG, then embed the image.\u003C\u002Fp>\n\u003Ch2>How Do Collapsible Sections Work (\u003Ccode>details\u003C\u002Fcode>)?\u003C\u002Fh2>\n\u003Cp>Use HTML \u003Ccode><details>\u003C\u002Fcode> with a \u003Ccode><summary>\u003C\u002Fcode> label; click to expand. Markdown allows raw HTML, so you can drop this in as-is. Add the \u003Ccode>open\u003C\u002Fcode> attribute to expand by default.\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark mac-code-block\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003Cspan class=\"mac-lang-badge\">markdown\u003C\u002Fspan>\u003Ccode class=\"language-markdown\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#85E89D\">details\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\"> open\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#85E89D\">summary\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">>Click to expand the full error log<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#85E89D\">summary\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">Collapsed content—long logs, code, or optional notes.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#85E89D\">details\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fmarkdown-advanced-syntax\u002Fdetails.en.webp\" alt=\"Rendered details block\">\u003C\u002Fp>\n\u003Cp>Use collapse for non-essential length: full logs, appendices, spoilers, optional steps. Leave a blank line after \u003Ccode><summary>\u003C\u002Fcode> so inner Markdown still parses. GitHub and most editors support it; some rich-text platforms strip the tags.\u003C\u002Fp>\n\u003Ch2>Subscripts, Superscripts—and an Extension Pitfall\u003C\u002Fh2>\n\u003Cp>Superscript: \u003Ccode>^text^\u003C\u002Fcode> (e.g. \u003Ccode>m^2^\u003C\u002Fcode>). Subscript: \u003Ccode>~text~\u003C\u002Fcode> (e.g. \u003Ccode>H~2~O\u003C\u002Fcode>). Highlight is often \u003Ccode>==text==\u003C\u002Fcode>, but \u003Cstrong>not every renderer supports it\u003C\u002Fstrong>—the screenshot below shows that gap.\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark mac-code-block\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003Cspan class=\"mac-lang-badge\">markdown\u003C\u002Fspan>\u003Ccode class=\"language-markdown\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">Water is H~2~O; area is measured in m^2^.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">This line has ==text that should be highlighted==.\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fmarkdown-advanced-syntax\u002Fsupsub.en.webp\" alt=\"Sub\u002Fsuperscript rendered; highlight left as raw ==\">\u003C\u002Fp>\n\u003Cp>In the capture, \u003Ccode>H~2~O\u003C\u002Fcode> and \u003Ccode>m^2^\u003C\u002Fcode> render correctly, but \u003Ccode>==...==\u003C\u002Fcode> stays literal because highlight is off. Classic advanced-Markdown lesson: \u003Cstrong>same source, different renderer\u003C\u002Fstrong>. Fallbacks: LaTeX (\u003Ccode>H_2O\u003C\u002Fcode>, \u003Ccode>m^2\u003C\u002Fcode>) for sub\u002Fsuper; bold instead of highlight.\u003C\u002Fp>\n\u003Ch2>Can You Mix Raw HTML in Markdown?\u003C\u002Fh2>\n\u003Cp>Yes. Markdown allows \u003Cstrong>raw HTML\u003C\u002Fstrong> when markup cannot express a layout (color, centering, and so on). The \u003Ccode><details>\u003C\u002Fcode> pattern above is the same mechanism.\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark mac-code-block\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003Cspan class=\"mac-lang-badge\">markdown\u003C\u002Fspan>\u003Ccode class=\"language-markdown\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">A normal paragraph.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#85E89D\">p\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\"> style\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\">\"color: #e11d48; text-align: center;\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">>Centered red text via HTML.<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#85E89D\">p\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Two caveats: \u003Cstrong>safe renderers strip dangerous tags\u003C\u002Fstrong> (e.g. \u003Ccode><script>\u003C\u002Fcode>), and \u003Cstrong>HTML support varies\u003C\u002Fstrong>—local editors and GitHub are usually fine; WeChat and some static hosts strip styles. Prefer HTML when you control the pipeline; test before cross-platform publish.\u003C\u002Fp>\n\u003Ch2>Escaping: How Do You Show \u003Ccode>*\u003C\u002Fcode> or \u003Ccode>#\u003C\u002Fcode> Literally?\u003C\u002Fh2>\n\u003Cp>Prefix with a backslash \u003Ccode>\\\u003C\u002Fcode>. \u003Ccode>\\*\u003C\u002Fcode> shows a star instead of italic; the same for \u003Ccode>\\#\u003C\u002Fcode> and \u003Ccode>\\`\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark mac-code-block\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003Cspan class=\"mac-lang-badge\">markdown\u003C\u002Fspan>\u003Ccode class=\"language-markdown\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">I want a literal star: \u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#79B8FF\">\\*\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">not italic\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#79B8FF\">\\*\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">, a hash \u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#79B8FF\">\\#\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"> , and a backtick \u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#79B8FF\">\\`\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">.\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Useful for “five stars *****”, “price $100”, or teaching Markdown itself. Look it up when you need it—you do not need to memorize every escape.\u003C\u002Fp>\n\u003Ch2>Cheat Sheet and Compatibility\u003C\u002Fh2>\n\u003Cp>Rough compatibility (always depends on the platform):\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Feature\u003C\u002Fth>\n\u003Cth>Syntax\u003C\u002Fth>\n\u003Cth>Depends on\u003C\u002Fth>\n\u003Cth>Support\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>Inline math\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>$E=mc^2$\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>KaTeX\u002FMathJax\u003C\u002Ftd>\n\u003Ctd>Medium\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Display math\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>$$...$$\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>KaTeX\u002FMathJax\u003C\u002Ftd>\n\u003Ctd>Medium\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Flowchart\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>```mermaid\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Mermaid\u003C\u002Ftd>\n\u003Ctd>Medium–low\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Collapse\u003C\u002Ftd>\n\u003Ctd>\u003Ccode><details>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>HTML\u003C\u002Ftd>\n\u003Ctd>Medium–high\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Super\u002Fsub\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>^x^\u003C\u002Fcode> \u002F \u003Ccode>~x~\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Extension\u003C\u002Ftd>\n\u003Ctd>Medium\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Highlight\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>==text==\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Extension\u003C\u002Ftd>\n\u003Ctd>Low\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Footnote\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>[^1]\u003C\u002Fcode> + \u003Ccode>[^1]: note\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Extension\u003C\u002Ftd>\n\u003Ctd>Medium–low\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Escape\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>\\*\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Core\u003C\u002Ftd>\n\u003Ctd>High\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Ch2>When Not to Use These Features\u003C\u002Fh2>\n\u003Cp>Advanced syntax is the main source of \u003Cstrong>cross-platform breakage\u003C\u002Fstrong>. If you publish to WeChat, Xiaohongshu, or an unknown host, math, Mermaid, highlight, and footnotes may show as raw text or blanks. Safer path: \u003Cstrong>rasterize formulas and diagrams to images\u003C\u002Fstrong>, and use bold instead of highlight.\u003C\u002Fp>\n\u003Cp>Rule of thumb: \u003Cstrong>your own stack\u003C\u002Fstrong> (local notes, GitHub, a known blog engine)—use freely; \u003Cstrong>third-party platforms\u003C\u002Fstrong>—test or degrade to images. Paste samples into the \u003Ca href=\"\u002Fmarkdown\u002Fedit\u002F\">Markdown online editor\u003C\u002Fa> (math and Mermaid live preview, browser-local), then archive with \u003Ca href=\"\u002Fmarkdown\u002Fconvert\u002F\">Markdown convert\u003C\u002Fa> to PDF\u002FWord. More tools: \u003Ca href=\"\u002Fmarkdown\u002F\">Markdown toolbox\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch2>Wrap-Up\u003C\u002Fh2>\n\u003Cp>Core advanced toolkit: \u003Ccode>$...$\u003C\u002Fcode> \u002F \u003Ccode>$$...$$\u003C\u002Fcode>, \u003Ccode>```mermaid\u003C\u002Fcode>, \u003Ccode><details>\u003C\u002Fcode>, \u003Ccode>^x^\u003C\u002Fcode> \u002F \u003Ccode>~x~\u003C\u002Fcode>, raw HTML, and \u003Ccode>\\\u003C\u002Fcode>. They raise document quality but \u003Cstrong>depend on the renderer\u003C\u002Fstrong>—verify before you publish, or fall back to images. Walk through the samples in the \u003Ca href=\"\u002Fmarkdown\u002Fedit\u002F\">online editor\u003C\u002Fa>. If you still need the everyday ten patterns, start with the \u003Ca href=\"\u002Fblog\u002Fp\u002Fmarkdown-basic-syntax-tutorial\u002F\">basic Markdown syntax guide\u003C\u002Fa>.\u003C\u002Fp>\n",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":24},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 14c.2-1 .7-1.7 1.5-2.5c1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5c.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":26},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0zM22 10v6\"\u002F>\u003Cpath d=\"M6 12.5V16a6 3 0 0 0 12 0v-3.5\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":28},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m16 18l6-6l-6-6M8 6l-6 6l6 6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":30},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z\"\u002F>\u003Cpath d=\"m18 13l-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18M2.3 2.3l7.286 7.286\"\u002F>\u003Ccircle cx=\"11\" cy=\"11\" r=\"2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":32},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 21h8m.174-14.188a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":34},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\u002F>\u003Cpath d=\"M16 8.9V7H8l4 5l-4 5h8v-1.9\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":36},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M15 6a9 9 0 0 0-9 9V3\"\u002F>\u003Ccircle cx=\"18\" cy=\"6\" r=\"3\"\u002F>\u003Ccircle cx=\"6\" cy=\"18\" r=\"3\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":38,"hidden":39},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4\"\u002F>\u003Cpath d=\"M14 2v4a2 2 0 0 0 2 2h4M5 12l-3 3l3 3m4 0l3-3l-3-3\"\u002F>\u003C\u002Fg>",true,{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":41},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.12 2.12 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.12 2.12 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.12 2.12 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16z\"\u002F>",1786455162217]