jeremy.herve.bzh / skypress
A calm place to write long-form, and publish it to the open social web. skypress.blog/
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

Reader page: enable syntax highlighting with on-brand token theme

author
Jeremy Herve date (Jun 11, 2026, 9:18 AM +0200) commit 8ce5c885 parent 164cf42b
+49 -1
+49 -1
src/pages/[author]/[slug]/[rkey].astro
··· 59 59 60 60 const doc = document.value; 61 61 // Blob URLs, render, sanitise, and the text fallback all live in render-article. 62 - const rendered = renderArticle( doc, { pdsUrl, did } ); 62 + const rendered = renderArticle( doc, { pdsUrl, did }, { highlight: true } ); 63 63 html = rendered.html; 64 64 const textContent = rendered.text; 65 65 ··· 285 285 } 286 286 .reader__article :global(code) { 287 287 font-family: var(--font-mono); 288 + } 289 + /* Syntax highlighting tokens, layered on the existing dark <pre> chrome. 290 + No background/padding on .hljs so the pre styling above is untouched. 291 + Colours come from the site tokens, which flip with the light/dark theme. */ 292 + .reader__article :global(.hljs-comment), 293 + .reader__article :global(.hljs-quote) { 294 + color: var(--muted); 295 + font-style: italic; 296 + } 297 + .reader__article :global(.hljs-keyword), 298 + .reader__article :global(.hljs-selector-tag), 299 + .reader__article :global(.hljs-literal), 300 + .reader__article :global(.hljs-section), 301 + .reader__article :global(.hljs-tag) { 302 + color: var(--sun); 303 + } 304 + .reader__article :global(.hljs-string), 305 + .reader__article :global(.hljs-attr), 306 + .reader__article :global(.hljs-symbol), 307 + .reader__article :global(.hljs-bullet) { 308 + color: var(--sun-strong); 309 + } 310 + .reader__article :global(.hljs-number), 311 + .reader__article :global(.hljs-built_in), 312 + .reader__article :global(.hljs-class .hljs-title) { 313 + color: #7fb2c9; 314 + } 315 + .reader__article :global(.hljs-title), 316 + .reader__article :global(.hljs-function .hljs-title), 317 + .reader__article :global(.hljs-name) { 318 + color: var(--paper); 319 + font-weight: 600; 320 + } 321 + .reader__article :global(.hljs-meta), 322 + .reader__article :global(.hljs-comment .hljs-doctag) { 323 + color: var(--ink-soft); 324 + } 325 + .reader__article :global(.hljs-addition) { 326 + color: #7faa6b; 327 + } 328 + .reader__article :global(.hljs-deletion) { 329 + color: #c97f7f; 330 + } 331 + .reader__article :global(.hljs-emphasis) { 332 + font-style: italic; 333 + } 334 + .reader__article :global(.hljs-strong) { 335 + font-weight: 700; 288 336 } 289 337 .reader__actions-loading { 290 338 max-width: 40rem;