umd 0.2.0

Universal Markdown - A post-Markdown superset with semantic HTML and extensible syntax
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

//! Example: Code block metadata extensions
//!
//! This example demonstrates umd-core's code block extensions:
//! - Language class passthrough (no highlighting is done in core)
//! - File name support with <figcaption>
//! - `<figure class="umd-code-block">` wrapping, including for languages
//!   like `mermaid` that a host application renders itself (see
//!   docs/architecture.md's 3-layer deferred-rendering model)
//!
//! Run with: cargo run --example code_block_extensions

use umd::parse;

fn main() {
    println!("=== Code Block Extensions Example ===\n");

    // Example 1: Basic syntax highlighting
    println!("Example 1: Rust code with syntax highlighting");
    let rust_code = r#"
```rust
fn fibonacci(n: u32) -> u32 {
    match n {
        0 | 1 => n,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}
```
"#;

    let html = parse(rust_code);
    println!("Input:\n{}", rust_code);
    println!("Output:\n{}\n", html);

    // Example 2: Code block with filename
    println!("Example 2: Code with filename metadata");
    let python_code = r#"
```python
# @filename: data_processor.py
def process_data(data):
    """Process incoming data."""
    filtered = [x for x in data if x > 0]
    return sum(filtered) / len(filtered)
```
"#;

    let html = parse(python_code);
    println!("Input:\n{}", python_code);
    println!("Output:\n{}\n", html);

    // Example 3: Mermaid code block (passed through, not rendered by core)
    println!("Example 3: Mermaid code block (host application renders this)");
    let mermaid_flowchart = r#"
```mermaid
graph TD
    A[User visits website] --> B{Logged in?}
    B -->|Yes| C[Show dashboard]
    B -->|No| D[Show login page]
    D --> E[User enters credentials]
    E --> F{Valid?}
    F -->|Yes| C
    F -->|No| E
    C --> G[Display user data]
```
"#;

    let html = parse(mermaid_flowchart);
    println!("Input:\n{}", mermaid_flowchart);
    println!("Output:\n{}\n", html);

    // Example 4: Another Mermaid code block (sequence diagram)
    println!("Example 4: Mermaid code block (sequence diagram, host-rendered)");
    let mermaid_sequence = r#"
```mermaid
sequenceDiagram
    participant Client
    participant Server
    participant Database
    
    Client->>Server: Request data
    Note over Server: Process request
    Server->>Database: Query records
    Database-->>Server: Return results
    Server-->>Client: Send JSON response
```
"#;

    let html = parse(mermaid_sequence);
    println!("Input:\n{}", mermaid_sequence);
    println!("Output:\n{}\n", html);

    // Example 5: Multiple code blocks
    println!("Example 5: Multiple code blocks (JavaScript and JSON)");
    let multi_code = r#"
```javascript
// @filename: fetch-config.js
const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000
};

async function fetchData(endpoint) {
  const response = await fetch(config.apiUrl + endpoint, {
    timeout: config.timeout
  });
  return response.json();
}
```

```json
{
  "name": "example-app",
  "version": "1.0.0",
  "description": "Example application"
}
```
"#;

    let html = parse(multi_code);
    println!("Input:\n{}", multi_code);
    println!("Output:\n{}\n", html);

    // Summary
    println!("\n=== Summary ===");
    println!("✅ umd-core's code block handling:");
    println!("  • Language class passthrough (`language-<lang>`), unmodified");
    println!("  • File name metadata (@filename: comment) → <figcaption>");
    println!("  • Every block wrapped in <figure class=\"umd-code-block\">");
    println!(
        "\n📖 Host application responsibility (Layer 2/3, see docs/architecture.md):"
    );
    println!("  • Syntax highlighting (e.g. highlight.js, Shiki, Prism.js)");
    println!("  • Mermaid diagram rendering (e.g. mermaid.js client-side,");
    println!("    or a native renderer at build time)");
    println!("  • Any other language-specific enhancement (e.g. GeoJSON maps)");
}