Too much indentation in highlighted code in Weasyprint

[minthemiddle]

What is different than expected?

I enter a code block (e.g. Python) in a markdown file.
Then, I convert to a PDF with Pandoc (3.1.11, Mac Homebrew) with highlighting on (= default) with Weasyprint.
There is a huge margin before the actual code (see area with label (1) in screenshot):

I lose a lot of valuable space.
And it's odd that when the code line breaks, it does use this space. (see area with label (2) in screenshot)

What I tried to fix it myself?

No hightlight = no indentation

I checked what happens when I switch highlighting off (--no-hightlight).
And sure enough, the indentation is as expected (no indentation at label (1)).

Add line numbers = total chaos

Next, I added line numbers via python{.numberLines}

Try to fix CSS manually

I suspected the highlight wrapper .sourceCode and added some margin and padding resets:

.sourceCode,
.sourceCode * {
    margin-left: -15px;
    padding: 0;
}

.sourceCode span {
    margin: 0;
}

Well, did not really help:

Minimum reproducible setup

Run pandoc:

pandoc input.md -o output.pdf \
--highlight-style=kate \
--pdf-engine=weasyprint \
--pdf-engine-opt=--pdf-variant=pdf/ua-1 \
--css=styles/weasyprint.css \

Python in Markdown:

def create_multiple_pizzas(num_pizzas):
    pizzas = []
    for _ in range(num_pizzas):
        topping = input("Enter a topping: ")
        if topping != 'jam':
            pizza = "Your pizza: " + topping
            pizzas.append(pizza)
            # Print statement to check pizza addition
            print("Pizza added:", pizza)
        else:
            print("Jam topping not allowed.")
    return pizzas

print(create_multiple_pizzas(2))

CSS:
I don't have anything specific that could cause it in my custom CSS:

/*.sourceCode,
.sourceCode * {
    margin-left: -15px;
    padding: 0;
}

.sourceCode span {
    margin: 0;
}*/

pre, code {
/*    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;*/
    line-height:1.5;
    padding: 5px;
    background-color: hsl(210, 29%, 69%);
    font-family: var(--font-mono);
}

Why reporting as bug?

• Might be actually unintended and hence a bug
• And: Google Group is down, no replacement place to discuss right now

[jgm]

Weasyprint just produces a PDF using the CSS you provide. So this should just be a matter of adjusting the CSS to your taste. But you may need to study the HTML pandoc produces for highlighted blocks in order to figure out what CSS adjustments are needed.

[minthemiddle]

Keeping this issue as reference for others using Weasyprint and <code> highlighting.

I could extract all styles related to highlighting:

/* CSS for syntax highlighting */
pre > code.sourceCode {
    white-space: pre;
    position: relative;
}
pre > code.sourceCode > span {
    line-height: 1.25;
}
pre > code.sourceCode > span:empty {
    height: 1.2em;
}
.sourceCode {
    overflow: visible;
}
code.sourceCode > span {
    color: inherit;
    text-decoration: inherit;
}
div.sourceCode {
    margin: 1em 0;
}
pre.sourceCode {
    margin: 0;
}
@media screen {
    div.sourceCode {
        overflow: auto;
    }
}
@media print {
    pre > code.sourceCode {
        white-space: pre-wrap;
    }
    pre > code.sourceCode > span {
        text-indent: -5em;
        padding-left: 5em;
    }
}
pre.numberSource code {
    counter-reset: source-line 0;
}
pre.numberSource code > span {
    position: relative;
    left: -4em;
    counter-increment: source-line;
}
pre.numberSource code > span > a:first-child::before {
    content: counter(source-line);
    position: relative;
    left: -1em;
    text-align: right;
    vertical-align: baseline;
    border: none;
    display: inline-block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0 4px;
    width: 4em;
    background-color: #ffffff;
    color: #a0a0a0;
}
pre.numberSource {
    margin-left: 3em;
    border-left: 1px solid #a0a0a0;
    padding-left: 4px;
}
div.sourceCode {
    color: #1f1c1b;
    background-color: #ffffff;
}
@media screen {
    pre > code.sourceCode > span > a:first-child::before {
        text-decoration: underline;
    }
}

[lawcho]

A work-around is to put this in my CSS file:

/* Work around pandoc ticket #9292 */
pre > code.sourceCode > span {
  text-indent: 0 !important;
  padding-left: 0 !important;
}