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.

The postprocessor matches the full Skylighting function signature to
ensure only the intended code is modified. 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,86 @@ 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 matches the entire
+// Skylighting function by its distinctive signature and patches only within it.
+// 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) {
+  // Match the entire #let Skylighting(...) = { ... } function.
+  // The signature is stable and generated by Skylighting's Typst backend.
+  const skylightingFnRe =
+    /(#let Skylighting\(fill: none, number: false, start: 1, sourcelines\) = \{[\s\S]*?\n\})/;
+
+  return async (output: string) => {
+    const content = Deno.readTextFileSync(output);
+
+    const match = skylightingFnRe.exec(content);
+    if (!match) {
+      // No Skylighting function found — document may not have code blocks,
+      // or upstream changed the function signature. Nothing to patch.
+      return;
+    }
+
+    let fn = match[1];
+
+    // Fix block() call: add width, inset, radius
+    fn = fn.replace(
+      "block(fill: bgcolor, blocks)",
+      "block(fill: bgcolor, width: 100%, inset: 8pt, radius: 2pt, blocks)",
+    );
+
+    // Override bgcolor with brand monospace-block background-color
+    if (brandBgColor) {
+      fn = fn.replace(
+        /let bgcolor = rgb\("[^"]*"\)/,
+        `let bgcolor = rgb("${brandBgColor}")`,
+      );
+    }
+
+    if (fn !== match[1]) {
+      Deno.writeTextFileSync(output, content.replace(match[1], fn));
+    }
+  };
+}
+
 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()`{.python} 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 `x <- 1`{.r} 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