Configure Transformers

Environment: node

This setup function will only run on Node.js environment, you can have access to Node's API.

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:

setup/transformers.ts

import { defineCodeblockTransformer, defineMarkdownTransformer, defineTransformersSetup } from '@slidev/types'
import lz from 'lz-string'

const mySyntax = defineMarkdownTransformer((ctx) => {
  console.log('index in presentation', ctx.slide.index)
  ctx.s.replace(
    /^\[\[\[(.*)\]\]\]/gm,
    (full, content) => {
      return `...`
    },
  )
})

const myCodeblock = defineCodeblockTransformer((ctx) => {
  if (ctx.info.startsWith('myblock')) {
    console.log('index in presentation', ctx.slide?.index)
    return `<MyBlockRenderer code="${lz.compressToEncodedURIComponent(ctx.code)}" />`
  }
})

export default defineTransformersSetup(() => {
  return {
    // This applies before the Markdown is parsed, per slide
    pre: [mySyntax],
    // This applies per Markdown code block
    codeblocks: [myCodeblock],
  }
})

NOTE

When possible, implement pre transformers as markdown-it plugins for better robustness.