Highlight current line - another approach

[ms3056]

I've tweaked the highlight current line a bit to make more use of the gutter. It uses a mono font I purchased, so change it to something you like.

/* Color the line number for the active line */
.cm-active.cm-line {
  color:  var(--ctp-accent) !important;
  filter: brightness(1.6) !important;
}

/* The font is a mono font */
.cm-lineNumbers .cm-gutterElement {
  font-family: "MonoLisa";
  font-feature-settings: "zero" !important;
  color: var(--color-accent) !important;
  filter: brightness(0.6);
  font-size: 1.3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Highlight gutter number */
.cm-lineNumbers .cm-gutterElement.cm-active {
  border-right: 3px solid var(--interactive-accent);
  font-weight: bold !important;
  filter: brightness(1.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

[tophee]

Thanks for sharing. I found your post while trying to figure out how to increase the distance between the highlighted border and the text:

Your CSS gave me the idea that instead of trying to add some padding or something, I can just use the right border of the line numbers :-)

Now I just need to find out how to remove the original border (it seems to be just me, but it annoys the hell out of me that it sits so tight with the text)...

Oh, I just realized that I can just deactivate the border in the theme's style settings. Mission accomplished.

Thanks again for sharing.

[tophee]

Actually, now I find that the highlight bar is too close to the line number. So I still need to find out how to add padding. I'll post it here once I figured it out, but if anyone knows how to do it, please don't hesitate to provide some clues ;-)

[ms3056]

Add padding-right as so - seems to push everything to the right a bit:

.cm-lineNumbers .cm-gutterElement {
  font-family: "Rec Mono Duotone";
  font-feature-settings: "zero" !important;
  color: var(--color-accent) !important;
  font-size: 1.3em;
  display: flex;
  justify-content: center; 
  align-items: center;
  padding-right: 10px !important;
}

[tophee]

Thanks! I further tweaked the settings because I wanted the line numbers to justify right and align at the top. Here is the solution that seems to work for me:

/* Active line formatting */
.cm-active.cm-line {
  color:  var(--ctp-accent) !important;
  filter: brightness(1.6) !important;
}

/* Active line number formatting */
.cm-lineNumbers .cm-gutterElement.cm-active {
  border-right: 3px solid var(--interactive-accent);
  padding-right: 9px;
  margin-left: -6px;
  font-weight: bold !important;
  filter: brightness(1.3);
}

/* Line numbers formatting */
.cm-lineNumbers .cm-gutterElement {
  border-right: 9px solid transparent;
  display: flex;
  justify-content: right;
  align-items: top;
}

It looks like this:

Some maths was needed to keep all line numbers steadily in place when the active line changes and since my knowledge of CSS is minimal, I'm not sure how fragile or hacky my solution is, so if there is a more elegant way, let me know.

I also started experimenting with a version that uses em instead of px to make the measurements relative to font size, but I noticed that line number size is constant, even when the editor font size changes, so I stopped wasting my time with that.

[ms3056]

I thought I would share this - with the help from user FireIsGood on the Discord this version aligns everything very precisely. There are two versions - one is a line, the other is a circle. comment/uncomment as you like.

/* Active line formatting */
.cm-active.cm-line {
  filter: brightness(1.2) !important;
}

.cm-line.cm-active {
  background-color: rgba(var(--ctp-accent), 0.02);
}

.cm-gutter {
  overflow: visible !important;
  font-size: 1.2em;
}

.cm-gutterElement {
  display: flex;
  justify-content: right;
  align-items: center;
  font-family: "Rec Mono Duotone";
  font-feature-settings: "zero" !important;

}

.cm-gutterElement.cm-active {
  position: relative;

}

.cm-gutterElement.cm-active::after {
  content: '';
  position: absolute;
  left: 0px;
  right: -2px;
  aspect-ratio: 1/1;
  /* circle version */
  /* border: 2px solid rgba(var(--ctp-accent), 0.5);*/
  /* border-radius: 100%;*/
  /* translate: 0 -1px; */

  /* Line at the right version */
    border-right: 3px solid rgba(var(--ctp-accent), 0.5);
    translate: 5px 0;
  
}

[ms3056]