Scroll 'Coy' background with contents

[nickersonm]

Fix on themes/prism-coy.css: attaches <pre> background (alternating line colors) to <code> contents when in limited-height <pre> that requires scrolling.

Example: http://prismjs.com/ with 'Coy' theme selected; most evident on smallest scroll, such as the SVG logo highlight.

[LeaVerou]

Hey, thanks! Is there an online demo of this fix anywhere?

[nickersonm]

Usage: drag the scroll bar vertically by small amounts.
Main branch: https://jsfiddle.net/d3L8nvjf/
With patched coy-style.css: https://jsfiddle.net/dbksxu0c/1/

However, from reading other prism commits and comments, I realized that this removes the 'curved' dropshadow below the <pre> blocks (which are hidden at narrower sizes- expand the fiddle result window), inserted with :before and :after entities. This is because the dropshadow is on the same layer as the background: the contents of the <pre>, and is also aligned to the <pre>. I have not been able to find a good CSS-only solution to including both.

It would be possible by wrapping the <pre> in a <div> for the positioning (explained here), but that's not desired behavior.

[LeaVerou]

Thanks for the demo, that was fast!

I realized that this removes the 'curved' dropshadow

Yeah, that would be a problem I’m afraid… :/

[nickersonm]

Understood. I committed a change to this pull branch that reverts to using the original overflow: auto on the <code> block and moves the background from the <pre> block to the <code>.

It seems to both scroll the background and preserve everything else, but I have not tested it as extensively.

Demo:
Main branch: https://jsfiddle.net/d3L8nvjf/
With patched coy-style.css: https://jsfiddle.net/dbksxu0c/1/ (auto-updated as it uses the raw nickersonm/patch-2 branch CSS)

[Golmote]

Demo seems to work just fine! Thank you for contributing!