fix codeblock styles

astro.config.mjs

@@ -8,7 +8,14 @@ import { defineConfig } from "astro/config";
 export default defineConfig({
 	site: "https://ghall.space",
 	output: "static",
-
+	markdown: {
+		shikiConfig: {
+			themes: {
+				light: "github-light",
+				dark: "github-dark",
+			},
+		},
+	},
 	integrations: [mdx(), alpinejs({ entrypoint: "/src/entrypoint" })],
 	redirects: {
 		"/posts/[...slug]": "/blog/[...slug]",

biome.json

@@ -39,6 +39,9 @@
 			"includes": ["**/*.svelte", "**/*.astro", "**/*.vue"],
 			"linter": {
 				"rules": {
+					"complexity": {
+						"noImportantStyles": "off"
+					},
 					"style": {
 						"useConst": "off",
 						"useImportType": "off"

src/global.css

@@ -136,3 +136,19 @@ kbd {
 .icon-button > svg {
 	color: var(--text);
 }
+
+/* shiki */
+
+.astro-code,
+.astro-code span {
+	background-color: var(--background) !important;
+	/* Optional, if you also want font styles */
+	font-style: var(--shiki-light-font-style);
+	font-weight: var(--shiki-light-font-weight);
+	text-decoration: var(--shiki-light-text-decoration);
+}
+
+.theme-dark .astro-code,
+.theme-dark .astro-code span {
+	color: var(--shiki-dark) !important;
+}