Scrollable/compact codeblocks | libVencore | Page 1

magic beacon Apr 21, 2025, 8:33 PM

#

this doesnt work for shiki so add these couple of lines:

- .codeContainer__75297 > code {
+ .codeContainer__75297>code,
+ .vc-shiki-root .vc-shiki-code {
// at the bottom add this to keep the copy button on the bottom right of code block
+ .vc-shiki-btns {
+  position: sticky;
+  display: flex;
+  justify-content: flex-end;
+}

magic beacon Apr 21, 2025, 8:49 PM

#

welp not sure whats going on but now discord doesnt want to take the btns css even if i add !important to all the props 🤷‍♀️ if anyone knows how to fix feel free ig

modern heath Apr 21, 2025, 11:20 PM

#

i think you forgot the .

#

the button doesnt go to the corner though

#

its just a little bit away from the edges

#

oh

#

i think its because its position sticky and not absolute?

magic beacon Apr 22, 2025, 12:26 AM

#

modern heath i think you forgot the .

facepalm it was... lol

magic beacon Apr 22, 2025, 12:28 AM

#

modern heath i think its because its position sticky and not absolute?

and yea, im pretty sure sticky stuff cant be positioned, i tried doing bottom: 0; right: 0; but didnt move it

modern heath Apr 22, 2025, 12:42 AM

#

it’s because it’s not position absolute anymore

#

so it gets affected by the padding

foggy girder Apr 22, 2025, 9:12 PM

#

magic beacon and yea, im pretty sure sticky stuff cant be positioned, i tried doing `bottom: ...

.vc-shiki-code{
  padding: 10px 0 0 10px !important;
}

#

it should help

foggy girder Apr 22, 2025, 9:13 PM

#

magic beacon this doesnt work for shiki so add these couple of lines: ```diff - .codeContaine...

and delete .vc-shiki-code from here

#

only problem is shiki block looking like this

#

additional line

azure seal Apr 24, 2025, 6:44 PM

#

doesnt seem to work at all for me

azure seal Apr 24, 2025, 8:04 PM

#

foggy girder ``` .vc-shiki-code{ padding: 10px 0 0 10px !important; } ```

would one of u be able to just paste the whole thing in by chance?

foggy girder Apr 24, 2025, 8:05 PM

#

no problem

azure seal Apr 24, 2025, 8:06 PM

#

ty

foggy girder Apr 24, 2025, 8:07 PM

#

.codeContainer__75297 > code, .vc-shiki-code {
  max-height: var(--codeblock-height);
  overflow-y: scroll;
  
  &::-webkit-scrollbar {
    height: 8px;
    width: 8px;
  }
  &::-webkit-scrollbar-corner {
    background-color: transparent;
  }
    &::-webkit-scrollbar-track, &::-webkit-scrollbar-thumb {
    visibility: hidden;
  }
  &::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    background-color: var(--scrollbar-thin-thumb);
    border: 2px solid transparent;
    border-radius: 4px;
    min-height: 40px;
  }
  &:hover::-webkit-scrollbar-track, &:hover::-webkit-scrollbar-thumb {
    visibility: visible;
  }
  &::-webkit-scrollbar-track {
    background-color: var(--scrollbar-thin-track);
    border: 2px solid var(--scrollbar-thin-track);
    border-color: var(--scrollbar-thin-track);
  }
}
.vc-shiki-btns {
    position: sticky;
    display: flex;
    justify-content: flex-end;
  }
.vc-shiki-code{
  padding: 10px 0 0 10px !important;
}

#

--codeblock-height add to :root with your preference

azure seal Apr 24, 2025, 8:17 PM

#

for some reason not sure why the snippet just doesnt work at all

foggy girder Apr 24, 2025, 8:24 PM

#

have you --codeblock-height set?

#

:root {
    --codeblock-height: 250px;
}

#

@azure seal

azure seal Apr 24, 2025, 8:33 PM

#

i forgot the colon lol

foggy girder Apr 24, 2025, 8:34 PM

#

oh man

#

and how about now?

azure seal Apr 24, 2025, 8:35 PM

#

yea works now thanks

foggy girder Apr 24, 2025, 8:43 PM

#

no problem

runic swallow Apr 29, 2025, 1:25 AM

#

I added the ability to resize these with the mouse in the bottom right-hand corner. Min-size is one line, max size is the size of the entire snippet.

:root {
  --codeblock-height: 5.4rem;
}

.codeContainer__75297 > code {
  min-height: 0.95rem;
  max-height: max-content;
  height: var(--codeblock-height);
  overflow-y: scroll;

  &::-webkit-scrollbar {
    height: 8px;
    width: 8px;
  }

  &::-webkit-scrollbar-corner {
    background-color: transparent;
  }
    &::-webkit-scrollbar-track, &::-webkit-scrollbar-thumb {
    /* visibility: hidden; */
  }

  &::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    background-color: var(--scrollbar-thin-thumb);
    border: 2px solid transparent;
    border-radius: 4px;
    min-height: 40px;
  }

  &:hover::-webkit-scrollbar-track, &:hover::-webkit-scrollbar-thumb {
    visibility: visible;
  }

  &::-webkit-scrollbar-track {
    background-color: var(--scrollbar-thin-track);
    border: 2px solid var(--scrollbar-thin-track);
    border-color: var(--scrollbar-thin-track);
  }
  
    resize: vertical;
}

