0
# Markdown Transform System
1

2
Types for Slidev's markdown transformation system, enabling custom processing of slide markdown content during build and rendering.
3

4
## Capabilities
5

6
### Markdown Transform Context
7

8
Context interface providing tools and information for markdown transformers.
9

10
```typescript { .api }
11
/**
12
 * Context interface for markdown transformers
13
 */
14
interface MarkdownTransformContext {
15
  /** Magic string instance for current markdown content modification */
16
  s: MagicString;
17
  /** Slide information for the current slide being transformed */
18
  slide: SlideInfo;
19
  /** Resolved Slidev configuration options */
20
  options: ResolvedSlidevOptions;
21
}
22
```
23

24
### Markdown Transformer
25

26
Function type for transforming markdown content within slides.
27

28
```typescript { .api }
29
/**
30
 * Markdown transformer function
31
 * @param ctx - Transform context with tools and slide information
32
 */
33
type MarkdownTransformer = (ctx: MarkdownTransformContext) => Awaitable<void>;
34
```
35

36
**Usage Examples:**
37

38
```typescript
39
import type { MarkdownTransformer } from "@slidev/types";
40

41
// Example transformer that adds custom syntax highlighting
42
const customHighlighter: MarkdownTransformer = async (ctx) => {
43
  const { s, slide, options } = ctx;
44
  
45
  // Find code blocks with custom language
46
  const codeBlockRegex = /```customlang\n([\s\S]*?)\n```/g;
47
  
48
  let match;
49
  while ((match = codeBlockRegex.exec(s.original)) !== null) {
50
    const [fullMatch, code] = match;
51
    const start = match.index;
52
    const end = start + fullMatch.length;
53
    
54
    // Replace with highlighted version
55
    const highlighted = await highlightCustomLanguage(code);
56
    s.overwrite(start, end, `\`\`\`html\n${highlighted}\n\`\`\``);
57
  }
58
};
59

60
// Example transformer that injects slide metadata
61
const metadataInjector: MarkdownTransformer = (ctx) => {
62
  const { s, slide } = ctx;
63
  
64
  // Add slide number at the beginning
65
  if (slide.index > 0) {
66
    s.prepend(`<!-- Slide ${slide.index} -->\n`);
67
  }
68
  
69
  // Add slide title as comment if available
70
  if (slide.title) {
71
    s.prepend(`<!-- Title: ${slide.title} -->\n`);
72
  }
73
};
74

75
// Example transformer that processes custom directives
76
const directiveProcessor: MarkdownTransformer = (ctx) => {
77
  const { s } = ctx;
78
  
79
  // Process custom ::warning directive
80
  s.replace(
81
    /::warning\n([\s\S]*?)\n::/g,
82
    '<div class="warning-box">\n$1\n</div>'
83
  );
84
  
85
  // Process custom ::note directive
86
  s.replace(
87
    /::note\[(.*?)\]\n([\s\S]*?)\n::/g,
88
    '<div class="note-box" data-title="$1">\n$2\n</div>'
89
  );
90
};
91
```
92

93
## Types
94

95
```typescript { .api }
96
import type { Awaitable } from '@antfu/utils';
97
import type MagicString from 'magic-string-stack';
98
import type { ResolvedSlidevOptions } from './options';
99
import type { SlideInfo } from './types';
100
```