Shiki syntax highlighting uses inline styles that are not co

Error message

Shiki syntax highlighting uses inline styles that are not compatible with Content Security Policy (CSP). Consider using Prism syntax highlighting instead, or disable CSP if Shiki is required.

What it means

Shiki emits syntax-highlight styles as inline style attributes, which a Content-Security-Policy without style allowances blocks. Astro enables CSP unless `security.csp` is explicitly false, so warnIfCspWithShiki fires at config load whenever `markdown.syntaxHighlight` is 'shiki' or { type: 'shiki' } (shiki being the default) — your code blocks will render unstyled under a strict policy.

Source

Thrown at packages/astro/src/core/messages/runtime.ts:411

	}

	// biome-ignore lint/suspicious/noConsole: allowed
	console.log(message.join('\n') + '\n');
}

export function warnIfCspWithShiki(config: AstroConfig, logger: AstroLogger): void {
	// Check if CSP is enabled
	const cspEnabled = config.security.csp !== false;
	if (!cspEnabled) return;

	// Check if Shiki is being used (string or object form)
	const syntaxHighlight = config.markdown.syntaxHighlight;
	const isShiki =
		syntaxHighlight === 'shiki' ||
		(typeof syntaxHighlight === 'object' && syntaxHighlight?.type === 'shiki');

	if (isShiki) {
		logger.warn(
			'config',
			'Shiki syntax highlighting uses inline styles that are not compatible with Content Security Policy (CSP). ' +
				'Consider using Prism syntax highlighting instead, or disable CSP if Shiki is required.',
		);
	}
}

/**
 * Warns when a `scriptDirective`/`styleDirective` defines `default`-kind resources alongside
 * `element`/`attribute`-kind entries. Because the more specific directive (`*-src-elem`/`*-src-attr`)
 * overrides the generic one for its scope and browsers do not fall back, the generic resources will
 * not apply there. Astro's generated hashes are folded automatically, so this only concerns
 * user-provided resources.
 */
export function warnIfCspResourceFallbackShadowing(config: AstroConfig, logger: AstroLogger): void {
	const csp = config.security.csp;
	// Only the object form has `scriptDirective`/`styleDirective` to inspect. (Reading the config
	// directly here keeps this module free of the Node-only `csp/common.js`, which must not leak

View on GitHub (pinned to 52e6c34790)

Solutions

Switch to Prism: set markdown.syntaxHighlight: 'prism' and include Prism CSS
Keep Shiki and make the policy tolerate its output — Astro folds its generated hashes automatically, otherwise add the needed style-src allowances
If CSP is not a requirement for the site, set security.csp: false

Example fix

// astro.config.mjs — before
export default defineConfig({}); // default shiki + default CSP → warning

// after
export default defineConfig({
  markdown: { syntaxHighlight: 'prism' },
});

Defensive patterns

Strategy: validation

Validate before calling

const sh = config.markdown.syntaxHighlight;
const usesShiki = sh === 'shiki' || (typeof sh === 'object' && sh?.type === 'shiki');
if (config.security.csp !== false && usesShiki) {
  console.warn('Shiki inline styles will be blocked by the active CSP policy');
}

Prevention

Set markdown.syntaxHighlight explicitly instead of relying on the shiki default
Decide policy first: Prism under strict CSP, or Shiki with style allowances
Review the rendered code blocks after any CSP change

When it happens

Trigger: astro.config keeps markdown.syntaxHighlight as 'shiki' (the default) or sets { type: 'shiki', ... } while security.csp is not set to false — i.e. CSP is active by default or deliberately configured.

Common situations: Upgrading a docs/blog site where shiki is the default highlighter and CSP is now enabled by default; adopting the security.csp presets; compliance-driven CSP rollouts breaking code-block styling.

Related errors

AI-assisted analysis of withastro/astro@52e6c34790 (2026-08-18). Data as JSON: /api/errors/85dc57d6ff29f4c3. Report an issue: GitHub.