Advanced Markdown: Math, Diagrams, Collapsible Blocks, and More

After headings, lists, and tables, Markdown still has advanced extensions that make docs feel professional: LaTeX math, Mermaid diagrams from text, <details> for collapse, and sub/superscripts for chemistry and powers. These are renderer-dependent—check the target platform first. Each section below pairs source with a real render screenshot and a copy-paste practice sample.

Advanced syntax means extensions beyond core Markdown—math, diagrams, sub/superscripts, collapsible blocks, footnotes, highlight, and similar. They were added by renderers later, so support is uneven: the same source can look polished on one site and raw on another.

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. Rule one: confirm your platform renders the feature, or readers only see symbols. The demos below come from this site’s online editor preview; paste them there to experiment.

Use LaTeX: inline math in $...$, display math (centered block) in $$...$$. The renderer must load KaTeX or MathJax; otherwise you see the raw dollars.

markdownThe mass–energy equation $E = mc^2$ is inline math.

Display math:

$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

Common tokens: ^ superscript (x^2), _ subscript (a_1), \frac{}{} fraction, \sqrt{} root, \pm, \sum. Faster than Word’s equation editor for papers and STEM notes. If you forget commands, the LaTeX formula editor offers a symbol palette.

Mermaid turns a fenced mermaid block into diagrams—flowcharts, sequence diagrams, Gantt charts, and more. Nodes and arrows stay versionable text; change a line instead of redrawing.

markdown```mermaid
flowchart LR
  A([Start]) --> B{Decision}
  B -- Yes --> C[Do A]
  B -- No --> D[Do B]
  C --> E([End])
  D --> E
```

flowchart LR is left-to-right (TD is top-down); [] rectangle, {} diamond, ([]) stadium. Platforms like WeChat or Xiaohongshu often do not render Mermaid source—render in Mermaid online, export PNG, then embed the image.

Use HTML <details> with a <summary> label; click to expand. Markdown allows raw HTML, so you can drop this in as-is. Add the open attribute to expand by default.

markdown<details open>
<summary>Click to expand the full error log</summary>

Collapsed content—long logs, code, or optional notes.

</details>

Use collapse for non-essential length: full logs, appendices, spoilers, optional steps. Leave a blank line after <summary> so inner Markdown still parses. GitHub and most editors support it; some rich-text platforms strip the tags.

Superscript: ^text^ (e.g. m^2^). Subscript: ~text~ (e.g. H~2~O). Highlight is often ==text==, but not every renderer supports it—the screenshot below shows that gap.

markdownWater is H~2~O; area is measured in m^2^.

This line has ==text that should be highlighted==.

In the capture, H~2~O and m^2^ render correctly, but ==...== stays literal because highlight is off. Classic advanced-Markdown lesson: same source, different renderer. Fallbacks: LaTeX (H_2O, m^2) for sub/super; bold instead of highlight.

Yes. Markdown allows raw HTML when markup cannot express a layout (color, centering, and so on). The <details> pattern above is the same mechanism.

markdownA normal paragraph.

<p style="color: #e11d48; text-align: center;">Centered red text via HTML.</p>

Two caveats: safe renderers strip dangerous tags (e.g. <script>), and HTML support varies—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.

Prefix with a backslash \. \* shows a star instead of italic; the same for \# and \`.

markdownI want a literal star: \*not italic\*, a hash \# , and a backtick \`.

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.

Rough compatibility (always depends on the platform):

Advanced syntax is the main source of cross-platform breakage. If you publish to WeChat, Xiaohongshu, or an unknown host, math, Mermaid, highlight, and footnotes may show as raw text or blanks. Safer path: rasterize formulas and diagrams to images, and use bold instead of highlight.

Rule of thumb: your own stack (local notes, GitHub, a known blog engine)—use freely; third-party platforms—test or degrade to images. Paste samples into the Markdown online editor (math and Mermaid live preview, browser-local), then archive with Markdown convert to PDF/Word. More tools: Markdown toolbox.

Core advanced toolkit: $...$ / $$...$$, ```mermaid, <details>, ^x^ / ~x~, raw HTML, and \. They raise document quality but depend on the renderer—verify before you publish, or fall back to images. Walk through the samples in the online editor. If you still need the everyday ten patterns, start with the basic Markdown syntax guide.