| 1 | # Configure Transformers |
| 2 | |
| 3 | <Environment type="node" /> |
| 4 | |
| 5 | This setup function allows you to define custom transformers for the markdown content of **each slide**. This is useful when you want to add custom Markdown syntax and render custom code blocks. To start, create a `./setup/transformers.ts` file with the following content: |
| 6 | |
| 7 | ```ts twoslash [setup/transformers.ts] |
| 8 | import { defineCodeblockTransformer, defineMarkdownTransformer, defineTransformersSetup } from '@slidev/types' |
| 9 | import lz from 'lz-string' |
| 10 | |
| 11 | const mySyntax = defineMarkdownTransformer((ctx) => { |
| 12 | console.log('index in presentation', ctx.slide.index) |
| 13 | ctx.s.replace( |
| 14 | /^\[\[\[(.*)\]\]\]/gm, |
| 15 | (full, content) => { |
| 16 | return `...` |
| 17 | }, |
| 18 | ) |
| 19 | }) |
| 20 | |
| 21 | const myCodeblock = defineCodeblockTransformer((ctx) => { |
| 22 | if (ctx.info.startsWith('myblock')) { |
| 23 | console.log('index in presentation', ctx.slide?.index) |
| 24 | return `<MyBlockRenderer code="${lz.compressToEncodedURIComponent(ctx.code)}" />` |
| 25 | } |
| 26 | }) |
| 27 | |
| 28 | export default defineTransformersSetup(() => { |
| 29 | return { |
| 30 | // This applies before the Markdown is parsed, per slide |
| 31 | pre: [mySyntax], |
| 32 | // This applies per Markdown code block |
| 33 | codeblocks: [myCodeblock], |
| 34 | } |
| 35 | }) |
| 36 | ``` |
| 37 | |
| 38 | > [!NOTE] |
| 39 | > When possible, implement `pre` transformers as markdown-it plugins for better robustness. |
| 40 |