{"record":{"id":"85dc57d6ff29f4c3","repo":"withastro/astro","slug":"shiki-syntax-highlighting-uses-inline-styles-that","errorCode":null,"errorMessage":"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.","messagePattern":"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\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/astro/src/core/messages/runtime.ts","lineNumber":411,"sourceCode":"\t}\n\n\t// biome-ignore lint/suspicious/noConsole: allowed\n\tconsole.log(message.join('\\n') + '\\n');\n}\n\nexport function warnIfCspWithShiki(config: AstroConfig, logger: AstroLogger): void {\n\t// Check if CSP is enabled\n\tconst cspEnabled = config.security.csp !== false;\n\tif (!cspEnabled) return;\n\n\t// Check if Shiki is being used (string or object form)\n\tconst syntaxHighlight = config.markdown.syntaxHighlight;\n\tconst isShiki =\n\t\tsyntaxHighlight === 'shiki' ||\n\t\t(typeof syntaxHighlight === 'object' && syntaxHighlight?.type === 'shiki');\n\n\tif (isShiki) {\n\t\tlogger.warn(\n\t\t\t'config',\n\t\t\t'Shiki syntax highlighting uses inline styles that are not compatible with Content Security Policy (CSP). ' +\n\t\t\t\t'Consider using Prism syntax highlighting instead, or disable CSP if Shiki is required.',\n\t\t);\n\t}\n}\n\n/**\n * Warns when a `scriptDirective`/`styleDirective` defines `default`-kind resources alongside\n * `element`/`attribute`-kind entries. Because the more specific directive (`*-src-elem`/`*-src-attr`)\n * overrides the generic one for its scope and browsers do not fall back, the generic resources will\n * not apply there. Astro's generated hashes are folded automatically, so this only concerns\n * user-provided resources.\n */\nexport function warnIfCspResourceFallbackShadowing(config: AstroConfig, logger: AstroLogger): void {\n\tconst csp = config.security.csp;\n\t// Only the object form has `scriptDirective`/`styleDirective` to inspect. (Reading the config\n\t// directly here keeps this module free of the Node-only `csp/common.js`, which must not leak","sourceCodeStart":393,"sourceCodeEnd":429,"githubUrl":"https://github.com/withastro/astro/blob/52e6c34790cc8ac4e69e6135ace06049867e5c4a/packages/astro/src/core/messages/runtime.ts#L393-L429","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","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"],"exampleFix":"// astro.config.mjs — before\nexport default defineConfig({}); // default shiki + default CSP → warning\n\n// after\nexport default defineConfig({\n  markdown: { syntaxHighlight: 'prism' },\n});","handlingStrategy":"validation","validationCode":"const sh = config.markdown.syntaxHighlight;\nconst usesShiki = sh === 'shiki' || (typeof sh === 'object' && sh?.type === 'shiki');\nif (config.security.csp !== false && usesShiki) {\n  console.warn('Shiki inline styles will be blocked by the active CSP policy');\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["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"],"tags":["csp","shiki","syntax-highlighting","security","config"],"backgroundTag":"csp-blocked-inline-style","analyzedSha":"52e6c34790cc8ac4e69e6135ace06049867e5c4a","analyzedAt":"2026-08-18T18:48:03.901Z","contentChangedAt":"2026-08-18T18:48:03.901Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}