配置自定义语法

运行环境: node

该文件中的代码将仅在 Node.js 环境中运行，您可以访问 Node 的 API。

Slidev 支持自定义 Markdown 语法。通过这种方式，你可以为你的幻灯片添加自定义的 Markdown 语法，以及自定义代码块的渲染。

首先，创建一个 /setup/transformers.ts 文件，内容如下：

import type { MarkdownTransformContext } from '@slidev/types'
import { defineTransformersSetup
 } from '@slidev/types'

function myCodeblock
(ctx
: MarkdownTransformContext) {
  console
.log
('在整个幻灯片中的索引：', ctx
.slide
.index
)
  ctx
.s
.replace(
    /^```myblock *(\{[^\n]*\})?\n([\s\S]+?)\n```/gm,
    (full
: string, options
 = '', code
 = '') => {
      return `...`
    },
  )
}

export default defineTransformersSetup
(() => {
  return {
    pre
: [],
    preCodeblock
: [myCodeblock
],
    postCodeblock
: [],
    post
: [],
  }
})

返回值是包含 pre、preCodeblock、postCodeblock 和 post 四个可选字段，每个字段的值是函数数组，将被调用以转换 Markdown 内容。它们的调用顺序为：

来自你的项目的 pre
来自插件和主题的 pre
导入代码片段语法和 Shiki magic move
来自你的项目的 preCodeblock
来自插件和主题的 preCodeblock
内置的 Mermaid、Monaco 和 PlantUML 等特殊代码块
来自插件和主题的 postCodeblock
来自你的项目的 postCodeblock
其他内置的自定义语法，如代码块包装
来自插件和主题的 post
来自你的项目的 post

配置自定义语法 ​

配置自定义语法