blog! “Server-Side Rendering of Embedded Markdown Code Snippets in WordPress”
Because I'm a grumpy old man, I don't use Gutenberg or Block themes on my WordPress. Instead, I write everything in Markdown. When I write code snippets in Markdown, they look like this: ```php $a = 1; echo $a; if ($a < 5) { // Do Something return thing( $a, true …
⸻
#HowTo #php #programming #WordPress
Can't be arsed creating a dark mode for my code-highlighting.
Just going to shove `filter: invert(1);` in the CSS when someone selects Dark.
OK #CSS nerds, I'm stuck on a problem.
My `<code>` blocks scroll horizontally when they overflow (good!) but is there any way to slightly fade out the right side *only* if there's further content to be seen?
I want to make it a bit more obvious if there's some more content to be seen. No everyone scrolls down to see the x-axis scroll bar.
(Not looking for Google results, thanks.)
@Edent I do something similar with Craft. Everything in Markdown.
I need to have a code-snippet solution. I’ve only run into the issue once but it caused some headaches for me when trying to publish my email.
@Edent In the Python example, the `datetime` import has a different color than the other imports. Just a random observation.
@tomayac yeah, there is some weird colouring going on.
TBH, everyone seems to have a different theme for their preferred IDE - so I might just go with rainbow colours 
@Edent Yes! A after pseudo element with the same color as the background. Make it relatively small (0.5rem?). And attach it to the right side of the container.
@Edent And add a gradient to transparent obviously 
@OddDev Not a bad plan. But it shows up even when there's nothing to scroll.
And, unless I'm missing something, scrolls with the content.
@Edent Yes! That's why it needs to be the same color as the background. And you should add a gradient to transparent.
@Edent Plus it needs to be positioned absolute in relation to the immediate container.
@Edent @Edent https://codesandbox.io/p/sandbox/polished-wind-72wyrk?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clvjaveig0006206btzlys2ld%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clvjaveig0002206bdvysgzax%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clvjaveig0003206baplecwub%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clvjaveig0005206b2hq6njzi%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clvjaveig0002206bdvysgzax%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvjaveig0001206b0xthpsa9%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.html%2522%257D%255D%252C%2522id%2522%253A%2522clvjaveig0002206bdvysgzax%2522%252C%2522activeTabId%2522%253A%2522clvjaveig0001206b0xthpsa9%2522%257D%252C%2522clvjaveig0005206b2hq6njzi%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvjaveig0004206bm98nk39g%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clvjaveig0005206b2hq6njzi%2522%252C%2522activeTabId%2522%253A%2522clvjaveig0004206bm98nk39g%2522%257D%252C%2522clvjaveig0003206baplecwub%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clvjaveig0003206baplecwub%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D
@Edent https://lea.verou.me/blog/2012/04/background-attachment-local/ or https://kizu.dev/shadowscroll/ or https://www.bram.us/2019/10/24/pure-css-scroll-shadows-vertical-horizontal/ or https://daverupert.com/2023/08/animation-timeline-scroll-shadows/ if you want to use `animation-timeline`. Since Google Search is broken nowadays :)
@KrijnHoetmer ah! That gets me a bit closer. Thanks 
@Edent one technique is using a certain padding and showing the fading gradient either way.
@Edent Using the pseudo element after or before with absolute positioning and relative positioning on the element itself, that is.
@Edent I’d probably combine @Kilian’s masking with @hexagoncircle’s scroll-driven animation https://polypane.app/blog/my-take-on-fading-content-using-transparent-gradients-in-css/ https://fosstodon.org/@hexagoncircle/112219009267749252