Help adding box-shadow to codeblock

Custom CSS & Theme Design
1

Hi Everyone,
I’m trying to figure out how to apply a box-shadow to my code blocks.
Can someone let me know how to accomplish this?

2

This does it:

/* reading view */
.el-pre:has(> pre > code) {
	box-shadow: 2px 2px 10px 0 rgb(var(--mono-rgb-100), 0.15);
}

/* editing views */
.HyperMD-codeblock {
	box-shadow: 2px 10px 10px 0 rgb(var(--mono-rgb-100), 0.15);
}

code block box-shadow
code block box-shadow1828×522 22.1 KB

I cheated a little for the editing views. A code block there isn’t really a block but individual lines. So I chose values that would “hide” parts of the shadows. You’ll see what I mean if you adjust the shadows by more than a couple of pixels.

If you’re okay with the widths above, :+1:. But if you want to change them and avoid having shadows between each line, then here are the individual selectors to work with:

.HyperMD-codeblock-begin {}

.HyperMD-codeblock-end {}

.HyperMD-codeblock:not(.HyperMD-codeblock-begin, .HyperMD-codeblock-end) {}