空垠尘

Markdown Typography and Advanced Extensions

· 898 words · 5 min read
/ /
#Markdown #Typography #LaTeX #Mermaid #Technical Writing

Introduction: The Elegant Power of Plain Text

In 2004, John Gruber and Aaron Swartz invented Markdown with a clean design goal: “To enable people to write using an easy-to-read, easy-to-write plain text format, and optionally convert it to structurally valid XHTML or HTML.”

In modern software engineering and technical writing, Markdown has become the de facto universal standard. From GitHub README.md files and technical blog posts to internal system architecture documentation, developers love Markdown for its minimal cognitive load and seamless version-control friendliness.

However, in practice, there is a massive gap between simply “writing Markdown” and “crafting clean, consistent, and highly readable Markdown”. This article explores best practices across three core dimensions: Core Typography Guidelines, Spacing and Punctuation Aesthetics, and Advanced Extensions (LaTeX Math & Mermaid Diagrams).

1. Core Markdown Typography Guidelines

1.1 Semantic Heading Hierarchy

Headings serve as the single source of truth for document outlines and Table of Contents (TOC) generation:

  • H1 (#): Use only once per article (typically rendered automatically from the frontmatter title);
  • H2 (##): Represents top-level thematic sections;
  • H3 (###): Represents specific sub-modules within a section;
  • Never skip heading levels: Jumping directly from ## to #### breaks automated TOC hierarchies and screen readers.
1<!-- Correct: Strict step-by-step hierarchy -->
2## 1. Architecture Design Principles
3### 1.1 Single Responsibility
4### 1.2 Open-Closed
5
6<!-- Incorrect: Skipping levels breaks structure -->
7## 1. Architecture Design Principles
8#### 1.1 Single Responsibility (Skipped H3)

1.2 List Formatting & Indentation

Lists structure disparate points cleanly. Spacing and indentation are key to maintaining list consistency:

  • Unordered Lists: Stick to - globally across your articles; avoid mixing *, +, and -;
  • Nested Indentation: Indent child lists by 2 or 4 spaces relative to their parent (2 spaces recommended);
  • List Spacing: Keep simple list items compact without blank lines; use loose spacing only when items contain multiple paragraphs or code blocks.
1- **Core Middleware Layer**
2  - Authentication Guard (JWT / WebAuthn verification)
3  - Rate Limiting Middleware (Token Bucket algorithm)
4- **Persistence Layer**
5  - SQLite WAL Relational Database
6  - Global Read-only KV Cache

1.3 Code Blocks and Syntax Highlighting

Code blocks are central to technical documentation:

  1. Explicit Language Identifiers: Always declare language identifiers (e.g. go, typescript, rust, bash, json, sql) after the opening triple backticks. This triggers Chroma syntax highlighting, displays language badges, and powers one-click copy buttons;
  2. Inline vs. Block Code:
    • File paths (/etc/hosts), flags (--minify), and identifiers (userToken) belong in single backticks;
    • Multi-line snippets belong in standalone fenced code blocks.
1// Explicit language tag: typescript
2interface UserSession {
3  userId: string;
4  role: "admin" | "member";
5  expiresAt: number;
6}

1.4 Blockquote Hierarchy

Blockquotes highlight quotations, important notices, core conclusions, or architectural axioms:

Core Design Principle:

“Simplicity is prerequisite for reliability. The best code is often the code you didn’t have to write.”

— Edsger W. Dijkstra

2. Punctuation & Spacing Aesthetics

Professional documentation pays meticulous attention to subtle typographic details:

  1. Spacing Between Scripts: Maintain clean spacing when mixing different scripts (e.g. Latin letters and CJK characters);
  2. Punctuation Accuracy: Use standard punctuation consistent with the primary sentence language;
  3. Emphasis Flanking: Ensure bold (**word**) and italic (*word*) markers hug content without broken inner whitespace.

3. Advanced Markdown Extensions in Action

By embedding KaTeX and Mermaid renderers, a pure static blog can natively render intricate mathematical equations and software architecture diagrams without relying on static images.

3.1 Native LaTeX / KaTeX Mathematical Typesetting

Write standard LaTeX directly in Markdown for crisp, high-resolution formula rendering.

Inline Math

Wrap inline formulas with single dollar signs $:

  • Mass-energy equivalence: $E = mc^2$
  • Euler’s identity: $e^{i\pi} + 1 = 0$
  • Normal distribution PDF: $f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}$

Display Math (Block Equations)

Wrap standalone equation blocks with double dollar signs $$:

  • Gaussian Integral: $$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

  • Discrete Fourier Transform (DFT): $$ X_k = \sum_{n=0}^{N-1} x_n \cdot e^{-i \frac{2\pi}{N} k n} \quad (k = 0, 1, \dots, N-1) $$

  • Maxwell’s Equations (Differential Form): $$ \begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \ \nabla \cdot \mathbf{B} &= 0 \ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \ \nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{aligned} $$

3.2 Mermaid Vector Flowcharts & Sequence Diagrams

Declare ```mermaid code blocks, and the browser dynamically renders responsive vector SVGs matching light/dark themes.

Modern Edge Architecture Flow (graph LR)

flowchart LR
    Client["Client Browser"] -->|"HTTPS / HTTP/3"| CDN["Cloudflare Edge Network"]
    CDN -->|"Cache Hit (&lt; 10ms)"| EdgeCache["Edge Cache"]
    CDN -->|"Cache Miss"| Pages["Cloudflare Pages Static Delivery"]
    Pages -->|"Pure Markdown"| Storage["Markdown Content"]

OAuth 2.1 PKCE State Machine Sequence (sequenceDiagram)

sequenceDiagram
    autonumber
    actor User as User
    participant Client as Frontend Client
    participant Authz as Authz Server
    participant API as Resource API

    User->>Client: Click Passkey Login
    Client->>Client: Generate code_verifier and challenge
    Client->>Authz: Initiate Auth Request /authorize
    Authz->>User: Prompt WebAuthn biometric check
    User-->>Authz: Biometric signature verified
    Authz-->>Client: Return Authorization Code
    Client->>Authz: Exchange Token /token
    Authz->>Authz: Verify SHA256 matches challenge
    Authz-->>Client: Issue JWT Access Token
    Client->>API: Fetch data with Bearer Token
    API-->>Client: 200 OK Return Protected Resource

4. Conclusion: The “Docs as Code” Philosophy

In modern software engineering, the Docs as Code paradigm offers major advantages:

  1. Version Control: Documentation lives alongside source code in Git, making every iteration auditable;
  2. Standardized Governance: Consistent guidelines ensure high-quality knowledge assets across teams;
  3. Decoupled Presentation: Clean Markdown focuses entirely on content rigor, leaving visual rendering to static site engines.

Adopting disciplined Markdown conventions makes every article clearer to write and a pleasure to read.

Table of Contents