code optimization

components/PrismMac.js

@@ -18,6 +18,10 @@ import { isBrowser, loadExternalResource } from '@/lib/utils'
  */
 const PrismMac = () => {
   if (isBrowser()) {
+    // setup autoloader
+    if (Prism && Prism.plugins && Prism.plugins.autoloader) {
+      Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH
+    }
     loadExternalResource(BLOG.PRISM_THEME_PATH, 'css')
     if (BLOG.CODE_MAC_BAR) {
       loadExternalResource('/css/prism-mac-style.css', 'css')
@@ -27,19 +31,6 @@ const PrismMac = () => {
   React.useEffect(() => {
     renderPrismMac()
     renderMermaid()
-
-    // 折叠代码行号bug
-    const observer = new MutationObserver(mutationsList => {
-      for (const m of mutationsList) {
-        if (m.target.nodeName === 'DETAILS') {
-          const preCodes = m.target.querySelectorAll('pre.notion-code')
-          for (const preCode of preCodes) {
-            Prism.plugins.lineNumbers.resize(preCode)
-          }
-        }
-      }
-    })
-    observer.observe(document.querySelector('#container'), { attributes: true, subtree: true })
   }, [])
   return <></>
 }
@@ -95,8 +86,6 @@ function renderPrismMac() {
   // 重新渲染之前检查所有的多余text
 
   try {
-    // setup autoloader
-    Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH
     Prism.highlightAll()
   } catch (err) {
     console.log('代码渲染', err)
@@ -115,6 +104,36 @@ function renderPrismMac() {
       }
     })
   }
+
+  // 折叠代码行号bug
+  if (BLOG.CODE_LINE_NUMBERS === 'true') {
+    fixCodeLineStyle()
+  }
+}
+
+/**
+ * 行号样式在首次渲染或被detail折叠后行高判断错误
+ * 在此手动resize计算
+ */
+const fixCodeLineStyle = () => {
+  const observer = new MutationObserver(mutationsList => {
+    for (const m of mutationsList) {
+      if (m.target.nodeName === 'DETAILS') {
+        const preCodes = m.target.querySelectorAll('pre.notion-code')
+        for (const preCode of preCodes) {
+          Prism.plugins.lineNumbers.resize(preCode)
+        }
+      }
+    }
+  })
+  observer.observe(document.querySelector('#container'), { attributes: true, subtree: true })
+  setTimeout(() => {
+    const preCodes = document.querySelectorAll('pre.notion-code')
+    for (const preCode of preCodes) {
+      console.log('code', preCode)
+      Prism.plugins.lineNumbers.resize(preCode)
+    }
+  }, 10)
 }
 
 export default PrismMac

lib/utils.js

@@ -7,7 +7,6 @@
  * @returns {Promise<unknown>}
  */
 export function loadExternalResource(url, type) {
-  console.log('加载', url, type)
   return new Promise((resolve, reject) => {
     let tag
 

public/css/prism-mac-style.css

@@ -9,11 +9,9 @@
   width: 100%;
   border-radius: 0.5rem;
   margin-bottom: 0.5rem;
-  /* @apply w-full rounded-lg  */
 }
 
 .toolbar-item{
-  /* @apply whitespace-nowrap */
   white-space: nowrap;
 }
 
@@ -22,7 +20,6 @@
 }
 
 pre[class*='language-'] {
-  @apply mt-0 mb-2 pt-6 !important;
   margin-top: 0rem !important;
   margin-bottom: 0rem !important;
   padding-top: 1.5rem !important;
@@ -30,9 +27,8 @@ pre[class*='language-'] {
 }
 
 .pre-mac {
-  /* @apply left-5 top-2 z-10 absolute */
   position: absolute;
-  left: 1.25rem;
+  left: 0.9rem;
   top: 0.5rem;
   z-index: 10;
 }
@@ -43,7 +39,6 @@ pre[class*='language-'] {
   border-radius: 50%;
   margin-right: 5px;
   float: left;
-  /* @apply float-left */
 }
 
 .pre-mac > span:nth-child(1) {