代码主题

components/NotionPage.js

@@ -7,6 +7,9 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { Code } from 'react-notion-x/build/third-party/code'
 
+import 'prism-themes/themes/prism-material-light.css'
+import 'katex/dist/katex.min.css'
+
 const Equation = dynamic(() =>
   import('react-notion-x/build/third-party/equation').then(async (m) => {
     // 化学方程式

components/PrismMac.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import Prism from 'prismjs'
 import 'prismjs/plugins/toolbar/prism-toolbar'
+import 'prismjs/plugins/toolbar/prism-toolbar.min.css'
 import 'prismjs/plugins/show-language/prism-show-language'
 import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard'
 import 'prismjs/plugins/line-numbers/prism-line-numbers'
@@ -70,7 +71,6 @@ const renderMermaid = async() => {
 
 function renderPrismMac() {
   const container = document?.getElementById('container-inner')
-  const codeToolBars = container?.getElementsByClassName('code-toolbar')
 
   // Add line numbers
   const codeBlocks = container?.getElementsByTagName('pre')
@@ -93,6 +93,7 @@ function renderPrismMac() {
     console.log('代码渲染', err)
   }
 
+  const codeToolBars = container?.getElementsByClassName('code-toolbar')
   // Add pre-mac element for Mac Style UI
   if (codeToolBars) {
     Array.from(codeToolBars).forEach(item => {

components/WalineComponent.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { init } from '@waline/client'
 import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
+import '@waline/client/dist/waline.css'
 
 const path = ''
 let waline = null