代码样式

components/NotionPage.js

@@ -7,7 +7,6 @@ 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(() =>

pages/_app.js

@@ -1,24 +1,23 @@
 import BLOG from 'blog.config'
+import React from 'react'
+import dynamic from 'next/dynamic'
+
 import 'animate.css'
 import '@/styles/globals.css'
-// custom
+
 // core styles shared by all of react-notion-x (required)
 import 'react-notion-x/src/styles.css'
 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-light.css'
-import '@/styles/prism-mac-style.css' //  將 Prism 加入 mac 視窗樣式
+// 代码样式  更多样式参考： https://github.com/PrismJS/prism-themes
+import 'prism-themes/themes/prism-material-light.css'
+
+// import '@/styles/prism-mac-style.css' // code 左上角显示mac的红黄绿图标
 
-import dynamic from 'next/dynamic'
 import { GlobalContextProvider } from '@/lib/global'
 import { DebugPanel } from '@/components/DebugPanel'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { Fireworks } from '@/components/Fireworks'
-import React from 'react'
 import { loadExternalResource } from '@/lib/utils'
 
 const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })

styles/notion.css

@@ -733,19 +733,25 @@ svg.notion-page-icon {
   font-size: 85%;
 }
 
+pre[class*='language-'] {
+  line-height: inherit;
+}
+
+code[class*='language-'] {
+  background: unset !important;
+}
+  
 .notion-code {
-  width: 100%;
   padding: 30px 16px 30px 20px;
-  margin: 4px 0;
   border-bottom-right-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
   tab-size: 2;
   display: block;
   box-sizing: border-box;
   overflow: auto;
-  background: #272822;
   font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier,
     monospace;
+  @apply w-full mb-4 dark:bg-black;
 }
 
 .notion-column {
@@ -1666,14 +1672,6 @@ svg + .notion-page-title-text {
   @apply dark:text-black
 }
 
-.notion-code > code {
-  color: unset;
-}
-
-pre[class*='language-'] {
-  line-height: inherit;
-}
-
 .notion-bookmark:hover {
   @apply border-blue-400;
 }
@@ -1911,35 +1909,6 @@ pre[class*='language-'] {
  width: 100% !important;
 }
 
-.pre-mac {
-  position: relative;
-  margin-top: -7px;
-  top: 21px;
-  left: 10px;
-  width: 100px;
-  z-index: 99;
-}
-
-.pre-mac > span {
-  float: left;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  margin-right: 5px;
-}
-
-.pre-mac > span:nth-child(1) {
-  background: red;
-}
-
-.pre-mac > span:nth-child(2) {
-  background: sandybrown;
-}
-
-.pre-mac > span:nth-child(3) {
-  background: limegreen;
-}
-
 .notion-asset-wrapper-pdf > div {
     display: block !important;
 }
@@ -2012,7 +1981,3 @@ pre[class*="language-mermaid"] {
 code.language-mermaid {
     display:none
 }
-
-pre.notion-code.line-numbers{
-    margin-bottom: 0 !important
-}

styles/prism-mac-style.css

@@ -3,23 +3,11 @@
  **/
 .code-toolbar {
   position: relative;
-  /* box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4); */
+  padding-top: 0 !important;
   padding-bottom: 0 !important;
-  /* @apply mb-8 mt-4 pt-6 w-full rounded-lg bg-black */
   @apply w-full rounded-lg 
 }
 
-.toolbar {
-  position: absolute;
-  margin-left: 100%;
-  top: 8px;
-  right: 4px;
-  display: flex;
-  flex-direction: row;
-  font-size: 0.8rem;
-  line-height: 1rem;
-}
-
 .toolbar-item{
   @apply whitespace-nowrap
 }
@@ -28,18 +16,17 @@
   margin-top: -0.1rem;
 }
 
-/* .notion-code > code[class*='language-'],
 pre[class*='language-'] {
-  background: black;
-} */
+  @apply mt-0 mb-2 pt-6 !important;
+}
 
 .pre-mac {
-    position: absolute;
-    left: 15px;
-    @apply z-10 top-4 left-3
+  @apply left-5 top-2 z-10 absolute
 }
 
 .pre-mac > span {
+  width: 10px;
+  height: 10px;
   border-radius: 50%;
   margin-right: 5px;
   @apply float-left