Code blocks in Typst with Skylighting do not have full width background or padding

[andrewheiss]

I have:

• searched the issue tracker for similar issues
• installed the latest version of Quarto CLI
• formatted my issue following the Bug Reports guide

Bug description

I think this happened with the switch to Skylighting as the default highlighter

quarto-cli/news/changelog-1.9.md

Line 61 in 5749d48

- Code syntax highlighting now uses Skylighting by default.

In Quarto 1.8 and below, syntax highlighted code would look like this in Typst:

With Quarto 1.9.23 (and maybe slightly before?), it looks like this now:

The underlying Typst code has changed significantly, which causes this. More details in the sections below

Steps to reproduce

With this example Quarto file:

---
title: "Example"

format:
  typst:
    keep-typ: true
---

Here's some `inline code stuff`

And here's a code block:

```{r}
# Some R code
x <- 1 + 1
x

x + 5
```

The .typ for that code block looks like this in 1.8:

#block[
```r
# Some R code
x <- 1 + 1
x
```

#block[
```
[1] 2
```

]
```r
x + 5
```

#block[
```
[1] 7
```

]
]

And it looks like this in 1.9.23:

#block[
#Skylighting(([#CommentTok("# Some R code");],
[#NormalTok("x ");#OtherTok("<-");#NormalTok(" ");#DecValTok("1");#NormalTok(" ");#SpecialCharTok("+");#NormalTok(" ");#DecValTok("1");],
[#NormalTok("x");],));
#block[
#Skylighting(([#NormalTok("[1] 2");],));
]
#Skylighting(([#NormalTok("x ");#SpecialCharTok("+");#NormalTok(" ");#DecValTok("5");],));
#block[
#Skylighting(([#NormalTok("[1] 7");],));
]
]

That's all fine and expected, since 1.9 is using Skylighting

Actual behavior

What's unexpected, though, is that with the default Typst/Quarto settings, code blocks now look substantially different:

1.8	1.9

One workaround is to set syntax-highlighting to idiomatic in the YAML (related to #13984):

---
title: "Example"

format:
  typst:
    keep-typ: true
    syntax-highlighting: idiomatic
---

Here's some `inline code stuff`

And here's a code block:

```{r}
# Some R code
x <- 1 + 1
x

x + 5
```

That results in no Skylighting and a block like this:

#block[
```r
# Some R code
x <- 1 + 1
x
```

#block[
```
[1] 2
```

]
```r
x + 5
```

#block[
```
[1] 7
```

]
]

and a PDF like this:

Using any other syntax-highlighting option results in non-full-width highlighting. Like, here's syntax-highlighting: espresso:

…which uses Skylighting:

#block[
#Skylighting(([#CommentTok("# Some R code");],
[#NormalTok("x ");#OtherTok("<-");#NormalTok(" ");#DecValTok("1");#NormalTok(" ");#SpecialCharTok("+");#NormalTok(" ");#DecValTok("1");],
[#NormalTok("x");],));
#block[
#Skylighting(([#NormalTok("[1] 2");],));
]
#Skylighting(([#NormalTok("x ");#SpecialCharTok("+");#NormalTok(" ");#DecValTok("5");],));
#block[
#Skylighting(([#NormalTok("[1] 7");],));
]
]

Expected behavior

It would be nice to have syntax highlighted code blocks that look similar across output formats by default instead of needing to set syntax-highlighting: idiomatic (which disables Skylighting entirely and goes against the idea of making it the default). Or if there was some modification to the default Skylighting styles that Quarto/pandoc generates?

Like, for example, I took the #let Skylighting() rule from the generated intermediate .typ file and modified the final block() function slightly to have 100% width and an inset and a radius:

block(fill: bgcolor, width: 100%, inset: (x: 8pt, y: 6pt), radius: 3pt, blocks)

And then I added that whole new function to the preamble:

---
title: "Example"

format:
  typst:
    keep-typ: true
    syntax-highlighting: espresso
    include-in-header: 
      - text: |
          #let Skylighting(fill: none, number: false, start: 1, sourcelines) = {
            let blocks = []
            let lnum = start - 1
            let bgcolor = rgb("#2a211c")
            for ln in sourcelines {
              if number {
                lnum = lnum + 1
                blocks = blocks + box(width: if start + sourcelines.len() > 999 { 30pt } else { 24pt }, text(fill: rgb("#bdae9d"), [ #lnum ]))
              }
              blocks = blocks + ln + EndLine()
            }
            block(fill: bgcolor, width: 100%, inset: (x: 8pt, y: 6pt), radius: 3pt, blocks)
          }
---

Here's some `inline code stuff`

And here's a code block:

```{r}
# Some R code
x <- 1 + 1
x

x + 5
```

That works!

But now the espresso background color is hardocded in the preamble.

I'm not sure where that block() function is coming from (Quarto or pandoc), but it might be worth adjusting it to take up 100% of the width so that Skylighting-based highlighting looks like code highlighting in other formats?

Your environment

• IDE: Positron 2026.02.1 build 5 (but that doesn't matter)
• OS: MacOS Tahoe 26.3

Quarto check output

❯ quarto check
Quarto 1.9.23
[✓] Checking environment information...
      Quarto cache location: /Users/andrew/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.8.3: OK
      Dart Sass version 1.87.0: OK
      Deno version 2.4.5: OK
      Typst version 0.14.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.9.23
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (external install)
      Chromium: (not installed)
      Chrome Headless Shell: (not installed)
      VeraPDF: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/andrew/Library/TinyTeX/bin/universal-darwin
      Version: 2025

[✓] Checking Chrome Headless....................OK
      Using: Chrome found on system
      Path: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
      Source: MacOS known location

[✓] Checking basic markdown render....OK

[✓] Checking R installation...........OK
      Version: 4.5.2
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /Users/andrew/Library/R/arm64/4.5/library
        - /Library/Frameworks/R.framework/Versions/4.5-arm64/Resources/library
      knitr: 1.50
      rmarkdown: 2.30

[✓] Checking Knitr engine render......OK

[✓] Checking Python 3 installation....OK
      Version: 3.13.1
      Path: /Users/andrew/.virtualenvs/quarto/bin/python3
      Jupyter: 5.7.2
      Kernels: python3

[✓] Checking Jupyter engine render....OK

[✓] Checking Julia installation...

[mcanouil]

Indeed, I discovered that earlier this month and shared with the team (thanks for opening the issue), but all this code comes from skylighting not Quarto, so the PR which brings idiomatic is the current workaround.
Note that the current structure also breaks other things such as code block rules, etc. since skylighting completely break the inherent structure of a code block.

• quarto-cli/src/resources/formats/typst/pandoc/quarto/definitions.typ

  Lines 262 to 266 in 5749d48

  	$if(highlighting-definitions)$
  	// syntax highlighting functions from skylighting:
  	$highlighting-definitions$
  	$endif$

---

Important

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

[mcanouil]

For reference, the upstream code:

• https://github.com/jgm/skylighting/blob/master/skylighting-format-typst/src/Skylighting/Format/Typst.hs

[cscheid]

Unfortunately the situation is not entirely of our doing or under our control, but I do wonder if there's a way to adapt that idea from @andrewheiss's document. @gordonwoodhull Let's chat about this on Monday?

[gordonwoodhull]

The solution at our level is moderately evil 👿 - generate the Skylighting function from Lua, using the correct background color etc.

• fix: Skylighting code blocks in Typst lack proper block styling #14131

I think it's worth doing until we can upstream a better solution (preferably something more flexible).