Markdown Extensions Preview (2): Code, Math and Diagrams

This article focuses on code, mathematical formulas, footnotes, heading anchors and Mermaid diagrams commonly used in technical writing.

Code Blocks

Code blocks are rendered automatically as Apple-style windows. Fence meta can set a filename, source link, highlighted lines and diff lines.

const greeting = "Hello";
const name = "World";
console.log(`${greeting}, ${name}!`);

pnpm install
pnpm run dev
pnpm run build

-const oldName = "Sora";
+const newName = "SoraPaper";

Mathematical Formulas

Inline formulas use a single dollar sign, such as $E = mc^2$, and sit naturally on the same line as the surrounding text.

Block formulas use double dollar signs:

Footnotes

Footnotes are useful for supplementary notes, source references or further reading. Add a footnote reference in the body with ¹, and the note will be collected at the bottom of the article.

Heading Anchors

Second- through fourth-level headings automatically receive anchors. Hover over a heading, or focus the # beside it with the keyboard, to copy the current section link.

Anchor Subheading

This third-level heading helps check table-of-contents navigation, hover visibility and link-copy behavior.

Mermaid Diagrams

Mermaid diagrams use the :::mermaid directive. A title is optional; if JavaScript is disabled in the browser or diagram parsing fails, the source remains available as a fallback.

flowchart TD
  Markdown[Markdown article] --> Directive[remark-directive]
  Directive --> Mermaid[remark-mermaid]
  Mermaid --> Fallback[Source fallback]
  Fallback --> Loader[MermaidLoader]
  Loader --> Diagram[SVG diagram]

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop HealthCheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!