Code highlighting colours the whole line in --md-code-hl-color

[mocdaniel]

Context

I'm working on a freshly setup instance of Material for MkDocs and code highlighting seems to be off, compared to the results shown in the docs.

Bug description

Compared to the example from the docs, the result rendered on my end is

a) yellowish instead of blue

b) renders the whole line in --md-code-hl-color instead of just the left border and the remainder in --md-code-hl-color according to my dev tools:

.highlight .hll {
    background-color: var(--md-code-hl-color);
    display: block;
    margin: 0 -1.1764705882em;
    padding: 0 1.1764705882em;
}

My related configuration looks like this, I went by the book, i.e. the docs, if not mistaken:

markdown_extensions:
  - abbr
  - admonition
  - attr_list
  - md_in_html
  - pymdownx.details
  - pymdownx.highlight:
      use_pygments: true
      pygments_lang_class: true
      line_spans: __span
  - pymdownx.snippets
  - pymdownx.superfences
  - pymdownx.tabbed:
      alternate_style: true

Related links

I took a good look at the pygments/Highlight configuration:

• https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#highlight

as well as the docs regarding how to do highlighting and how to theme it:

• https://squidfunk.github.io/mkdocs-material/reference/code-blocks/#highlighting-specific-lines
• https://squidfunk.github.io/mkdocs-material/reference/code-blocks/#custom-syntax-theme

I managed to get the bluish highlight working this way, but it still covered the whole line in the darker variant and omitted the --light variant altogether.

Reproduction

9.3.1-highlight-wrong-css.zip

Steps to reproduce

1. Enable code highlighting as per my example and the documentation linked above
2. Run mkdocs serve or mkdocs build
3. Open the result and see code highlighting be different from the examples in the docs linked above

Browser

No response

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction.

[alexvoss]

Hi,

thanks for the report and the reproduction. I have run it and see the same result as you do. However, when I compiled the reproduction earlier using my mkdocs install the issue did not appear. I was using the insiders version, though. Let me see if I can figure out where this comes from and get back to you. (I just started to contribute to material-mkdocs, so may take a little longer than squidfunk would, please bear with me.)

Cheers,

Alex

[alexvoss]

Quick update: I found no relevant differences in what mkdocs build produces once the info plugin is deactivated again. As far as I can tell, both the insiders and the public version produce the same html for the code segment. This suggests to me that it is not some regression in mkdocs-material but that the difference lies in the pymdownx plugin or its dependencies. I will have a look to see if I can spot what the crucial difference is there and figure out if the intended behaviour changed there or whether it is a regression on their part.

[facelessuser]

@alexvoss, you are welcome to dig into pymdownx plugins if you like, but there have been no significant changes to the output format for a very long time. Line highlights are controlled by Pygments. We simply feed in the specified lines.

I am more than happy to fix anything if you were somehow able to point to pymdownx, but I am very skeptical.

[alexvoss]

@facelessuser thanks, that is good to know. I will have a look - mainly to learn about the interactions between mkdocs, mkdocs-material, plugins and JS libraries / CSS used. I am a new contributor, so this is a useful exercise, methinks.

[alexvoss]

Ok, I think I understand what is going on. There is a difference in _highlight.scss between the public version and the insiders version. Sorry, took me a little to figure out where to look. It seems trivial, so will make a pull request to see if squidfunk is happy to change it. This merely involves adding a box-shadow to the highlighted lines and changing the highlight color to be the same as shown in the documentation.

[alexvoss]

Alright, pull request #6024 should fix this unwanted divergence between public and insider.

[mocdaniel]

Wow, that was fast! Thanks for your efforts, let's wait for a merge ^^

[alexvoss]

I managed to create a pull request but not actually request a review from squidfunk, which is now fixed.

[squidfunk]

Fixed via #6024, thanks to @alexvoss!

[squidfunk]

Released as part of 9.3.2.