Markdown Test

Astro MDX Markdown test file.

This note is a living reference for every element you can place in a .mdx note. Features come from: standard CommonMark, GitHub Flavored Markdown (GFM), KaTeX (math), Expressive Code (code blocks), and the site’s custom plugins (highlights, callouts, image sizing, mermaid).

Headings #

Heading 2 — H2 #

Heading 3 — H3 #

Heading 4 — H4 #

Heading 5 — H5 #

Heading 6 — H6 #

Text #

Plain paragraph text is the baseline. Bold — **text** Italic — *text* Strikethrough — ~~text~~ Highlight — ==text== (custom plugin) Underline — <u>text</u> (HTML element) Strike via HTML — <s>text</s> _subscript and ^superscript — <sub> / <sup>. Underline with bold and italic and highlight nested. Inline code — backtick (not styled by text modifiers). Ctrl+Shift+P — keyboard keys via <kbd>. HTML — abbreviation with tooltip via <abbr title="...">. Markdown internal link: Rust — [text](relative-path). External link: Astro docs — [text](url). Bare URL (use a markdown link): https://example.com — [url](url). Named footnote reference: see footnote[^named] for details. Internal anchor link: Jump to Tables — [text](#heading-id) navigates to any heading on the same page.

A simple blockquote. Good for citations or callouts without icons.

Nested blockquotes:

First level of nesting.

Second level of nesting.

Lists #

• This is a List
• Create with dash, asterisk or plus sign.
  • Nested B1
  • Nested B2
    • Deeply nested B2a
    • Deeply nested B2b
• Item C

1. First item
2. Second item
   1. Sub-item 2a
   2. Sub-item 2b
      1. Deep sub-item
3. Third item

• Completed task
• Incomplete task
• Another completed task
  • Completed subtask
  • Incomplete subtask
• Task with bold text

1. Ordered item one
   • Unordered nested under ordered
   • Another unordered
     1. Ordered under unordered
2. Ordered item two
   • Task nested under ordered
   • Completed task nested under ordered
     • Deeper unordered under task

Code Blocks #

