Merge pull request #748 from tangly1024/feat-code-custom

Feat code custom

.env.local

@@ -1,2 +1,2 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=3.9.2
+NEXT_PUBLIC_VERSION=3.9.3

blog.config.js

@@ -45,9 +45,11 @@ const BLOG = {
 
   BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX
 
-  // PrismJs CDN
+  // PrismJs 代码相关
   PRISM_JS_PATH: 'https://npm.elemecdn.com/prismjs@1.29.0/components/',
-  CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || 'false',
+  PRISM_THEME_PATH: 'https://npm.elemecdn.com/prism-themes/themes/prism-a11y-dark.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes
+  CODE_MAC_BAR: true, // 代码左上角显示mac的红黄绿图标
+  CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || 'false', // 是否显示行号
 
   BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
   BACKGROUND_DARK: '#000000', // use hex value, don't forget '#'

components/ExternalScript.js

@@ -18,6 +18,9 @@ const ExternalScript = () => {
         loadExternalResource(url, 'css')
       }
     }
+    // 静态导入本地自定义样式
+    loadExternalResource('/css/custom.css', 'css')
+    loadExternalResource('/js/custom.js', 'js')
   }, [])
   return null
 }

components/NotionPage.js

@@ -26,7 +26,7 @@ const Pdf = dynamic(
 // https://github.com/txs
 // import PrismMac from '@/components/PrismMac'
 const PrismMac = dynamic(() => import('@/components/PrismMac'), {
-  ssr: false
+  ssr: true
 })
 
 const Collection = dynamic(() =>

components/PrismMac.js

@@ -10,12 +10,20 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
 import 'prismjs/plugins/autoloader/prism-autoloader'
 // mermaid图
 import BLOG from '@/blog.config'
+import { isBrowser, loadExternalResource } from '@/lib/utils'
 
 /**
  * @author https://github.com/txs/
  * @returns
  */
 const PrismMac = () => {
+  if (isBrowser()) {
+    loadExternalResource(BLOG.PRISM_THEME_PATH, 'css')
+    if (BLOG.CODE_MAC_BAR) {
+      loadExternalResource('/css/prism-mac-style.css', 'css')
+    }
+  }
+
   React.useEffect(() => {
     renderPrismMac()
     renderMermaid()

package.json

@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "3.9.2",
+  "version": "3.9.3",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "repository": {

pages/_app.js

@@ -9,9 +9,6 @@ import '@/styles/globals.css'
 import 'react-notion-x/src/styles.css'
 import '@/styles/notion.css' //  重写部分样式
 
-// 代码样式  更多样式参考： https://github.com/PrismJS/prism-themes
-import 'prism-themes/themes/prism-material-light.css'
-
 // local webfont @see https://fontsource.org/
 import '@fontsource/noto-sans-sc'
 import '@fontsource/noto-serif-sc'

public/css/custom.css

@@ -0,0 +1,2 @@
+/* 静态文件导入 自定义样式*/
+

public/css/prism-mac-style.css

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

public/js/custom.js

@@ -0,0 +1 @@
+// 这里编写自定义js脚本；将被静态引入到页面中

styles/notion.css

@@ -1999,5 +1999,5 @@ code.language-mermaid {
 }
 
 .code-toolbar{
-  @apply w-full;
+  @apply w-full shadow-md;
 }