实现md自定义块block和代码块组code-group

import type MarkdownIt from 'markdown-it'
import type { RenderRule } from 'markdown-it/lib/renderer.mjs'
import container from 'markdown-it-container'

type ContainerArgs = [typeof container, string, { render: RenderRule }]

function createContainer(
  klass: string,
  defaultTitle: string,
  md: MarkdownIt
): ContainerArgs {
  return [
    container,
    klass,
    {
      render() {
        return ''
      }
    }
  ]
}

md.use(...createContainer('tip', 'TIP', md))

function createContainer(
  klass: string,
  defaultTitle: string,
  md: MarkdownIt
): ContainerArgs {
  return [
    container,
    klass,
    {
      /**
       * tokens 为解析的所有的标签
       * idx 为 markdown-it-container 解析后的包含 ::: 的索引
       * _options 为创建新的markdown-it对象时定义的选项
       * env 可以和 tokens 一起使用，将外部变量注入到解析器和渲染器中
       */
      render(tokens, idx, _options, env: { references?: any }) {
        // 拿到 `:::` 的token
        const token = tokens[idx]
        // 解析 token 中 info 的文本，slice的作用是文本后面还可能有其他文本，这里截取掉前面固有的关键字，获得后面的文本，如果没有则是''
        const info = token.info.trim().slice(klass.length).trim()
        // 获取标签的属性
        const attrs = md.renderAttrs(token)
        /**
         * 判断是否标签开始，否则一定为标签结束，不可能为自闭合标签，因为渲染的结果为div。
         * 获取title，就是 ::: 加上关键字后面的部分，还需看是否有链接引用
         * 如果是details则为可展开的标签`<details><summary></summary></details>`
         */
        if (token.nesting === 1) {
          const title = md.renderInline(info || defailtTitle, {
            references: env.references,
          })

          if (klass === 'details') {
            return `<details class="${klass} custom-block"${attrs}><summary>${title}</summary>\n`
          }
          return `<div class="${klass} custom-block"${attrs}><p class="custom-block-title">${title}</p>\n`
        }
        else {
          return klass === 'details' ? '</details>\n' : '</div>\n'
        }
      }
    }
  ]
}

import Markdown from 'unplugin-vue-markdown/vite'

export default defineConfig({
  plugins: [
    Markdown({
      async markdownItSetup(md) {
        md.use(...createContainer('tip', 'TIP', md))
        md.use(...createContainer('warning', 'WARNING', md))
        md.use(...createContainer('danger', 'DANGER', md))
        md.use(...createContainer('info', 'INFO', md))
        md.use(...createContainer('details', 'Details', md))
      }
    })
  ]
})

function createCodeGroup(): ContainerArgs {
  return [
    container,
    'code-group',
    {
      render() {
        return ''
      }
    }
  ]
}

function createCodeGroup(): ContainerArgs {
  return [
    container,
    'code-group',
    {
      render(tokens, idx) {
        // 以防忘记，这里判断的是带有 code-group 的 token 的标签是否是开始标签，而不是判断所有的 tokens
        if (tokens[idx].nesting === 1) {
          const name = nanoid(5) // radio 唯一 name，才能实现单选
          const tabs = '' // tabs html
          const checked = 'checked'

          /**
           * 这里除了要处理渲染开始和结束标签的HTML,还要拿到其中代码片段的 title
           * 这里的循环时查找 code-group 之内的其他标签
           */
          for (
            let i = idx + 1;
            !(
              tokens[i].nesting === -1
              && tokens[i].type === 'container_code-group_close'
            );
            i++
          ) {
            // 兼容在md中直接使用 <pre><code></code></pre> 编写代码块，并包含属性data-title=""，那么也可以识别出来
            const isHtml = tokens[i].type === 'html_block'

            if ((tokens[i].type === 'fence' && tokens[i].tag === 'code') || isHtml) {
              // 获取 title
              const title = extractTitle(isHtml ? tokens[i].content : tokens[i].info, isHtml)

              if (title) {
                const id = nanoid(7) // radio 中 id 和 label 中 for 对应
                tabs += `<input type="radio" name="group-${name}" id="tab-${id}" ${checked}><label for="tab-${id}">${title}</label>`

                // 给第一个代码块 token.info 加上 active 属性
                if (checked && !isHtml)
                  tokens[i].info += ' active'
                checked = ''
              }
            }
          }

          return `<div class="code-group"><div class="tabs">${tabs}</div><div class="blocks">\n`
        }
        return `</div></div>\n`
      }
    }
  ]
}

export function preWrapperPlugin(md: MarkdownIt) {
  // fence本身就是render，但是我们需要重写它
  const fence = md.renderer.rules.fence!

  md.renderer.rules.fence = (...args) => {
    const [tokens, idx] = args
    // 拿到所有 fence 的 token
    const token = tokens[idx]

    // 移除代码块定义的 title，eg: [index.js]会被整个移除
    token.info = token.info.replace(/\[.*\]/, '')

    // 判断 info 中是否有 `active`
    // eslint-disable-next-line regexp/no-unused-capturing-group
    const active = / active( |$)/.test(token.info) ? ' active' : ''

    // 移除 active
    token.info = token.info.replace(/ active$/, '').replace(/ active /, ' ')

    // 获取定义代码块的语言, 这个方法在上面有定义过 `render中使用到的工具`
    const lang = extractLang(token.info)

    // 自定义包裹后渲染原来的 fence即可
    return (
      `<div class="language-${lang}${active}">${fence(...args)}</div>`
    )
  }
}

export default defineConfig({
  plugins: [
    Markdown({
      async markdownItSetup(md) {
        md.use(preWrapperPlugin)

        // container
        md.use(containerPlugin)
      }
    })
  ]
})

export function useCodeGroups() {
  const initializeCodeGroups = () => {
    document.querySelectorAll('.code-group > .blocks').forEach((el) => {
      Array.from(el.children).forEach((child) => {
        child.classList.remove('active')
      })
      el.children[0]?.classList.add('active')
    })
  }

  onMounted(() => {
    if (import.meta.env.DEV) {
      initializeCodeGroups()
    }

    if (typeof window !== 'undefined') {
      window.addEventListener('click', (e) => {
        const el = e.target as HTMLInputElement

        if (el.matches('.code-group input')) {
          const group = el.parentElement?.parentElement
          if (!group)
            return

          // 获取点击的 tab 索引
          const i = Array.from(group.querySelectorAll('input')).indexOf(el)
          if (i < 0)
            return

          const blocks = group.querySelector('.blocks')
          if (!blocks)
            return

          const current = Array.from(blocks.children).find(child =>
            child.classList.contains('active'),
          )
          if (!current)
            return

          // 获取点击的 tab 对应的代码块
          const next = blocks.children[i]
          if (!next || current === next)
            return

          current.classList.remove('active')
          next.classList.add('active')

          const label = group.querySelector(`label[for="${el.id}"]`)
          label?.scrollIntoView({ block: 'nearest' })
        }
      })
    }
  })

  onUpdated(() => {
    if (import.meta.env.DEV) {
      initializeCodeGroups()
    }
  })
}