Use const x = 1 for variable declarations. Press Ctrl+` to open the terminal.

1
// Default, line numbers and no title
2
function greet(name: string): string {
3
  return `Hello, ${name}!`;
4
}

1
// Default with title
2
export function clamp(val: number, min: number, max: number): number {
3
  return Math.min(Math.max(val, min), max);
4
}

# Terminal with no line numbers
npm install
npm run dev

1
// line highlighting
2
const API_URL = "https://api.example.com";  // line 1 highlighted
3

4
function fetchData(endpoint: string) {
5
  const url = `${API_URL}/${endpoint}`;     // line 4 highlighted
6
  return fetch(url).then(r => r.json());    // line 5 highlighted
7
}                                            // line 6 highlighted

1
// Diff markers — EC syntax: del={[lines]} ins={[lines]} in the fence
2
function oldImplementation(x: number) {
3
  return x * x * x;
4
}
5
function cube(x: number): number {
6
  return x ** 3;
7
}

1
--- a/src/config.ts
2
+++ b/src/config.ts
3
@@ -2,5 +2,6 @@
4
 export const config = {
5
   host: "localhost",
6
-  port: 3000,
7
+  port: 8080,
8
+  debug: true,
9
 };

1
class OldService {
2
  fetch() { return new OldService().run(); }
3
}
4
const svc = new DataService();

1
// mark="active" — highlights every occurrence of the word 'active' inline
2
const results = items.filter(item => item.active && item.score > 0.5);
3
if (results.filter(r => r.active).length > 0) return true;

// Force no line numbers (showLineNumbers=false)
const x = 1;
const y = 2;

1
// Wrap long lines (wrap)
2
const veryLongVariableName = someObject.someMethod().chainedMethod().anotherChainedMethod().finalMethod("with a very long argument string");

1
// frame="none" — the title tab above is suppressed; compare with "utils.ts" block above
2
const x = 1;

Code blocks can break out of the content column via wrapper divs — same classes as images:

1
// Wide column — same extra margin as wide images
2
export function process(items: Item[], config: ProcessConfig): ProcessResult {
3
  return items.filter(i => i.active).map(i => transform(i, config));
4
}

1
// Bleed — full width with a small edge gutter; between wide and full
2
export function process(items: Item[], config: ProcessConfig): ProcessResult {
3
  return items.filter(i => i.active).map(i => transform(i, config));
4
}

1
// Full page width — edge to edge (padding applied inline via style to prevent clipping)
2
export function process(items: Item[], config: ProcessConfig): ProcessResult {
3
  return items.filter(i => i.active).map(i => transform(i, config));
4
}

Images #

Images use the ![alt|modifier](url) syntax. Modifiers after | are space-separated and combinable — e.g. |400 center. Below: default, 400px, centered at 450px, wide, bleed (between wide and full), full, and a captioned figure via HTML:

Tables #

Alignment

Wide column table

Bleed column table

Full wide table

Math #

The area of a circle is $A = \pi r^2$. Einstein’s famous equation is $E = mc^2$. Euler’s identity: $e^{i\pi} + 1 = 0$

The quadratic formula:

Matrix determinant:

Maxwell’s equations (differential form):

Fourier transform:

Multi-line aligned equations with \begin{align}:

Graphs (Mermaid) #

Mermaid renders client-side from CDN and re-renders on theme toggle.

stateDiagram-v2
    [*] --> Idle
    Idle --> Loading : fetch()
    Loading --> Success : 200 OK
    Loading --> Error : 4xx/5xx
    Error --> Idle : retry
    Success --> Idle : reset
    Success --> [*] : done

Callouts #

All callout types from > [!type] syntax. Unsupported types default to note.

1
function add(a: number, b: number): number {
2
  return a + b;
3
}

1
const secret = "hidden until expanded";

Inline MDX comment:

Footnotes #

Named footnotes are defined anywhere in the document and rendered at the bottom.¹ Here I’m inserting two references. ²

Code Colors #

1
/* block comment */
2
// line comment
3

4
#include <stdio.h>
5

6
#define PI            3.14159265358979
7
#define CONCAT(a, b)  a##b
8
#define CLAMP(v,lo,hi) (((v)<(lo))?(lo):(((v)>(hi))?(hi):(v)))
9

10
typedef enum {
11
    STATUS_IDLE = 0,
12
} Status;
13

14
typedef struct Node {
15
    const char *label;
16
} Node;
17

18
static inline int32_t clamp_i32(int32_t val, int32_t lo, int32_t hi);
19
void                  arena_free(Arena *a);
20

21
static inline int32_t clamp_i32(int32_t val, int32_t lo) {
22
    return val < lo ? lo : (val > hi ? hi : val);
23
}
24

25
int main(int argc, char *argv[]) {
26
    int          decimal  = 42;
27
    unsigned int udecimal = 42u;
28
    int          hex      = 0xDEADBEEF;
29
    const char  *greeting = "Hello, World!\n";
30
    head->id    = 42;
31
    int node_id = stack_node.id;
32
    printf(fmt, arith, pi_d);
33
    fprintf(stderr, "argc = %d\n", argc);
34
    size_t sz_node = sizeof(Node);
35
    int final = CLAMP(
36
        (int)((double)arith * PI + (float)shift / (decimal + 1.0f)),
37
        -(MAX_ITEMS),
38
        MAX_ITEMS
39
    );
40
}

1
const msg = `Hello ${name}, score: ${score.toFixed(2)}`;
2
const raw = "plain string literal";
3

4
const re   = /^[a-z_]\w*$/i;
5
const ok   = true;
6
const none = null;
7

8
class Counter {
9
  count = 0;
10
  inc() { this.count++; }
11
}
12

13
import { readFile } from 'fs/promises';
14
export default Counter;
15

16
function log(target: any, key: string) {}
17
class Service {
18
  @log name = "svc";
19
}

1
const el = (
2
  <div className="wrapper" id="root">
3
    <MyComponent title="hello" disabled={false} />
4
    <input type="text" placeholder="…" />
5
  </div>
6
);