diff options
| -rw-r--r-- | .changeset/lemon-boats-bake.md | 5 | ||||
| -rw-r--r-- | packages/astro/components/Code.astro | 2 | ||||
| -rw-r--r-- | packages/astro/src/core/errors/dev/vite.ts | 10 | ||||
| -rw-r--r-- | packages/astro/src/core/errors/overlay.ts | 40 | ||||
| -rw-r--r-- | packages/astro/src/core/shiki.ts (renamed from packages/astro/components/shiki.ts) | 0 |
5 files changed, 35 insertions, 22 deletions
diff --git a/.changeset/lemon-boats-bake.md b/.changeset/lemon-boats-bake.md new file mode 100644 index 000000000..d254ed5da --- /dev/null +++ b/.changeset/lemon-boats-bake.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix error overlay syntax highlighting diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro index a502c6eaa..281b16fb4 100644 --- a/packages/astro/components/Code.astro +++ b/packages/astro/components/Code.astro @@ -8,7 +8,7 @@ import type { ThemeRegistrationRaw, } from 'shikiji'; import { visit } from 'unist-util-visit'; -import { getCachedHighlighter, replaceCssVariables } from './shiki.js'; +import { getCachedHighlighter, replaceCssVariables } from '../dist/core/shiki.js'; interface Props { /** The code to highlight. Required. */ diff --git a/packages/astro/src/core/errors/dev/vite.ts b/packages/astro/src/core/errors/dev/vite.ts index 3eb8720c7..8705534a9 100644 --- a/packages/astro/src/core/errors/dev/vite.ts +++ b/packages/astro/src/core/errors/dev/vite.ts @@ -8,6 +8,7 @@ import { AstroError, type ErrorWithMetadata } from '../errors.js'; import { createSafeError } from '../utils.js'; import type { SSRLoadedRenderer } from './../../../@types/astro.js'; import { getDocsForError, renderErrorMarkdown } from './utils.js'; +import { replaceCssVariables } from '../../shiki.js'; export function enhanceViteSSRError({ error, @@ -124,6 +125,7 @@ export interface AstroErrorPayload { // Map these to `.js` during error highlighting. const ALTERNATIVE_JS_EXTS = ['cjs', 'mjs']; const ALTERNATIVE_MD_EXTS = ['mdoc']; +const INLINE_STYLE_SELECTOR_GLOBAL = /style="(.*?)"/g; /** * Generate a payload for Vite's error overlay @@ -146,7 +148,7 @@ export async function getViteErrorPayload(err: ErrorWithMetadata): Promise<Astro if (ALTERNATIVE_MD_EXTS.includes(highlighterLang ?? '')) { highlighterLang = 'md'; } - const highlightedCode = err.fullCode + let highlightedCode = err.fullCode ? await codeToHtml(err.fullCode, { // @ts-expect-error always assume that shiki can accept the lang string lang: highlighterLang, @@ -155,6 +157,12 @@ export async function getViteErrorPayload(err: ErrorWithMetadata): Promise<Astro }) : undefined; + if (highlightedCode) { + highlightedCode = highlightedCode.replace(INLINE_STYLE_SELECTOR_GLOBAL, (m) => + replaceCssVariables(m) + ); + } + return { type: 'error', err: { diff --git a/packages/astro/src/core/errors/overlay.ts b/packages/astro/src/core/errors/overlay.ts index 7ce891348..9a6e5481c 100644 --- a/packages/astro/src/core/errors/overlay.ts +++ b/packages/astro/src/core/errors/overlay.ts @@ -68,16 +68,16 @@ const style = /* css */ ` --toggle-border-color: #C3CADB; /* Syntax Highlighting */ - --shiki-color-text: #000000; - --shiki-token-constant: #4ca48f; - --shiki-token-string: #9f722a; - --shiki-token-comment: #8490b5; - --shiki-token-keyword: var(--accent); - --shiki-token-parameter: #aa0000; - --shiki-token-function: #4ca48f; - --shiki-token-string-expression: #9f722a; - --shiki-token-punctuation: #ffffff; - --shiki-token-link: #9f722a; + --astro-code-color-text: #000000; + --astro-code-token-constant: #4ca48f; + --astro-code-token-string: #9f722a; + --astro-code-token-comment: #8490b5; + --astro-code-token-keyword: var(--accent); + --astro-code-token-parameter: #aa0000; + --astro-code-token-function: #4ca48f; + --astro-code-token-string-expression: #9f722a; + --astro-code-token-punctuation: #ffffff; + --astro-code-token-link: #9f722a; } :host(.astro-dark) { @@ -121,16 +121,16 @@ const style = /* css */ ` --toggle-border-color: #3D4663; /* Syntax Highlighting */ - --shiki-color-text: #ffffff; - --shiki-token-constant: #90f4e3; - --shiki-token-string: #f4cf90; - --shiki-token-comment: #8490b5; - --shiki-token-keyword: var(--accent); - --shiki-token-parameter: #aa0000; - --shiki-token-function: #90f4e3; - --shiki-token-string-expression: #f4cf90; - --shiki-token-punctuation: #ffffff; - --shiki-token-link: #f4cf90; + --astro-code-color-text: #ffffff; + --astro-code-token-constant: #90f4e3; + --astro-code-token-string: #f4cf90; + --astro-code-token-comment: #8490b5; + --astro-code-token-keyword: var(--accent); + --astro-code-token-parameter: #aa0000; + --astro-code-token-function: #90f4e3; + --astro-code-token-string-expression: #f4cf90; + --astro-code-token-punctuation: #ffffff; + --astro-code-token-link: #f4cf90; } #theme-toggle-wrapper{ diff --git a/packages/astro/components/shiki.ts b/packages/astro/src/core/shiki.ts index 4ce27c51d..4ce27c51d 100644 --- a/packages/astro/components/shiki.ts +++ b/packages/astro/src/core/shiki.ts |