mermaid-async

components/PrismMac.js

@@ -8,7 +8,6 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
 // 所有语言的prismjs 使用autoloader引入
 import 'prismjs/plugins/autoloader/prism-autoloader'
 // mermaid图
-import mermaid from 'mermaid'
 import BLOG from '@/blog.config'
 
 /**
@@ -18,6 +17,7 @@ import BLOG from '@/blog.config'
 const PrismMac = () => {
   React.useEffect(() => {
     renderPrismMac()
+    renderMermaid()
 
     // 折叠代码行号bug
     const observer = new MutationObserver(mutationsList => {
@@ -35,21 +35,10 @@ const PrismMac = () => {
   return <></>
 }
 
-function renderPrismMac() {
-  const container = document?.getElementById('container-inner')
-  const codeToolBars = container?.getElementsByClassName('code-toolbar')
-
-  // Add line numbers
-  const codeBlocks = container?.getElementsByTagName('pre')
-  if (codeBlocks) {
-    Array.from(codeBlocks).forEach(item => {
-      if (!item.classList.contains('line-numbers')) {
-        item.classList.add('line-numbers')
-        item.style.whiteSpace = 'pre-wrap'
-      }
-    })
-  }
-
+/**
+ * 将mermaid语言 渲染成图片
+ */
+const renderMermaid = async() => {
   //   支持 Mermaid
   const mermaidPres = document.querySelectorAll('pre.notion-code.language-mermaid')
   if (mermaidPres) {
@@ -73,9 +62,26 @@ function renderPrismMac() {
       }
     }
     if (needLoad) {
-      mermaid.contentLoaded()
+      const asyncMermaid = await import('mermaid')
+      asyncMermaid.default.contentLoaded()
     }
   }
+}
+
+function renderPrismMac() {
+  const container = document?.getElementById('container-inner')
+  const codeToolBars = container?.getElementsByClassName('code-toolbar')
+
+  // Add line numbers
+  const codeBlocks = container?.getElementsByTagName('pre')
+  if (codeBlocks) {
+    Array.from(codeBlocks).forEach(item => {
+      if (!item.classList.contains('line-numbers')) {
+        item.classList.add('line-numbers')
+        item.style.whiteSpace = 'pre-wrap'
+      }
+    })
+  }
 
   // 重新渲染之前检查所有的多余text