feat: shiki syntax highlight

eallion · Jul 19, 2024 · e328129 · e328129
1 parent 9c43f20
commit e328129
Show file tree

Hide file tree

Showing 20 changed files with 3,876 additions and 443 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -29,22 +29,25 @@ jobs:
         run: |
           hugo --cleanDestinationDir --forceSyncStatic --gc --ignoreCache --minify --enableGitInfo --templateMetrics --templateMetricsHints
 
-      - name: Ready for Next.js
+      - name: Setup Node LTS
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: yarn
+
+      - name: Install and run Shiki
         run: |
-          mkdir next
-          cp public next/public -rf
-          cp pages next/pages -rf
-          cp vercel.json next/
-          cp next.config.js next/
-          cp package.json next/
+          export NODE_OPTIONS="--max_old_space_size=7168"
+          yarn install
+          yarn run syntax || true
 
       - name: Deploy to GitHub Pages
         uses: peaceiris/actions-gh-pages@v3
         with:
           personal_token: ${{ secrets.personal_token }}
           external_repository: eallion/blog
           publish_branch: main
-          publish_dir: ./next
+          publish_dir: ./public
           # destination_dir: public
           allow_empty_commit: true
           # commit_message: ${{ GitHub.event.head_commit.message }}
@@ -105,15 +108,15 @@ jobs:
       #     PATHS: "https://eallion.com/,https://www.eallion.com/"
       #     FLUSH_TYPE: "delete" # optional
 
-      - name: Install TencentCloud CLI
-        run: |
-          pip install tccli
+      # - name: Install TencentCloud CLI
+      #   run: |
+      #     pip install tccli
 
-      - name: Configure Tccli Credentials
-        run: |
-          tccli configure set secretId ${{ secrets.TENCENTCLOUD_TEO_SECRET_ID }}
-          tccli configure set secretKey ${{ secrets.TENCENTCLOUD_TEO_SECRET_KEY }}
+      # - name: Configure Tccli Credentials
+      #   run: |
+      #     tccli configure set secretId ${{ secrets.TENCENTCLOUD_TEO_SECRET_ID }}
+      #     tccli configure set secretKey ${{ secrets.TENCENTCLOUD_TEO_SECRET_KEY }}
 
-      - name: Create Tencent Cloud TEO Purge Task
-        run: |
-          tccli teo CreatePurgeTask --cli-unfold-argument --ZoneId ${{ secrets.TENCENTCLOUD_TEO_ZONEID }} --Type purge_prefix --Method invalidate --Targets 'https://www.eallion.com/'
+      # - name: Create Tencent Cloud TEO Purge Task
+      #   run: |
+      #     tccli teo CreatePurgeTask --cli-unfold-argument --ZoneId ${{ secrets.TENCENTCLOUD_TEO_ZONEID }} --Type purge_prefix --Method invalidate --Targets 'https://www.eallion.com/'
diff --git a/.rehyperc b/.rehyperc
@@ -0,0 +1,13 @@
+{
+    "plugins": [
+        [
+            "@shikijs/rehype",
+            {
+                "themes": {
+                    "light": "github-light",
+                    "dark": "github-dark-dimmed"
+                }
+            }
+        ]
+    ]
+}
diff --git a/Makefile b/Makefile
@@ -0,0 +1,6 @@
+.DEFAULT_GOAL := build
+
+.PHONY: build
+build:
+    hugo --cleanDestinationDir --forceSyncStatic --gc --ignoreCache --minify --enableGitInfo
+    npx rehype-cli public -o
diff --git a/README.md b/README.md
@@ -94,7 +94,7 @@ git submodule update --init --recursive
 
 ```diff
 - git submodule update --remote --merge
-+ pnpm update
++ pnpm theme
 ```
 
 Blowfish 编译 TailwindCSS 的 main.css ，位于 [assets/css/compiled/main.css](https://github.com/eallion/eallion.com/blob/main/assets/css/compiled/main.css)：

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
@@ -14,7 +14,7 @@ body.zen-mode-enable {
   }
 }
 
-/*! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v3.4.6 | MIT License | https://tailwindcss.com */
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -2282,11 +2282,6 @@ select {
   gap:2px
 }
 
-.gap-x-2 {
-  -moz-column-gap:0.5rem;
-       column-gap:0.5rem
-}
-
 .gap-x-2\.5 {
   -moz-column-gap:0.625rem;
        column-gap:0.625rem
@@ -3169,19 +3164,19 @@ select {
 .backdrop-blur {
   --tw-backdrop-blur:blur(8px);
   -webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-          backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
+  backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
 }
 
 .backdrop-blur-2xl {
   --tw-backdrop-blur:blur(40px);
   -webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-          backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
+  backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
 }
 
 .backdrop-blur-sm {
   --tw-backdrop-blur:blur(4px);
   -webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-          backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
+  backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
 }
 
 .transition {
@@ -5740,10 +5735,6 @@ pre {
     left:0px
   }
 
-  .lg\:top-10 {
-    top:2.5rem
-  }
-
   .lg\:top-\[140px\] {
     top:140px
   }

diff --git a/assets/css/custom.css b/assets/css/custom.css
@@ -6,6 +6,16 @@
     --media-bg-color-cover: rgba(0, 0, 0, 80%);
 }
 
+html.dark .shiki,
+html.dark .shiki span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+    /* 可选，用于定义字体样式 */
+    /* font-style: var(--shiki-dark-font-style) !important; */
+    /* font-weight: var(--shiki-dark-font-weight) !important; */
+    /* text-decoration: var(--shiki-dark-text-decoration) !important; */
+}
+
 .bg-yellow-600 {
     background-color: #ca8a04;
 }

diff --git a/config/_default/markup.toml b/config/_default/markup.toml
@@ -7,7 +7,7 @@
   hardWraps = true
 
 [highlight]
-  codeFences = true
+  codeFences = false
   guessSyntax = true
   lineNos = false
   lineNumbersInTable = true

diff --git a/next.config.js b/next.config.js