From b9eaaee58389cb78185eca8fd3cb3aa67a24223f Mon Sep 17 00:00:00 2001
From: Gordon Woodhull <gordon.woodhull@posit.co>
Date: Sat, 28 Feb 2026 16:17:26 -0500
Subject: [PATCH] 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
---
 news/changelog-1.9.md                         |  1 +
 src/format/typst/format-typst.ts              | 74 +++++++++++++++++++
 .../filters/quarto-post/typst-brand-yaml.lua  |  1 +
 .../brand-monospace-block-no-bg/_brand.yml    | 10 +++
 .../brand-monospace-block-no-bg.qmd           | 33 +++++++++
 .../brand-monospace-block/_brand.yml          | 12 +++
 .../brand-monospace-block.qmd                 | 34 +++++++++
 .../brand-monospace-idiomatic/_brand.yml      | 19 +++++
 .../brand-monospace-idiomatic.qmd             | 38 ++++++++++
 .../brand-monospace-inheritance/_brand.yml    | 25 +++++++
 .../brand-monospace-inheritance.qmd           | 41 ++++++++++
 .../brand-monospace-inline/_brand.yml         | 11 +++
 .../brand-monospace-inline.qmd                | 28 +++++++
 .../brand-monospace-with-theme/_brand.yml     | 18 +++++
 .../brand-monospace-with-theme.qmd            | 41 ++++++++++
 .../skylighting-default.qmd                   | 34 +++++++++
 .../skylighting-line-numbers.qmd              | 31 ++++++++
 17 files changed, 451 insertions(+)
 create mode 100644 tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-block-no-bg/_brand.yml
 create mode 100644 tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-block-no-bg/brand-monospace-block-no-bg.qmd
 create mode 100644 tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-block/_brand.yml
 create mode 100644 tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-block/brand-monospace-block.qmd
 create mode 100644 tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-idiomatic/_brand.yml
 create mode 100644 tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-idiomatic/brand-monospace-idiomatic.qmd
 create mode 100644 tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-inheritance/_brand.yml
 create mode 100644 tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-inheritance/brand-monospace-inheritance.qmd
 create mode 100644 tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-inline/_brand.yml
 create mode 100644 tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-inline/brand-monospace-inline.qmd
 create mode 100644 tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-with-theme/_brand.yml
 create mode 100644 tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-with-theme/brand-monospace-with-theme.qmd
 create mode 100644 tests/docs/smoke-all/typst/syntax-highlighting/skylighting-default.qmd
 create mode 100644 tests/docs/smoke-all/typst/syntax-highlighting/skylighting-line-numbers.qmd

