Rich MDX Syntax & Interactive Components

On top of standard GitHub Flavored Markdown (tables, task lists, heading anchors, footnotes), DioxusPress ships purpose-built blocks and registered Rust components for technical writing.

1. Tabbed Code Blocks (:::code-tabs)

Wrap fenced code blocks labeled with [Tab Title] inside :::code-tabs to render an interactive switcher:

cd crates/app
BASE_URL=http://127.0.0.1:8080 dx serve --web --no-default-features

docker build --build-arg APP_FEATURES="--no-default-features" -t dioxuspress:basic .

2. Semantic Admonitions

Seven built-in callout levels are supported: :::tip, :::info, :::note, :::important, :::warning, :::caution, and :::error:

3. Native Server-Rendered MathML

Inline math like Euler's identity $e^{i\pi }+1=0$ and display equations compile on the server directly into browser-native semantic MathML — zero client-side font bundles or layout shift:

4. Adaptive Mermaid Diagrams

Fenced mermaid blocks render flowcharts and sequence diagrams that adapt automatically to light and dark mode:

sequenceDiagram
  participant User as Browser
  participant SSR as Axum SSR Server
  participant Search as Tantivy Index
  User->>SSR: GET /docs/content/mdx?lang=en
  SSR-->>User: Full First-Paint HTML + SEO Meta + Hydrated Payload
  User->>SSR: ⌘K Full-Text Query
  SSR->>Search: Sub-millisecond Tokenized Search
  Search-->>User: Highlighted Snippets & Target URLs

5. Built-In MDX Tags

Trusted content (docs, blog, courses) can invoke registered self-closing Rust components directly:

• Inline callout highlights: <Blue text="Key concept" />, <Green text="Verified" />, <Yellow text="Heads up" />, <Pink text="Hot path" />;
• Interactive embeds: <ThemeShowcase />, <YouTube id="..." />, <Bilibili id="BV..." />, <PodcastCard id="..." />.