From 7524fc325677654a1bf4d80eecb4c92f870bb511 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Sat, 24 Dec 2022 13:09:12 +0800 Subject: [PATCH 1/2] =?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 From d6c77bbbafc9d5de5d8f5133f7747b6d07340aa6 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Sat, 24 Dec 2022 17:08:36 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/NotionPage.js | 1 - pages/_app.js | 17 ++++++------ styles/notion.css | 53 +++++++------------------------------- styles/prism-mac-style.css | 25 +++++------------- 4 files changed, 23 insertions(+), 73 deletions(-) diff --git a/components/NotionPage.js b/components/NotionPage.js index 7f46e6f6..429a6853 100644 --- a/components/NotionPage.js +++ b/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(() => diff --git a/pages/_app.js b/pages/_app.js index 6148cc1a..451296f2 100644 --- a/pages/_app.js +++ b/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 }) diff --git a/styles/notion.css b/styles/notion.css index 5663f15a..e7ab6173 100644 --- a/styles/notion.css +++ b/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 -} \ No newline at end of file diff --git a/styles/prism-mac-style.css b/styles/prism-mac-style.css index 9498191a..09e8dcfa 100644 --- a/styles/prism-mac-style.css +++ b/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