sturdy otter May 4, 2025, 5:06 AM

#

What code do I shove in to make this work LOL

wise latch May 21, 2025, 4:38 PM

#

foggy girder only problem is shiki block looking like this

I've been trying to find a fix for this, can't seem to get anything working 😭

modern heath May 21, 2025, 4:39 PM

#

i dont think you can fix it

wise latch May 21, 2025, 5:50 PM

#

you could with javascript

wise latch May 21, 2025, 6:09 PM

#

most likely with a plugin

#

or just alter the shiki code blocks plugin

runic swallow May 23, 2025, 10:26 PM

#

modern heath i dont think you can fix it

Change position: sticky to position: absolute like so:

.vc-shiki-btns {
    position: absolute;
    display: flex;
    justify-content: flex-end;
  }

Extra line at bottom gone. Copy button still where it should be.

wise latch May 24, 2025, 3:14 AM

#

runic swallow Change `position: sticky` to `position: absolute` like so: ``` .vc-shiki-btns { ...

go to a scrollable code, it breaks then

#

it literally stays in the same spot

runic swallow May 26, 2025, 2:15 AM

#

Idk:

#

I've changed some other things like making them take up the full width, and giving them a resize handle. Plus I'm using it with Shiki.

Here's my whole block of code box changes, as they sit today:

#

/* Code blocks */
[id^=message-content] > pre > div > code,
[id^=message-accessories] .textContainer__4d95d {
  min-height: calc(var(--codeblock-padding) + 3em + 6px);
  height: calc((var(--codeblock-numlines) * 1.5em) + var(--codeblock-padding) + 1.5em + 6px);
  line-height: 1.5em !important;
  max-height: fit-content;
  resize: vertical;
  box-sizing: border-box;
  
  /* Optimized scrolling */
  transform: translateZ(0);
  will-change: scroll-position;
  contain: layout style paint;

  .vc-shiki-lang {
    margin: 0;
    font-size: inherit !important;
    line-height: inherit !important;
  }

  &::-webkit-scrollbar {
    height: 8px;
    width: 8px;
  }

  &::-webkit-scrollbar-corner {
    background-color: transparent;
  }
  
  &::-webkit-scrollbar-track, 
  &::-webkit-scrollbar-thumb {
    visibility: hidden;
    transition: visibility 0.2s ease;
  }
  
  &::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    background-color: var(--scrollbar-thin-thumb);
    border: 2px solid transparent;
    border-radius: 4px;
    min-height: 40px;
  }

  &:hover::-webkit-scrollbar-track, 
  &:hover::-webkit-scrollbar-thumb {
    visibility: visible;
  }

  &::-webkit-scrollbar-track {
    background-color: var(--scrollbar-thin-track);
    border: 2px solid var(--scrollbar-thin-track);
    border-color: var(--scrollbar-thin-track);
  }
}

.visual-refresh div[class^=newMosaicStyle__] {
  max-width: unset;
}

div[class^=nonVisualMediaItemContainer] {
  max-width: calc(100% - var(--custom-message-margin-left-content-cozy)) !important;
  min-width: calc(100% - var(--custom-message-margin-left-content-cozy)) !important;
}

div[class^=nonVisualMediaItem_]{
  width:100%;
}

.vc-shiki-btns {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  transform: translateZ(0);
  contain: layout;
}
  
.vc-shiki-code {
  padding: var(--codeblock-padding) 0 0 var(--codeblock-padding) !important;
}

.vc-shiki-container {
  min-width: 100%;
}

#

Oh shit, the copy button isn't visiblein my screenshots because I'm a dolt and moved my mouse lmao

#

Let me play with this again - I had this fixed at one point but since I've redone my theme over the last week I broke it.

runic swallow May 26, 2025, 3:04 AM

#

Ah, it was:
margin-top: -24px
with
position: sticky
that worked:

.vc-shiki-btns {
  position: sticky;
  margin-top: -24px;
  display: flex;
  justify-content: flex-end;
  transform: translateZ(0);
  contain: layout;
}

#

wise latch May 26, 2025, 4:32 AM

#

runic swallow ```css /* Code blocks */ [id^=message-content] > pre > div > code, [id^=message-...

this works great! can you share your variables you're using as well?

#

and could you explain what's going on here:


.visual-refresh div[class^=newMosaicStyle__] {
  max-width: unset;
}

div[class^=nonVisualMediaItemContainer] {
  max-width: calc(100% - var(--custom-message-margin-left-content-cozy)) !important;
  min-width: calc(100% - var(--custom-message-margin-left-content-cozy)) !important;
}

div[class^=nonVisualMediaItem_]{
  width:100%;
}

just curious

#

I'm assuming they're for making the width of the code take up the full width

wise latch May 26, 2025, 5:40 AM

#

there is one issue with your setup- you can't highlight specific words/letters on the last line

runic swallow May 27, 2025, 2:24 PM

#

wise latch I'm assuming they're for making the width of the code take up the full width

That's correct, especially for the file embed code boxes, as they are treated differently from the in-message code boxes. I'll play with the last line thing - I think it should be possible to play with cursor interactivity, z-index and element sizing to fix that.

Here's my vars:

  --codeblock-padding: 10px;
  --codeblock-height: 5.4rem;
  --codeblock-numlines: 10;

#

Add:
pointer-events: none; to .vc-shiki-btns
and
pointer-events: all; to .vc-shiki-btn

This removes the click and drag interactivity from the "row" that the copy button is on, and then adds it back to just the button. Let's you select text on that last line.

#

As for the margin thing - we're shifting the element up so it isn't extending the bounding box of the parent container. Hard coding it in pixels kind of sucks - the solution there would be to set the height of the button with a variable and then shift the margin by the same amount as the height of the button with the same variable.

wise latch May 27, 2025, 5:56 PM

#

ic, thank you!

runic swallow Jun 28, 2025, 12:51 AM

#

I've been fucking with this and shiki for a while and am finally happy with it. I made the language bar "sticky" made my resize handle consistent (there was a weird gaphical issue before, redrawing it with an SVG fixes this) and gave it some styling. Looks like picture. YMMV as I'm using this in a custom compact vertical layout.

#

📎 scrollable-codeblocks-shiki.css

wise latch Jun 28, 2025, 2:15 AM

#

oh wow

#

this line:

/* Message container width constraints */
div[class^="container__"] {
  max-width: calc(100% - var(--custom-message-margin-left-content-cozy)) !important;
  min-width: calc(100% - var(--custom-message-margin-left-content-cozy)) !important;
}```

ruins some things

#

#

runic swallow Jun 28, 2025, 3:38 AM

#

Ah, you can safely drop those, those are pretty specific to what I've been doing for keeping message boxes to identical widths.

#Scrollable/compact codeblocks