Repository: slidevjs/slidev
File: packages/slidev/node/plugins/markdown.ts (TypeScript)

Code before:
    },
    transforms: {
      before(code, id) {
        if (id === entryPath)
          return ''

        const monaco = (config.monaco === true || config.monaco === mode)
          ? transformMarkdownMonaco
          : truncateMancoMark

        code = transformSlotSugar(code)
        code = transformMermaid(code)
        code = transformPlantUml(code, config.plantUmlServer)
        code = monaco(code)
        code = transformHighlighter(code)
        code = transformPageCSS(code, id)

        return code
      },
    },
  })
}

export function transformMarkdownMonaco(md: string) {
  // transform monaco
  md = md.replace(/^```(\w+?)\s*{monaco}\s*?({.*?})?\s*?\n([\s\S]+?)^~~~\s*?\n([\s\S]+?)^```/mg, (full, lang = 'ts', options = '{}', code: string, diff: string) => {
    lang = lang.trim()
    options = options.trim() || '{}'
    const encoded = base64.encode(code, true)
    const encodedDiff = base64.encode(diff, true)
    return `<Monaco :code="'${encoded}'" :diff="'${encodedDiff}'" lang="${lang}" v-bind="${options}" />`
  })
  md = md.replace(/^```(\w+?)\s*{monaco}\s*?({.*?})?\s*?\n([\s\S]+?)^```/mg, (full, lang = 'ts', options = '{}', code: string) => {
    lang = lang.trim()
    options = options.trim() || '{}'
    const encoded = base64.encode(code, true)
    return `<Monaco :code="'${encoded}'" lang="${lang}" v-bind="${options}" />`
  })

  return md
}

export function truncateMancoMark(md: string) {
  return md.replace(/{monaco.*?}/g, '')
}

export function transformSlotSugar(md: string) {
  const lines = md.split(/\r?\n/g)

  let prevSlot = false


Review comment (suggestion):
```suggestion
  md = md.replace(/^```(\w+?)\s*{monaco-diff}\s*?({.*?})?\s*?\n([\s\S]+?)^~~~\s*?\n([\s\S]+?)^```/mg, (full, lang = 'ts', options = '{}', code: string, diff: string) => {
```

I am thinking of integrating retypewriter and other tools later with similar syntax (multiple-step blocks). I think we might be better to be explicit here.

Code after:
    },
    transforms: {
      before(code, id) {
        if (id === entryPath)
          return ''

        const monaco = (config.monaco === true || config.monaco === mode)
          ? transformMarkdownMonaco
          : truncateMancoMark

        code = transformSlotSugar(code)
        code = transformMermaid(code)
        code = transformPlantUml(code, config.plantUmlServer)
        code = monaco(code)
        code = transformHighlighter(code)
        code = transformPageCSS(code, id)

        return code
      },
    },
  })
}

export function transformMarkdownMonaco(md: string) {
  // transform monaco
  md = md.replace(/^```(\w+?)\s*{monaco-diff}\s*?({.*?})?\s*?\n([\s\S]+?)^~~~\s*?\n([\s\S]+?)^```/mg, (full, lang = 'ts', options = '{}', code: string, diff: string) => {
    lang = lang.trim()
    options = options.trim() || '{}'
    const encoded = base64.encode(code, true)
    const encodedDiff = base64.encode(diff, true)
    return `<Monaco :code="'${encoded}'" :diff="'${encodedDiff}'" lang="${lang}" v-bind="${options}" />`
  })
  md = md.replace(/^```(\w+?)\s*{monaco}\s*?({.*?})?\s*?\n([\s\S]+?)^```/mg, (full, lang = 'ts', options = '{}', code: string) => {
    lang = lang.trim()
    options = options.trim() || '{}'
    const encoded = base64.encode(code, true)
    return `<Monaco :code="'${encoded}'" lang="${lang}" v-bind="${options}" />`
  })

  return md
}

export function truncateMancoMark(md: string) {
  return md.replace(/{monaco.*?}/g, '')
}

export function transformSlotSugar(md: string) {
  const lines = md.split(/\r?\n/g)

  let prevSlot = false