hexo-theme-butterfly/layout/includes/third-party/math/mermaid.pug

script.
  (() => {
    const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap')
    if ($mermaidWrap.length) {
      window.runMermaid = () => {
        window.loadMermaid = true
        const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{theme.mermaid.theme.dark}' : '!{theme.mermaid.theme.light}'

        Array.from($mermaidWrap).forEach((item, index) => {
          const mermaidSrc = item.firstElementChild
          const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
          const mermaidID = 'mermaid-' + index
          const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent
          mermaid.mermaidAPI.render(mermaidID, mermaidDefinition, (svgCode) => {
            mermaidSrc.insertAdjacentHTML('afterend', svgCode)
          })
        })
      }

      const loadMermaid = () => {
        window.loadMermaid ? runMermaid() : getScript('!{url_for(theme.asset.mermaid)}').then(runMermaid)
      }

      btf.addModeChange('mermaid', () => {
        window.runMermaid()
      })

      window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
    }
  })()