Codehilite - hl_lines highlighting gets cut off when scrolling horizontally

[Timber232]

Description

Codehilite - hl_lines highlighting gets cut off when scrolling horizontally

Expected behavior

Excepting Codehilite to highlight the entire row

Actual behavior

Steps to reproduce the bug

1. Create a new markdown document in mkdocs material (or use an existing one)
2. Add a code snippet with long text, enough to trigger the horizontal scroll bar
3. highlight some lines using hl_lines, see example below:

Note: Sorry I can't seem to escape ``` properly in github, not sure how to do this - FIXED Thanks @faceslessuser

``` hl_lines="1 2 3 4"
t11ntpj808mbc1gu4lx7n9d8tj5q3ck3t1c0aclc    Liquorice oat cake carrot cake. Halvah lemon drops bear claw fruitcake. Marshmallow danish jelly-o toffee.
jqlksiohper0brg9x2ajcm7ajjf8ptjxprqstvda    Apple pie cake jelly-o sugar plum.
x3mjly0wn48wy7lgf2bfymbykommv8dbyp7an1n8    Toffee candy brownie carrot cake jujubes sweet roll chocolate gingerbread.
q0b5pj6eacuwj3t1i4jv7yxf00mi6osc0h5etcfz    Cupcake tiramisu danish brownie danish jujubes gingerbread toffee gummi bears.
u25qzla31ahqxd2x6b2wgpbxvw88h5w6mujoqtuq    Fruitcake jelly beans candy canes icing pastry liquorice. Bear claw tart chocolate sweet soufflé sweet roll marshmallow ice cream liquorice.
9xcjy4nvh1jinka64lkdr1nhagm8odp0frr56nks    Bear claw tootsie roll toffee biscuit cotton candy macaroon. 
5rmcwguz3jzws8w1hh2jbfdau74jip3f8rbu10oy    Pudding caramels carrot cake sweet roll danish oat cake.
s50wqctf9059ets5ezp4oeq7p6pfr24ntww2d15v    Oat cake macaroon pastry cheesecake. Dessert topping chocolate bar. 
vue3y73jcwsg5um4pw8aqhuv3njgtg9iq0ortx5p    Sesame snaps candy canes muffin lollipop wafer. 
1o6edje4xcb7vtcvct4ghawafdvmvgkx4r0scny5    Macaroon pudding gingerbread. 
```

4. Scroll to the right, notice that the rest of the line does not get highlighted.

Package versions

• Python: Python 2.7.12
• MkDocs: version 0.16.3
• Material: Version: 1.10.0

Project configuration

site_name: My Docs
theme: 'material'
# Extensions
markdown_extensions:
  - meta
  - admonition
  - codehilite
  - toc(permalink=true)

System information

Irrelevant

[squidfunk]

Known bug and not fixable, I'm afraid. If someone comes up with a solution that doesn't break existing functionality, I'm happy to integrate it.

[facelessuser]

Sorry I can't seem to escape ``` properly in github, not sure how to do this

Just surround the portion it with a fence with 1 back tick greater than you need:

````
```
code
```
````

---

To give some background, this issue was introduced when the clipboard copy icon was added to code blocks. Essentially the pre/code or div/code overflow CSS logic was reversed to make adding the clipboard icon easy and manageable. A lot of corner cases were tested for, but unfortunately, this one was overlooked. It is possible though that @squidfunk was aware of this and viewed it as a lesser evil. Since I've run into it, I personally have viewed it a s a lesser evil as I find the clipboard icon to be far more useful.

I did try a number of fixes, but to get the edge to edge highlighting that Material is aiming for, block styling must be used, but due to how overflow is, block cannot calculate the full width to render the block highlight span. There are some other new CSS features that I found alleviate this on Chrome, but they are so new and so poorly/differently supported among browsers that they just aren't practical.

My personal solution was just to set the styling to inline: https://github.com/facelessuser/pymdown-extensions/blob/master/docs/src/scss/_code.scss#L28. It will highlight all the text, but will not be edge to edge in the code block, but that was fine with me. The aesthetics aren't as good, but it is practical and works. You can play with padding to maybe reduce gaps between lines if that bothers you, but I personally didn't care enough. You can see an example by looking here and scrolling down the last example: http://facelessuser.github.io/pymdown-extensions/extensions/superfences/#nested-fences.

[squidfunk]

Actually, it wasn't overlooked, I was fully aware. It worked before we restructured the HTML and CSS, but not on every browser, for example on iOS the behavior was the same as now. For this reason I just thought: what the heck.

There are a lot of compromises in this theme due to the way the Markdown parser (or other extensions) generates the HTML, so this is one of them.

[facelessuser]

Cool, I didn't notice it until after, but wasn't sure if you did :).

[squidfunk]

Closing this, as it's not fixable as of today.