CSS snippet that gives the active line a different color

Share & showcase
1

Giving the active line a different background color helps us to know where the cursor is and where we are working right now in the note.

Dec-23-2021 15-58-53


/*for legacy editor*/
.CodeMirror-activeline.CodeMirror-linebackground{
  background-color: #468eeb33;
}


/*for live preview mode*/
.cm-active.cm-line{
  background-color: #468eeb33;
}
15 Likes
2

Thanks for sharing.

Angel :angel:

3

@GLight : thanks a lot for this. I had the snippet for CM5 but not for CM6, which is where most of my Obsidian time is spent.

1 Like
4

Lovely! Works great for me! Thank you for the snippet.

1 Like
5

Thanks, this works well!
One question that I have: In the theme I use, the legacy editor deactivates the background-color of the active line as soon as some text is selected.
Now in live preview this does not seem to be the case so that I need to use two different background-colors for selection and active line. I really liked the old behaviour - is it possible to regain it also in live preview?

6

It does not work for me - every other css code does work except for active line for some reason :frowning:

7

Thanks for the snippet! I upgraded it a bit so it follows the setted accent color:

/*for legacy editor*/
.CodeMirror-activeline.CodeMirror-linebackground{
  background-color: hsla(var(--accent-h, 254), var(--accent-s, 80%), var(--accent-l, 68%), 0.2);
}

/*for live preview mode*/
.cm-active.cm-line{
  background-color: hsla(var(--accent-h, 254), var(--accent-s, 80%), var(--accent-l, 68%), 0.2);
}
8

really nice! doesn’t work in Codeblocks though, is there an easy fix for that?

9

I do have a cure for this.

.theme-dark {
  --activeline-background: #7364753f;
  --activeline-border-color: rgb(89, 169, 244);
  --activeline-lineNumber-brightness:3;
}

.theme-light {
  --activeline-background: rgba(24, 130, 229, 0.27);
  --activeline-border-color: rgb(5, 119, 227);
  --activeline-lineNumber-brightness:0;
}

.CodeMirror-activeline.CodeMirror-linebackground{
  background-color: var(--activeline-background);
  border-left-style: solid;
  border-left-width: 0px;
  border-left-color: var( --activeline-border-color);
  border-right-style: solid;
  border-right-width: 1em;
  border-right-color: var( --activeline-border-color);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var( --activeline-border-color);
}

.cm-active.cm-line{
  background-color: var(--activeline-background);
  border-left-style: solid;
  border-left-width: 0px;
  border-left-color: var( --activeline-border-color);
  border-right-style: solid;
  border-right-width: 1em;
  border-right-color: var( --activeline-border-color);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var( --activeline-border-color);
}

.cm-lineNumbers .cm-gutterElement.cm-active {
  font-weight: bold !important;
  filter: brightness(var(--activeline-lineNumber-brightness));
  display: flex;
/*border-right: 1px solid var(--interactive-accent);*/
}

And now it looks like the following in the code block:

image
image895×181 4.12 KB

10

Please check it out the snippet below (It works inside codeblocks too):

just select the color you want for the background and active line number

It will highlight the background of the current line and the line number color (gutter).

.cm-active.HyperMD-codeblock.HyperMD-codeblock-bg.cm-line,
.cm-active:not(.cm-gutterElement) {
  background-color: rgba(128,128,128,.3);
}

.cm-gutterElement.cm-active {
  color: #5ff188;
}

I hope you find it useful.

All the best