jfmonty2/blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

pick a code theme and setup styles for inline code

Browse Source
This commit is contained in:
Joseph Montanaro
2026-03-16 21:16:17 -04:00
parent 3aa7ad1368
commit d2770b9a5a
5 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
astro.config.mjs
View File

@@ -12,7 +12,7 @@ export default defineConfig({
shikiConfig: {
themes: {
light: 'dracula',
dark: 'dracula-soft',
dark: 'dark-plus',
}
},
},

3
bun.lock
View File

@@ -12,6 +12,7 @@
"@fontsource-variable/baskervville": "^5.2.3",
"@fontsource-variable/baskervville-sc": "^5.2.3",
"@fontsource-variable/figtree": "^5.2.10",
"@fontsource-variable/fira-code": "^5.2.7",
"astro": "^5.18.0",
"sharp": "^0.34.5",
},
@@ -180,6 +181,8 @@
"@fontsource-variable/figtree": ["@fontsource-variable/figtree@5.2.10", "", {}, "sha512-a5Gumbpy3mdd+Yg31g6Qb7CmjYbrfyutJa3bWfP5q8A4GclIOwX7mI+ZuSHsJnw/mHvW6r9oh1AHJcJTIxK4JA=="],
"@fontsource-variable/fira-code": ["@fontsource-variable/fira-code@5.2.7", "", {}, "sha512-J2bxN7fz5rd8WpQYyau4o19WqTzxoTqaNj9jhsv4p21GSu1Rf34tbqsxqjyDCR+wDMHM3SajyFqtq+5uvRUQ7w=="],
"@img/colour": ["@img/colour@1.0.0", "", {}, "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw=="],
"@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.2.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w=="],

1
package.json
View File

@@ -8,6 +8,7 @@
"@fontsource-variable/baskervville": "^5.2.3",
"@fontsource-variable/baskervville-sc": "^5.2.3",
"@fontsource-variable/figtree": "^5.2.10",
"@fontsource-variable/fira-code": "^5.2.7",
"astro": "^5.18.0",
"sharp": "^0.34.5"
},

18
src/styles/code.css
View File

@@ -1,15 +1,12 @@
/* fira-code-latin-wght-normal */
@font-face {
font-family: 'Fira Code Variable';
font-style: normal;
font-display: swap;
font-weight: 300 700;
src: url(https://cdn.jsdelivr.net/fontsource/fonts/fira-code:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@import '@fontsource-variable/fira-code';
code {
:not(pre) > code {
font-family: 'Fira Code Variable';
font-size: var(--content-size-sm);
padding: 0.05rem 0.2rem 0.1rem;
border-radius: 0.2rem;
color: var(--inline-code-color);
background-color: var(--inline-code-bg);
}
pre.astro-code {
@@ -18,6 +15,7 @@ pre.astro-code {
border-radius: 0.3em;
font-size: var(--content-size-sm);
--shiki-dark-font-weight: 500;
}
:root[data-theme="dark"] .astro-code,

8
src/styles/vars.css
View File

@@ -28,6 +28,8 @@
--link-color: var(--primary-color);
--nav-link-color: white;
--neutral-gray: hsl(0deg 0% 30%);
--inline-code-bg: hsl(0deg 0% 93%);
--inline-code-color: var(--content-color);
/* dark-mode colors (defined here so that we only have to update them in one place) */
--dark-bg-color: hsl(220deg 10% 13%);
@@ -41,6 +43,8 @@
--dark-link-color: hsl(202deg 50% 50%);
--dark-nav-link-color: var(--dark-heading-color);
--dark-neutral-gray: hsl(220deg 10% 45%);
--dark-inline-code-bg: hsl(220deg 7.5% 21%);
--dark-inline-code-color: hsl(18deg 10% 90%);
&[data-theme="dark"] {
--bg-color: var(--dark-bg-color);
@@ -54,6 +58,8 @@
--link-color: var(--dark-link-color);
--nav-link-color: var(--dark-nav-link-color);
--neutral-gray: var(--dark-neutral-gray);
--inline-code-bg: var(--dark-inline-code-bg);
--inline-code-color: var(--dark-inline-code-color);
}
&:not([data-theme="light"]) {
@@ -70,6 +76,8 @@
--link-color: var(--dark-link-color);
--nav-link-color: var(--dark-nav-link-color);
--neutral-gray: var(--dark-neutral-gray);
--inline-code-bg: var(--dark-inline-code-bg);
--inline-code-color: var(--dark-inline-code-color);
}
}
}