Long linline highlighted code breaks dark theme

[whudson]

How to reproduce

Make a page in dark mode that uses a long line of code with the {% highlight %} syntax.

What happens?

The long line of code flows off screen, and outside of the body element. When scrolling sideways to read the line, the white background of the html element is seen. The invert()ed colours are only applied to the html body.

Expected behaviour

I would expect that I can write long lines of code in the inline highlighted syntax style without ruining the aesthetics of the theme.

Example

Now I would like to visualize these sets of points on a map just to compare them.

{% highlight python %}

# I skipped the part where I setup the map library
map1 = gmaps.figure(center=map_center, zoom_level=12.64, layout=gmap_layout)
sus_layer = gmaps.symbol_layer(sus_coords[start_at:num_points], fill_color='red', stroke_color='red', info_box_content=info_boxes[start_at:num_points])
fake_layer = gmaps.symbol_layer(fake_coords[start_at:num_points], fill_color='green', stroke_color='green')

map1.add_layer(sus_layer)
map1.add_layer(fake_layer)
display(map1)

{% endhighlight %}

I can pretty easily see that the red points all correspond to actual addresses and locations.

[whudson]

I'm just doing some further testing now, and see that moving the invert() from body to html seems to work for my case, but I'm not sure about the implications of doing this since dark mode is currently selected by the a attribute on the body element.

Will this affect the way that the dark mode switching is intended to work? I will do some further testing and see if I can make a PR for this.