Compact Code Blocks

I don’t like the extra space at the top and bottom of code blocks, so I tweaked it:

GIF 2023-04-13 23-46-23

The language marker is hidden on hover so it’s not a problem.

.CodeMirror-scroll {
  padding-bottom: 48px;
  padding-top: 0;
  overflow-y: hidden !important;
}
.CodeMirror-hscrollbar::-webkit-scrollbar {height: 4px;}
.CodeMirror-vscrollbar::-webkit-scrollbar {display: none;}

/* language marker */
.extensions__code-lang {
  background: var(--ls-secondary-background-color); /* change this color if it doesn't fit your theme */
  opacity: 100%;
  margin-top: 2px; /* change this number if it doesn't fit your theme */
  z-index: 99;
}
.extensions__code-lang:hover {
  opacity: 0;
}

This is actually fantastic, I just want to show appreciation

1 Like