update: code block style

.vscode/settings.json

@@ -107,6 +107,7 @@
     "Segoe",
     "Sentimentalisme",
     "Servetus",
+    "shiki",
     "Sobre",
     "srcset",
     "STIX",

astro.config.ts

@@ -7,7 +7,6 @@ import { defineConfig } from 'astro/config'
 import rehypeExternalLinks from 'rehype-external-links'
 import rehypeKatex from 'rehype-katex'
 import remarkMath from 'remark-math'
-import remarkSectionize from 'remark-sectionize'
 import UnoCSS from 'unocss/astro'
 import { themeConfig } from './src/config'
 import { langMap } from './src/i18n/config'
@@ -54,7 +53,6 @@ export default defineConfig({
   markdown: {
     remarkPlugins: [
       remarkMath,
-      remarkSectionize,
       remarkReadingTime,
     ],
     rehypePlugins: [
@@ -68,6 +66,13 @@ export default defineConfig({
         },
       ],
     ],
+    // available themes: https://shiki.style/themes
+    shikiConfig: {
+      themes: {
+        light: 'one-light',
+        dark: 'one-dark-pro',
+      },
+    },
   },
   devToolbar: {
     enabled: false,

package.json

@@ -17,6 +17,7 @@
     "@astrojs/partytown": "^2.1.4",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "^3.3.0",
+    "@waline/client": "^3.5.6",
     "astro": "^5.5.3",
     "astro-compress": "^2.3.6",
     "astro-og-canvas": "^0.7.0",
@@ -28,7 +29,6 @@
     "rehype-external-links": "^3.0.0",
     "rehype-katex": "^7.0.1",
     "remark-math": "^6.0.0",
-    "remark-sectionize": "^2.1.0",
     "sanitize-html": "^2.15.0"
   },
   "devDependencies": {
@@ -40,7 +40,6 @@
     "@unocss/eslint-plugin": "66.1.0-beta.6",
     "@unocss/preset-attributify": "66.1.0-beta.6",
     "@unocss/reset": "66.1.0-beta.6",
-    "@waline/client": "^3.5.6",
     "astro-eslint-parser": "^1.2.1",
     "eslint": "^9.22.0",
     "eslint-plugin-astro": "^1.3.1",
@@ -53,6 +52,6 @@
     "unocss-preset-theme": "^0.14.1"
   },
   "lint-staged": {
-    "*.{js,ts,jsx,tsx,astro}": "eslint --fix"
+    "*.{js,ts,astro}": "eslint --fix"
   }
 }

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       '@astrojs/sitemap':
         specifier: ^3.3.0
         version: 3.3.0
+      '@waline/client':
+        specifier: ^3.5.6
+        version: 3.5.6(typescript@5.8.2)
       astro:
         specifier: ^5.5.3
         version: 5.5.3(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.36.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
@@ -53,9 +56,6 @@ importers:
       remark-math:
         specifier: ^6.0.0
         version: 6.0.0
-      remark-sectionize:
-        specifier: ^2.1.0
-        version: 2.1.0
       sanitize-html:
         specifier: ^2.15.0
         version: 2.15.0
@@ -84,9 +84,6 @@ importers:
       '@unocss/reset':
         specifier: 66.1.0-beta.6
         version: 66.1.0-beta.6
-      '@waline/client':
-        specifier: ^3.5.6
-        version: 3.5.6(typescript@5.8.2)
       astro-eslint-parser:
         specifier: ^1.2.1
         version: 1.2.1
@@ -3013,9 +3010,6 @@ packages:
   remark-rehype@11.1.1:
     resolution: {integrity: sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==}
 
-  remark-sectionize@2.1.0:
-    resolution: {integrity: sha512-R/pHt1RLYrEqrbwOVXx8HnvvwOg+mxg8pE4kIWpIYE3/CuZhU8/PAx/0y1BbHWUA0jmTLTeWpUlDrS/B0pyd0g==}
-
   remark-smartypants@3.0.2:
     resolution: {integrity: sha512-ILTWeOriIluwEvPjv67v7Blgrcx+LZOkAUVtKI3putuhlZm84FnqDORNXPPm+HY3NdZOMhyDwZ1E+eZB/Df5dA==}
     engines: {node: '>=16.0.0'}
@@ -3348,15 +3342,9 @@ packages:
   unified@11.0.5:
     resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
 
-  unist-util-find-after@4.0.1:
-    resolution: {integrity: sha512-QO/PuPMm2ERxC6vFXEPtmAutOopy5PknD+Oq64gGwxKtk4xwo9Z97t9Av1obPmGU0IyTa6EKYUfTrK2QJS3Ozw==}
-
   unist-util-find-after@5.0.0:
     resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==}
 
-  unist-util-is@5.2.1:
-    resolution: {integrity: sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==}
-
   unist-util-is@6.0.0:
     resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
 
@@ -3378,15 +3366,9 @@ packages:
   unist-util-visit-children@3.0.0:
     resolution: {integrity: sha512-RgmdTfSBOg04sdPcpTSD1jzoNBjt9a80/ZCzp5cI9n1qPzLZWF9YdvWGN2zmTumP1HWhXKdUWexjy/Wy/lJ7tA==}
 
-  unist-util-visit-parents@5.1.3:
-    resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==}
-
   unist-util-visit-parents@6.0.1:
     resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
 
-  unist-util-visit@4.1.2:
-    resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==}
-
   unist-util-visit@5.0.0:
     resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
 
