From ea5b56acc831f1a1fc31d570b57967a9b64d142b Mon Sep 17 00:00:00 2001 From: outfoxxed Date: Thu, 17 Oct 2024 01:03:12 -0700 Subject: [PATCH] change shiki dark theme and add light theme --- package.json | 1 + src/config/io/markdown.ts | 27 +++++++--- src/styles/css-config/code.css | 12 +++++ yarn.lock | 90 ++++++++++++++++++++++++++++++++++ 4 files changed, 124 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index d6abdce..9610a44 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@astrojs/solid-js": "^4.4.2", "@hbsnow/rehype-sectionize": "^1.0.7", "@pagefind/default-ui": "^1.1.1", + "@shikijs/rehype": "^1.22.0", "@types/node": "^20.14.11", "astro": "^4.15.9", "astro-breadcrumbs": "^2.3.1", diff --git a/src/config/io/markdown.ts b/src/config/io/markdown.ts index be7c059..31e0e07 100644 --- a/src/config/io/markdown.ts +++ b/src/config/io/markdown.ts @@ -11,6 +11,7 @@ import type { } from "@astrojs/markdown-remark"; import { createMarkdownProcessor } from "@astrojs/markdown-remark"; import { remarkAlert } from "remark-github-blockquote-alert"; +import rehypeShiki from "@shikijs/rehype"; import sectionize from "@hbsnow/rehype-sectionize"; import type { ShikiTransformer } from "shiki"; @@ -122,14 +123,28 @@ const shikiRewriteTypelinks: ShikiTransformer = { }; export const markdownConfig: AstroMarkdownOptions = { - syntaxHighlight: "shiki", - shikiConfig: { - theme: "material-theme-ocean", - wrap: true, - transformers: [shikiRewriteTypelinks], - }, + syntaxHighlight: false, remarkPlugins: [remarkParseAtTypes, [remarkAlert, { legacyTitle: true }]], rehypePlugins: [ + [rehypeShiki, { + themes: { + light: "slack-ochin", + dark: "slack-dark", + }, + colorReplacements: { + "slack-ochin": { + "#357b42": "#989eb9", // comments + "#b1108e": "#224bbb", // fields + }, + "slack-dark": { + "#222222": "#0f111a", // bg + "#6a9955": "#525666", // comments + }, + }, + defaultColor: false, + wrap: true, + transformers: [shikiRewriteTypelinks], + }], // FIXME: incompatible types between unified/Plugin and Astro/RehypePlugin [sectionize as RehypePlugin, { idPropertyName: "id" }], rehypeRewriteTypelinks, diff --git a/src/styles/css-config/code.css b/src/styles/css-config/code.css index 8044c7b..2b1c960 100644 --- a/src/styles/css-config/code.css +++ b/src/styles/css-config/code.css @@ -5,6 +5,18 @@ background-color: hsl(var(--blue) 85 35 / 0.1); } +.shiki, +.shiki span { + color: var(--shiki-light); + background-color: var(--shiki-light-bg); +} + +html.dark .shiki, +html.dark .shiki span { + color: var(--shiki-dark); + background-color: var(--shiki-dark-bg); +} + pre { padding: 1rem; border-radius: 0.618rem; diff --git a/yarn.lock b/yarn.lock index d137eb5..08f3a0c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1402,6 +1402,20 @@ __metadata: languageName: node linkType: hard +"@shikijs/core@npm:1.22.0": + version: 1.22.0 + resolution: "@shikijs/core@npm:1.22.0" + dependencies: + "@shikijs/engine-javascript": "npm:1.22.0" + "@shikijs/engine-oniguruma": "npm:1.22.0" + "@shikijs/types": "npm:1.22.0" + "@shikijs/vscode-textmate": "npm:^9.3.0" + "@types/hast": "npm:^3.0.4" + hast-util-to-html: "npm:^9.0.3" + checksum: 10c0/d663fee39180680ccb9ea8dd5abb397e953375989a4fd52fb65a2616388db21d1d0a715a68afae93c4b48f0e037bd0c3a600cd52fb8560461ba87e2102e00cd1 + languageName: node + linkType: hard + "@shikijs/engine-javascript@npm:1.20.0": version: 1.20.0 resolution: "@shikijs/engine-javascript@npm:1.20.0" @@ -1413,6 +1427,17 @@ __metadata: languageName: node linkType: hard +"@shikijs/engine-javascript@npm:1.22.0": + version: 1.22.0 + resolution: "@shikijs/engine-javascript@npm:1.22.0" + dependencies: + "@shikijs/types": "npm:1.22.0" + "@shikijs/vscode-textmate": "npm:^9.3.0" + oniguruma-to-js: "npm:0.4.3" + checksum: 10c0/f1a2c3c6ad5db549229dafe11a57bef2b0896e5c1b33dec15bd323e4e785dc469a277b088a89f774a66b30c8c62e9e5b76d3d485f46096dc290329aab33d92eb + languageName: node + linkType: hard + "@shikijs/engine-oniguruma@npm:1.20.0": version: 1.20.0 resolution: "@shikijs/engine-oniguruma@npm:1.20.0" @@ -1423,6 +1448,30 @@ __metadata: languageName: node linkType: hard +"@shikijs/engine-oniguruma@npm:1.22.0": + version: 1.22.0 + resolution: "@shikijs/engine-oniguruma@npm:1.22.0" + dependencies: + "@shikijs/types": "npm:1.22.0" + "@shikijs/vscode-textmate": "npm:^9.3.0" + checksum: 10c0/a57f2352dc35e6f3705348488c0ec2b91a99380489917bddc1d1444b775ba529fc99491ac0c16d0add6d2552ca9fd197e88bd47b0166d163bfc6a80345294452 + languageName: node + linkType: hard + +"@shikijs/rehype@npm:^1.22.0": + version: 1.22.0 + resolution: "@shikijs/rehype@npm:1.22.0" + dependencies: + "@shikijs/types": "npm:1.22.0" + "@types/hast": "npm:^3.0.4" + hast-util-to-string: "npm:^3.0.1" + shiki: "npm:1.22.0" + unified: "npm:^11.0.5" + unist-util-visit: "npm:^5.0.0" + checksum: 10c0/9c6d8cbd8e6deb4032fd1bda7934c26f8ebfca7805c7702cade3bf2eaeb5fa7237ece12eac2a66b96139866256aad3a70eddf4cfe4d94572d05c6ba9baf4be5f + languageName: node + linkType: hard + "@shikijs/types@npm:1.20.0": version: 1.20.0 resolution: "@shikijs/types@npm:1.20.0" @@ -1433,6 +1482,16 @@ __metadata: languageName: node linkType: hard +"@shikijs/types@npm:1.22.0": + version: 1.22.0 + resolution: "@shikijs/types@npm:1.22.0" + dependencies: + "@shikijs/vscode-textmate": "npm:^9.3.0" + "@types/hast": "npm:^3.0.4" + checksum: 10c0/220ba56b046dd07cb5e12c02f061e926129d5295fba60c4910a45d65312cdcbcc120329ec550195fdb85ab60ae9e3af31430bffce3ceba80b30d21e32467c013 + languageName: node + linkType: hard + "@shikijs/vscode-textmate@npm:^9.2.2": version: 9.2.2 resolution: "@shikijs/vscode-textmate@npm:9.2.2" @@ -1440,6 +1499,13 @@ __metadata: languageName: node linkType: hard +"@shikijs/vscode-textmate@npm:^9.3.0": + version: 9.3.0 + resolution: "@shikijs/vscode-textmate@npm:9.3.0" + checksum: 10c0/6aa80798b7d7f8be8029bb397ce1b9b75c0d0963d6aa444b9ae165595ceee931cf3767ca1681ba71a6e27484eeccab584bd38db3420da477f1a8d745040b1b1f + languageName: node + linkType: hard + "@sinclair/typebox@npm:^0.27.8": version: 0.27.8 resolution: "@sinclair/typebox@npm:0.27.8" @@ -4336,6 +4402,15 @@ __metadata: languageName: node linkType: hard +"hast-util-to-string@npm:^3.0.1": + version: 3.0.1 + resolution: "hast-util-to-string@npm:3.0.1" + dependencies: + "@types/hast": "npm:^3.0.0" + checksum: 10c0/b5fa1912a6ba6131affae52a0f4394406c4c0d23c2b0307f1d69988f1030c7bb830289303e67c5ad8f674f5f23a454c1dcd492c39e45a22c1f46d3c9bce5bd0c + languageName: node + linkType: hard + "hast-util-to-text@npm:^4.0.2": version: 4.0.2 resolution: "hast-util-to-text@npm:4.0.2" @@ -6316,6 +6391,7 @@ __metadata: "@biomejs/biome": "npm:^1.8.3" "@hbsnow/rehype-sectionize": "npm:^1.0.7" "@pagefind/default-ui": "npm:^1.1.1" + "@shikijs/rehype": "npm:^1.22.0" "@types/node": "npm:^20.14.11" astro: "npm:^4.15.9" astro-breadcrumbs: "npm:^2.3.1" @@ -6837,6 +6913,20 @@ __metadata: languageName: node linkType: hard +"shiki@npm:1.22.0": + version: 1.22.0 + resolution: "shiki@npm:1.22.0" + dependencies: + "@shikijs/core": "npm:1.22.0" + "@shikijs/engine-javascript": "npm:1.22.0" + "@shikijs/engine-oniguruma": "npm:1.22.0" + "@shikijs/types": "npm:1.22.0" + "@shikijs/vscode-textmate": "npm:^9.3.0" + "@types/hast": "npm:^3.0.4" + checksum: 10c0/750ee1751340ad65368921a4a4f29249b9632c8b547a0c4052eb8a467be0da8b3af7a5e8751482a9e387f67053f8c8a7e5f50bf1be6fcf6f91ed3952bd20965e + languageName: node + linkType: hard + "shiki@npm:^1.10.3, shiki@npm:^1.16.2": version: 1.20.0 resolution: "shiki@npm:1.20.0"