fix: Skylighting code block styling for Typst (#14126)

A TypeScript postprocessor patches the Pandoc-generated Skylighting
function in .typ output to add width: 100%, inset: 8pt, and radius: 2pt
to the block call, matching native code block styling.

For brand documents, also resolves monospace-block background-color
(including palette color names) and overrides the bgcolor value.

Fixes #14126

Author: gordonwoodhull

news/changelog-1.9.md

@@ -83,6 +83,7 @@ All changes included in 1.9:
 - ([#13954](https://github.com/quarto-dev/quarto-cli/issues/13954)): Add support for Typst book projects via format extensions. Quarto now bundles the `orange-book` extension which provides a textbook-style format with chapter numbering, cross-references, and professional styling. Book projects with `format: typst` automatically use this extension.
 - ([#13978](https://github.com/quarto-dev/quarto-cli/pull/13978)): Keep term and description together in definition lists to avoid breaking across pages. (author: @mcanouil)
 - ([#13878](https://github.com/quarto-dev/quarto-cli/issues/13878)): Typst now uses Pandoc's skylighting for syntax highlighting by default (consistent with other formats). Use `syntax-highlighting: idiomatic` to opt-in to Typst's native syntax highlighting instead.
+- ([#14126](https://github.com/quarto-dev/quarto-cli/issues/14126)): Fix Skylighting code blocks in Typst lacking full-width background, padding, and border radius. A postprocessor patches the Pandoc-generated Skylighting function to add `width: 100%`, `inset: 8pt`, and `radius: 2pt` to the block call, matching the styling of native code blocks. Brand `monospace-block.background-color` also now correctly applies to Skylighting output. This workaround will be removed once the fix is upstreamed to Skylighting.
 
 ### `pdf`
 

src/format/typst/format-typst.ts

@@ -10,12 +10,14 @@ import { RenderServices } from "../../command/render/types.ts";
 import { ProjectContext } from "../../project/types.ts";
 import { BookExtension } from "../../project/types/book/book-shared.ts";
 import {
+  kBrand,
   kCiteproc,
   kColumns,
   kDefaultImageExtension,
   kFigFormat,
   kFigHeight,
   kFigWidth,
+  kLight,
   kLogo,
   kNumberSections,
   kSectionNumbering,
@@ -27,6 +29,7 @@ import {
   Format,
   FormatExtras,
   FormatPandoc,
+  LightDarkBrand,
   Metadata,
   PandocFlags,
 } from "../../config/types.ts";
@@ -142,15 +145,77 @@ export function typstFormat(): Format {
         ].map((partial) => join(templateDir, partial)),
       };
 
+      // Postprocessor to fix Skylighting code block styling (issue #14126).
+      // Pandoc's generated Skylighting function uses block(fill: bgcolor, blocks)
+      // which lacks width, inset, and radius. We surgically fix this in the .typ
+      // output. If brand monospace-block has a background-color, we also override
+      // the bgcolor value.
+      const brandData = (format.render[kBrand] as LightDarkBrand | undefined)
+        ?.[kLight];
+      const monospaceBlock = brandData?.processedData?.typography?.[
+        "monospace-block"
+      ];
+      let brandBgColor = (monospaceBlock && typeof monospaceBlock !== "string")
+        ? monospaceBlock["background-color"] as string | undefined
+        : undefined;
+      // Resolve palette color names (e.g. "code-bg" → "#1e1e2e")
+      if (brandBgColor && brandData?.data?.color?.palette) {
+        const palette = brandData.data.color.palette as Record<string, string>;
+        let resolved = brandBgColor;
+        while (palette[resolved]) {
+          resolved = palette[resolved];
+        }
+        brandBgColor = resolved;
+      }
+
       return {
         pandoc,
         metadata,
         templateContext,
+        postprocessors: [
+          skylightingPostProcessor(brandBgColor),
+        ],
       };
     },
   });
 }
 
+// Fix Skylighting code block styling in .typ output (issue #14126).
+// The Pandoc-generated Skylighting function uses block(fill: bgcolor, blocks)
+// which lacks width, inset, and radius. This postprocessor surgically replaces
+// that call. When brand provides a monospace-block background-color, also
+// overrides the bgcolor value. This is a temporary workaround until the fix
+// is upstreamed to the Skylighting library.
+function skylightingPostProcessor(brandBgColor?: string) {
+  return async (output: string) => {
+    let content = Deno.readTextFileSync(output);
+    let modified = false;
+
+    // Fix block() call: add width, inset, radius
+    const replaced = content.replaceAll(
+      "block(fill: bgcolor, blocks)",
+      "block(fill: bgcolor, width: 100%, inset: 8pt, radius: 2pt, blocks)",
+    );
+    if (replaced !== content) {
+      content = replaced;
+      modified = true;
+    }
+
+    // Override bgcolor with brand monospace-block background-color
+    if (brandBgColor) {
+      content = content.replaceAll(
+        /let bgcolor = rgb\("[^"]*"\)/g,
+        `let bgcolor = rgb("${brandBgColor}")`,
+      );
+      modified = true;
+    }
+
+    if (modified) {
+      Deno.writeTextFileSync(output, content);
+    }
+  };
+}
+
 function typstResolveFormat(format: Format) {
   // Pandoc citeproc with typst output requires adjustment
   // https://github.com/jgm/pandoc/commit/e89a3edf24a025d5bb0fe8c4c7a8e6e0208fa846

src/resources/filters/quarto-post/typst-brand-yaml.lua

@@ -250,6 +250,7 @@ function render_typst_brand_yaml()
           }))
         end
       end
+
     end,
     Meta = function(meta)
       local brand = param('brand')

tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-block-no-bg/_brand.yml

@@ -0,0 +1,10 @@
+color:
+  palette:
+    code-fg: "#2d3748"
+
+typography:
+  monospace-block:
+    color: code-fg
+    weight: 500
+    size: 10pt
+    line-height: 1.5

tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-block-no-bg/brand-monospace-block-no-bg.qmd

@@ -0,0 +1,33 @@
+---
+title: Brand Monospace Block without Background Color
+format:
+  typst:
+    keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          # Skylighting is active (default)
+          - "#Skylighting"
+          - "#KeywordTok"
+          # Brand monospace-block text properties emitted as show rules
+          - '^#show raw\.where\(block: true\): set text\(weight: 500, size: 10pt, fill: rgb\("#2d3748"\), \)$'
+          - '^#show raw\.where\(block: true\): set par\(leading: 0\.75em\)$'
+          # Even without brand bg, Skylighting override uses theme bgcolor
+          # so that width/inset/radius are applied
+          - 'let bgcolor = rgb\("#f1f3f5"\)'
+          - 'block\(fill: bgcolor, width: 100%, inset: 8pt, radius: 2pt, blocks\)'
+        # No brand background-color show rule (not configured)
+        - ['^#show raw\.where\(block: true\): set block\(fill:']
+---
+
+Brand sets monospace-block color, weight, size, and line-height but NOT
+background-color. The Skylighting override should still be emitted using
+the theme's background color so that code blocks get proper width/inset/radius.
+
+```python
+def hello():
+    x = 1 + 2
+    print(f"result: {x}")
+```

tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-block/_brand.yml

@@ -0,0 +1,12 @@
+color:
+  palette:
+    code-bg: "#1e1e2e"
+    code-fg: "#cdd6f4"
+
+typography:
+  monospace-block:
+    color: code-fg
+    background-color: code-bg
+    size: 10pt
+    weight: 400
+    line-height: 1.6

tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-block/brand-monospace-block.qmd

@@ -0,0 +1,34 @@
+---
+title: Brand Monospace Block with Skylighting
+format:
+  typst:
+    keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          # Skylighting is active (default)
+          - "#Skylighting"
+          - "#KeywordTok"
+          # Brand monospace-block properties are emitted as show rules
+          # (still useful for idiomatic mode fallback)
+          - '^#show raw\.where\(block: true\): set text\(weight: 400, size: 10pt, fill: rgb\("#cdd6f4"\), \)$'
+          - '^#show raw\.where\(block: true\): set block\(fill: rgb\("#1e1e2e"\)\)$'
+          - '^#show raw\.where\(block: true\): set par\(leading: 0\.85em\)$'
+          # Quarto-generated Skylighting override with brand bg and proper block styling
+          - 'let bgcolor = rgb\("#1e1e2e"\)'
+          - 'block\(fill: bgcolor, width: 100%, inset: 8pt, radius: 2pt, blocks\)'
+        # Should NOT have raw fenced blocks
+        - ["```python"]
+---
+
+Brand monospace-block options should apply to Skylighting code blocks.
+
+```python
+def hello():
+    x = 1 + 2
+    print(f"result: {x}")
+```
+
+Inline code like `hello()` should NOT get monospace-block styling.

tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-idiomatic/_brand.yml

@@ -0,0 +1,19 @@
+color:
+  palette:
+    block-bg: "#f0f4f8"
+    block-fg: "#1a365d"
+    inline-bg: "#fed7d7"
+    inline-fg: "#9b2c2c"
+
+typography:
+  monospace-block:
+    color: block-fg
+    background-color: block-bg
+    size: 11pt
+    weight: 400
+    line-height: 1.5
+  monospace-inline:
+    color: inline-fg
+    background-color: inline-bg
+    weight: 600
+    size: 0.9rem

tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-idiomatic/brand-monospace-idiomatic.qmd

@@ -0,0 +1,38 @@
+---
+title: Brand Monospace with Idiomatic Highlighting
+format:
+  typst:
+    keep-typ: true
+    syntax-highlighting: idiomatic
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          # Idiomatic = native typst highlighting = raw fenced code blocks
+          - "```python"
+          # Brand monospace-block properties (these target raw.where(block: true)
+          # which DOES match native/idiomatic code blocks)
+          - '^#show raw\.where\(block: true\): set text\(weight: 400, size: 11pt, fill: rgb\("#1a365d"\), \)$'
+          - '^#show raw\.where\(block: true\): set block\(fill: rgb\("#f0f4f8"\)\)$'
+          - '^#show raw\.where\(block: true\): set par\(leading: 0\.75em\)$'
+          # Brand monospace-inline properties
+          - '^#show raw\.where\(block: false\): set text\(weight: 600, size: 0\.9em, fill: rgb\("#9b2c2c"\), \)$'
+          - '^#show raw\.where\(block: false\): content => highlight\(fill: rgb\("#fed7d7"\), content\)$'
+        # Should NOT have Skylighting tokens
+        - ["#Skylighting", "#KeywordTok"]
+---
+
+With idiomatic highlighting, brand monospace-block properties apply directly
+to `raw.where(block: true)` which matches native Typst code blocks.
+This is the baseline that "just works."
+
+Here's `inline code` with brand styling.
+
+```python
+def hello():
+    x = 1 + 2
+    print(f"result: {x}")
+```
+
+Both inline and block code should reflect brand styling.

tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-inheritance/_brand.yml

@@ -0,0 +1,25 @@
+color:
+  palette:
+    mono-base-fg: "#2d3748"
+    block-bg: "#edf2f7"
+    inline-bg: "#fefcbf"
+
+typography:
+  fonts:
+    - source: google
+      family: Fira Code
+      weight: [300, 400, 700]
+  # Base monospace: family and weight inherited by both inline and block
+  monospace:
+    family: Fira Code
+    weight: 400
+    size: 0.85rem
+    color: mono-base-fg
+  # Block overrides only background-color; inherits family, weight, size, color
+  monospace-block:
+    background-color: block-bg
+    line-height: 1.5
+  # Inline overrides only background-color and weight; inherits family, size, color
+  monospace-inline:
+    background-color: inline-bg
+    weight: 700