From 928328744291f093b3211116d7edbf22cf0f24f1 Mon Sep 17 00:00:00 2001 From: radishzzz Date: Thu, 20 Mar 2025 05:31:26 +0000 Subject: [PATCH] update: code block style --- .vscode/settings.json | 1 + astro.config.ts | 9 +++- package.json | 5 +- pnpm-lock.yaml | 49 ++------------------ src/config.ts | 6 --- src/content/posts/Markdown Style Guide-en.md | 37 +++++++++++---- src/styles/heti.css | 18 +++---- src/types/index.d.ts | 2 - 8 files changed, 49 insertions(+), 78 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 5fe01f2..4b246df 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -107,6 +107,7 @@ "Segoe", "Sentimentalisme", "Servetus", + "shiki", "Sobre", "srcset", "STIX", diff --git a/astro.config.ts b/astro.config.ts index 4489d6f..fcde578 100644 --- a/astro.config.ts +++ b/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, diff --git a/package.json b/package.json index 0066e52..bdd90d5 100644 --- a/package.json +++ b/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" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bce6273..c938e44 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/config.ts b/src/config.ts index 09158a4..bb63fe6 100644 --- a/src/config.ts +++ b/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 diff --git a/src/content/posts/Markdown Style Guide-en.md b/src/content/posts/Markdown Style Guide-en.md index 773dd4e..2d85f3c 100644 --- a/src/content/posts/Markdown Style Guide-en.md +++ b/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 - - - - - Example HTML5 Document - - -

Test

- - +--- +// Your component script here! +import Banner from '../components/Banner.astro'; +import ReactPokemonComponent from '../components/ReactPokemonComponent.jsx'; +const myFavoritePokemon = [/* ... */]; +const { title } = Astro.props; +--- + +{/* JS comment syntax is also valid! */} + + +

Hello, world!

+ + +

{title}

+ + + + + +
    + {myFavoritePokemon.map((data) =>
  • {data.name}
    • )} +
+ + +

``` ## List Types diff --git a/src/styles/heti.css b/src/styles/heti.css index 7d3ae50..e8a2f67 100644 --- a/src/styles/heti.css +++ b/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) { - .heti pre { - background-color:rgba(255,255,255,.054) +html.dark .heti pre { + --at-apply: 'bg-primary/3!'; } -}.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 } diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 44c46e7..7daec87 100644 --- a/src/types/index.d.ts +++ b/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 } }