From 7524fc325677654a1bf4d80eecb4c92f870bb511 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sat, 24 Dec 2022 13:09:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=B8=BB=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/NotionPage.js      |  3 +++
 components/PrismMac.js        |  3 ++-
 components/WalineComponent.js |  1 +
 pages/_app.js                 |  9 ++-------
 styles/notion.css             | 21 ++++++++++++++++++++-
 styles/prism-mac-style.css    | 26 +++++---------------------
 6 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/components/NotionPage.js b/components/NotionPage.js
index 8739917f..7f46e6f6 100644
--- a/components/NotionPage.js
+++ b/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) => {
     // 化学方程式
diff --git a/components/PrismMac.js b/components/PrismMac.js
index 956e9f73..11673d46 100644
--- a/components/PrismMac.js
+++ b/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 => {
diff --git a/components/WalineComponent.js b/components/WalineComponent.js
index c3da56ab..22d6ceee 100644
--- a/components/WalineComponent.js
+++ b/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
diff --git a/pages/_app.js b/pages/_app.js
index 200a6b43..6148cc1a 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -9,15 +9,10 @@ import '@/styles/notion.css' //  重写部分样式
 // used for collection views (optional)
 // import 'rc-dropdown/assets/index.css'
 // import 'prismjs/themes/prism-tomorrow.min.css'
-import 'prism-themes/themes/prism-one-dark.css'
+// import 'prism-themes/themes/prism-one-dark.css'
+// import 'prism-themes/themes/prism-one-light.css'
 import '@/styles/prism-mac-style.css' //  將 Prism 加入 mac 視窗樣式
 
-// import 'react-notion-x/build/third-party/equation.css'
-import 'katex/dist/katex.min.css'
-
-// waline 评论插件
-import '@waline/client/dist/waline.css'
-
 import dynamic from 'next/dynamic'
 import { GlobalContextProvider } from '@/lib/global'
 import { DebugPanel } from '@/components/DebugPanel'
diff --git a/styles/notion.css b/styles/notion.css
index d55d8456..5663f15a 100644
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -737,7 +737,8 @@ svg.notion-page-icon {
   width: 100%;
   padding: 30px 16px 30px 20px;
   margin: 4px 0;
-  border-radius: 10px;
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
   tab-size: 2;
   display: block;
   box-sizing: border-box;
@@ -1996,4 +1997,22 @@ thead, tbody tr {
 
 .notion-collection-card{
     @apply dark:hover:text-gray-200
+}
+
+.notion-code-copy{
+    display: none;
+}
+
+
+pre[class*="language-mermaid"] {
+    @apply bg-gray-50 dark:bg-gray-200 !important;
+}
+
+/* mermaid 原文隐藏 */
+code.language-mermaid {
+    display:none
+}
+
+pre.notion-code.line-numbers{
+    margin-bottom: 0 !important
 }
\ No newline at end of file
diff --git a/styles/prism-mac-style.css b/styles/prism-mac-style.css
index ff2472a7..9498191a 100644
--- a/styles/prism-mac-style.css
+++ b/styles/prism-mac-style.css
@@ -3,9 +3,10 @@
  **/
 .code-toolbar {
   position: relative;
-  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
+  /* box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4); */
   padding-bottom: 0 !important;
-  @apply mb-8 mt-4 pt-6 w-full rounded-lg bg-black
+  /* @apply mb-8 mt-4 pt-6 w-full rounded-lg bg-black */
+  @apply w-full rounded-lg 
 }
 
 .toolbar {
@@ -27,10 +28,10 @@
   margin-top: -0.1rem;
 }
 
-.notion-code > code[class*='language-'],
+/* .notion-code > code[class*='language-'],
 pre[class*='language-'] {
   background: black;
-}
+} */
 
 .pre-mac {
     position: absolute;
@@ -55,20 +56,3 @@ pre[class*='language-'] {
 .pre-mac > span:nth-child(3) {
   background: limegreen;
 }
-
-.notion-code-copy{
-  display: none;
-}
-
-pre[class*="language-mermaid"] {
-  @apply bg-gray-50 dark:bg-gray-200 !important;
-}
-
-/* mermaid 原文隐藏 */
-code.language-mermaid {
-  display:none
-}
-
-pre.notion-code.line-numbers{
-    margin-bottom: 0 !important
-}
\ No newline at end of file