@@ -7423,11 +7405,6 @@ snapshots:
       unified: 11.0.5
       vfile: 6.0.3
 
-  remark-sectionize@2.1.0:
-    dependencies:
-      unist-util-find-after: 4.0.1
-      unist-util-visit: 4.1.2
-
   remark-smartypants@3.0.2:
     dependencies:
       retext: 9.0.0
@@ -7822,20 +7799,11 @@ snapshots:
       trough: 2.2.0
       vfile: 6.0.3
 
-  unist-util-find-after@4.0.1:
-    dependencies:
-      '@types/unist': 2.0.11
-      unist-util-is: 5.2.1
-
   unist-util-find-after@5.0.0:
     dependencies:
       '@types/unist': 3.0.3
       unist-util-is: 6.0.0
 
-  unist-util-is@5.2.1:
-    dependencies:
-      '@types/unist': 2.0.11
-
   unist-util-is@6.0.0:
     dependencies:
       '@types/unist': 3.0.3
@@ -7866,22 +7834,11 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
-  unist-util-visit-parents@5.1.3:
-    dependencies:
-      '@types/unist': 2.0.11
-      unist-util-is: 5.2.1
-
   unist-util-visit-parents@6.0.1:
     dependencies:
       '@types/unist': 3.0.3
       unist-util-is: 6.0.0
 
-  unist-util-visit@4.1.2:
-    dependencies:
-      '@types/unist': 2.0.11
-      unist-util-is: 5.2.1
-      unist-util-visit-parents: 5.1.3
-
   unist-util-visit@5.0.0:
     dependencies:
       '@types/unist': 3.0.3

src/config.ts

@@ -35,9 +35,6 @@ export const themeConfig: ThemeConfig = {
       secondary: 'oklch(40% 0.005 298)',
       // background color
       background: 'oklch(96% 0.005 298)',
-      // code block theme
-      // available themes: https://shiki.style/themes
-      codeTheme: 'one-light ',
     },
     dark: {
       // primary color
@@ -49,9 +46,6 @@ export const themeConfig: ThemeConfig = {
       secondary: 'oklch(77% 0.005 298)',
       // background color
       background: 'oklch(22% 0.005 298)',
-      // code block theme
-      // available themes: https://shiki.style/themes
-      codeTheme: 'one-dark-pro',
     },
   },
   // COLOR SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END

src/content/posts/Markdown Style Guide-en.md

@@ -5,6 +5,7 @@ updated: 2025-03-12
 tags: ["Guide"]
 draft: true
 pin: 1
+lang: en
 abbrlink: markdown-style-guide
 ---
 
@@ -118,16 +119,32 @@ we can use 3 backticks ``` in new line and write snippet and close with 3 backti
 ### Output
 
 ```html
-<!doctype html>
+---
-<html lang="en">
+// Your component script here!
-  <head>
+import Banner from '../components/Banner.astro';
-    <meta charset="utf-8" />
+import ReactPokemonComponent from '../components/ReactPokemonComponent.jsx';
-    <title>Example HTML5 Document</title>
+const myFavoritePokemon = [/* ... */];
-  </head>
+const { title } = Astro.props;
-  <body>
+---
-    <p>Test</p>
+<!-- HTML comments supported! -->
-  </body>
+{/* JS comment syntax is also valid! */}
-</html>
+
+<Banner />
+<h1>Hello, world!</h1>
+
+<!-- Use props and other variables from the component script: -->
+<p>{title}</p>
+
+<!-- Include other UI framework components with a `client:` directive to hydrate: -->
+<ReactPokemonComponent client:visible />
+
+<!-- Mix HTML with JavaScript expressions, similar to JSX: -->
+<ul>
+  {myFavoritePokemon.map((data) => <li>{data.name}</li>)}
+</ul>
+
+<!-- Use a template directive to build class names from multiple strings or even objects! -->
+<p class:list={["add", "dynamic", {classNames: true}]} />
 ```
 
 ## List Types

src/styles/heti.css

@@ -82,7 +82,8 @@
 .heti p:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)) {
 	text-align:start
 }
-/* .heti pre {
+.heti pre {
+  --at-apply: 'bg-primary/3!';
 	margin-block-start:12px;
 	margin-block-end:12px;
 	margin-inline-start:0;
@@ -95,20 +96,19 @@
 	white-space:pre;
 	word-wrap:normal;
 	border-radius:4px;
-	background-color:rgba(0,0,0,.054)
 }
-@media(prefers-color-scheme:dark) {
+html.dark .heti pre {
-	.heti pre {
+  --at-apply: 'bg-primary/3!';
-	background-color:rgba(255,255,255,.054)
 }
-}.heti pre code {
+html.dark .astro-code span {
+  --at-apply: 'bg-primary/0!';
+}
+.heti pre code {
 	margin:0;
 	padding:0;
 	border:0;
 	border-radius:0;
-	background-color:rgba(0,0,0,0);
+}
-	color:inherit
-} */
 .heti a,.heti abbr,.heti code,.heti heti-spacing,.heti [lang=en-US] {
 	letter-spacing:normal
 }

src/types/index.d.ts

@@ -20,13 +20,11 @@ export interface ThemeConfig {
       primary: string
       secondary: string
       background: string
-      codeTheme: string
     }
     dark: {
       primary: string
       secondary: string
       background: string
-      codeTheme: string
     }
   }