diff --git a/news/changelog-1.9.md b/news/changelog-1.9.md
index 36d010ecdb..d7d5749111 100644
--- a/news/changelog-1.9.md
+++ b/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`
 
diff --git a/src/format/typst/format-typst.ts b/src/format/typst/format-typst.ts
index 3a2e018c3d..71f0657022 100644
--- a/src/format/typst/format-typst.ts
+++ b/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
diff --git a/src/resources/filters/quarto-post/typst-brand-yaml.lua b/src/resources/filters/quarto-post/typst-brand-yaml.lua
index e23639c86a..d4225c4904 100644
--- a/src/resources/filters/quarto-post/typst-brand-yaml.lua
+++ b/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')
diff --git a/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-block-no-bg/_brand.yml b/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-block-no-bg/_brand.yml
new file mode 100644
index 0000000000..a56e5aa3b4
--- /dev/null
+++ b/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
diff --git a/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-block-no-bg/brand-monospace-block-no-bg.qmd b/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-block-no-bg/brand-monospace-block-no-bg.qmd
new file mode 100644
index 0000000000..3e6bf00c79
--- /dev/null
+++ b/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}")
+```
diff --git a/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-block/_brand.yml b/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-block/_brand.yml
new file mode 100644
index 0000000000..b2335f9f42
--- /dev/null
+++ b/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
diff --git a/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-block/brand-monospace-block.qmd b/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-block/brand-monospace-block.qmd
new file mode 100644
index 0000000000..3cfd409d89
--- /dev/null
+++ b/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.
diff --git a/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-idiomatic/_brand.yml b/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-idiomatic/_brand.yml
new file mode 100644
index 0000000000..cdf5d53d08
--- /dev/null
+++ b/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
diff --git a/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-idiomatic/brand-monospace-idiomatic.qmd b/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-idiomatic/brand-monospace-idiomatic.qmd
new file mode 100644
index 0000000000..0fa1e87cfd
--- /dev/null
+++ b/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.
diff --git a/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-inheritance/_brand.yml b/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-inheritance/_brand.yml
new file mode 100644
index 0000000000..d6378b3b31
--- /dev/null
+++ b/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
diff --git a/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-inheritance/brand-monospace-inheritance.qmd b/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-inheritance/brand-monospace-inheritance.qmd
new file mode 100644
index 0000000000..acdf6d9ade
--- /dev/null
+++ b/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-inheritance/brand-monospace-inheritance.qmd
@@ -0,0 +1,41 @@
+---
+title: Brand Monospace Inheritance with Skylighting
+format:
+  typst:
+    keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          # Skylighting is active (default)
+          - "#Skylighting"
+          # Base monospace family applied via codefont
+          - 'codefont: \("Fira Code",\),$'
+          # monospace-block inherits color from base monospace, gets its own bg
+          - '^#show raw\.where\(block: true\): set text\(weight: 400, size: 0\.85em, fill: rgb\("#2d3748"\), \)$'
+          - '^#show raw\.where\(block: true\): set block\(fill: rgb\("#edf2f7"\)\)$'
+          - '^#show raw\.where\(block: true\): set par\(leading: 0\.75em\)$'
+          # Quarto Skylighting override with inherited brand bg
+          - 'let bgcolor = rgb\("#edf2f7"\)'
+          - 'block\(fill: bgcolor, width: 100%, inset: 8pt, radius: 2pt, blocks\)'
+          # monospace-inline overrides weight to 700, inherits color, gets its own bg
+          - '^#show raw\.where\(block: false\): set text\(weight: 700, size: 0\.85em, fill: rgb\("#2d3748"\), \)$'
+          - '^#show raw\.where\(block: false\): content => highlight\(fill: rgb\("#fefcbf"\), content\)$'
+        - ["```python"]
+---
+
+This tests that `monospace` base properties are properly inherited by
+`monospace-block` and `monospace-inline`, with specific overrides taking
+precedence.
+
+Inline code: `hello()`{.python} and `x + y`{.r} should use bold weight (700) from
+monospace-inline override, with yellow background.
+
+```python
+# Block code inherits base weight (400) with blue-gray background
+def greet(name):
+    return f"Hello, {name}!"
+```
+
+More `len(x)`{.python} code references.
diff --git a/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-inline/_brand.yml b/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-inline/_brand.yml
new file mode 100644
index 0000000000..3439f1a88e
--- /dev/null
+++ b/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-inline/_brand.yml
@@ -0,0 +1,11 @@
+color:
+  palette:
+    inline-bg: "#fff3cd"
+    inline-fg: "#664d03"
+
+typography:
+  monospace-inline:
+    color: inline-fg
+    background-color: inline-bg
+    weight: 600
+    size: 0.85rem
diff --git a/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-inline/brand-monospace-inline.qmd b/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-inline/brand-monospace-inline.qmd
new file mode 100644
index 0000000000..6076fee15a
--- /dev/null
+++ b/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-inline/brand-monospace-inline.qmd
@@ -0,0 +1,28 @@
+---
+title: Brand Monospace Inline with Skylighting
+format:
+  typst:
+    keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          # Skylighting is active for code blocks
+          - "#Skylighting"
+          # Brand monospace-inline properties are emitted
+          - '^#show raw\.where\(block: false\): set text\(weight: 600, size: 0\.85em, fill: rgb\("#664d03"\), \)$'
+          - '^#show raw\.where\(block: false\): content => highlight\(fill: rgb\("#fff3cd"\), content\)$'
+        # No monospace-block show rules (not configured)
+        - ['^#show raw\.where\(block: true\): set block\(fill:']
+---
+
+Inline code like `hello()`{.python} and `x + y`{.r} should get brand monospace-inline styling
+(background highlight, custom color, weight, size).
+
+```python
+def hello():
+    print("world")
+```
+
+Code blocks use Skylighting and should not be affected by monospace-inline settings.
diff --git a/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-with-theme/_brand.yml b/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-with-theme/_brand.yml
new file mode 100644
index 0000000000..9d7a1041f6
--- /dev/null
+++ b/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-with-theme/_brand.yml
@@ -0,0 +1,18 @@
+color:
+  palette:
+    block-bg: "#282a36"
+    block-fg: "#f8f8f2"
+    inline-bg: "#e8e0f0"
+    inline-fg: "#6c3483"
+
+typography:
+  monospace-block:
+    color: block-fg
+    background-color: block-bg
+    weight: 400
+    size: 9pt
+    line-height: 1.4
+  monospace-inline:
+    color: inline-fg
+    background-color: inline-bg
+    weight: 500
diff --git a/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-with-theme/brand-monospace-with-theme.qmd b/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-with-theme/brand-monospace-with-theme.qmd
new file mode 100644
index 0000000000..0248936596
--- /dev/null
+++ b/tests/docs/smoke-all/typst/syntax-highlighting/brand-monospace-with-theme/brand-monospace-with-theme.qmd
@@ -0,0 +1,41 @@
+---
+title: Brand Monospace with Explicit Theme
+format:
+  typst:
+    keep-typ: true
+    syntax-highlighting: espresso
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          # Skylighting with espresso theme
+          - "#Skylighting"
+          - "#KeywordTok"
+          # Brand monospace-block properties (show rules for idiomatic fallback)
+          - '^#show raw\.where\(block: true\): set text\(weight: 400, size: 9pt, fill: rgb\("#f8f8f2"\), \)$'
+          - '^#show raw\.where\(block: true\): set block\(fill: rgb\("#282a36"\)\)$'
+          - '^#show raw\.where\(block: true\): set par\(leading: 0\.65em\)$'
+          # Quarto Skylighting override uses brand bg (not espresso theme bg)
+          - 'let bgcolor = rgb\("#282a36"\)'
+          - 'block\(fill: bgcolor, width: 100%, inset: 8pt, radius: 2pt, blocks\)'
+          # Brand monospace-inline properties
+          - '^#show raw\.where\(block: false\): set text\(weight: 500, fill: rgb\("#6c3483"\), \)$'
+          - '^#show raw\.where\(block: false\): content => highlight\(fill: rgb\("#e8e0f0"\), content\)$'
+        - ["```python"]
+---
+
+This tests that brand monospace options and an explicit syntax-highlighting theme
+can coexist. The theme controls token colors; the brand controls the block
+container styling.
+
+Here's some `x <- 1`{.r} with brand styling.
+
+```python
+def fibonacci(n):
+    if n <= 1:
+        return n
+    return fibonacci(n - 1) + fibonacci(n - 2)
+```
+
+And more `def foo()`{.python} references.
diff --git a/tests/docs/smoke-all/typst/syntax-highlighting/skylighting-default.qmd b/tests/docs/smoke-all/typst/syntax-highlighting/skylighting-default.qmd
new file mode 100644
index 0000000000..de81bcf646
--- /dev/null
+++ b/tests/docs/smoke-all/typst/syntax-highlighting/skylighting-default.qmd
@@ -0,0 +1,34 @@
+---
+title: Skylighting Default Style
+format:
+  typst:
+    keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          # Default highlighting uses Skylighting (arrow theme)
+          - "#Skylighting"
+          - "#KeywordTok"
+          - "#let EndLine"
+          # Quarto override with proper block styling and arrow theme bgcolor
+          - 'let bgcolor = rgb\("#f1f3f5"\)'
+          - 'block\(fill: bgcolor, width: 100%, inset: 8pt, radius: 2pt, blocks\)'
+        - ["```python"]
+---
+
+Default Skylighting (no explicit theme, no brand). This tests the baseline
+behavior that code blocks should have proper styling.
+
+```python
+def hello():
+    print("world")
+```
+
+```r
+x <- 1 + 1
+print(x)
+```
+
+And some `x <- 1`{.r} and `def hello()`{.python} inline code with Skylighting.
diff --git a/tests/docs/smoke-all/typst/syntax-highlighting/skylighting-line-numbers.qmd b/tests/docs/smoke-all/typst/syntax-highlighting/skylighting-line-numbers.qmd
new file mode 100644
index 0000000000..af2fe7e9f3
--- /dev/null
+++ b/tests/docs/smoke-all/typst/syntax-highlighting/skylighting-line-numbers.qmd
@@ -0,0 +1,31 @@
+---
+title: Skylighting with Line Numbers
+format:
+  typst:
+    keep-typ: true
+    syntax-highlighting: tango
+    code-line-numbers: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          # Skylighting with line numbering enabled
+          - '#Skylighting\(number: true'
+          - "#KeywordTok"
+          # Quarto override with proper block styling
+          - 'block\(fill: bgcolor, width: 100%, inset: 8pt, radius: 2pt, blocks\)'
+        - ["```python"]
+---
+
+Code blocks with line numbers should render properly with Skylighting.
+
+```python
+def fibonacci(n):
+    if n <= 1:
+        return n
+    a, b = 0, 1
+    for _ in range(n):
+        a, b = b, a + b
+    return a
+```