# CSS 'Active Line' Fails When Highlighting Text

**URL:** <https://forum.obsidian.md/t/css-active-line-fails-when-highlighting-text/4036>\
**Category:** Bug graveyard\
**Tags:** repro, upstream-bug, custom-css\
**Created:** [August 4, 2020, 9:20pm UTC](https://forum.obsidian.md/t/css-active-line-fails-when-highlighting-text/4036 "2020-08-04T21:20:59Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![brhubbar](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/b/43a26b/32.png) [@brhubbar](https://forum.obsidian.md/u/brhubbar)\
**Post date:** [August 4, 2020, 9:20pm UTC](https://forum.obsidian.md/t/css-active-line-fails-when-highlighting-text/4036/1 "2020-08-04T21:20:59Z")

</div>

This is a minor bug relating to the ‘Active Line’ in CSS. As such, I don’t know of a way to reveal it without a custom CSS, but I thought I would share it anyway. I discovered it when using the URL shortening code from @death.au on [this custom-css topic](https://forum.obsidian.md/t/hide-or-truncate-urls-in-editor-using-css/359/3) from back in May. The provided code acts to hide URLs in the editor to keep things readable. It uses the Active Line to determine whether to show an icon or the entire URL (to maintain editability).

This works beautifully, except when highlighting text in the editor. Highlighting seems to deactivate the line, triggering the link icon to show up, rather than the whole URL. Once again, this is likely an irrelevant bug, but I figure it could become relevant for development of a WYSIWYG editor.

### Steps to reproduce

Add the following code (courtesy of death.au) to your custom obsidian.css:

```auto
div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-string.cm-url:not(.cm-formatting) {
    font-size: 0;
}
div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-string.cm-url:not(.cm-formatting)::after {
    content: '🔗';
    font-size: 1rem;
}

```

Create a link in the editor:

```auto
[Show URL when line is active, icon when inactive](myurl.fake-a-link)

[Second link just because](another.url)

```

Highlight some of the text by `Shift + <--` or `Click + Drag`

### Expected result

The URL should be visible whenever working on the line - whether typing or highlighting text (indicating that CSS sees the line as active). When not editing the line, the link icons should replace the URL (indicating that CSS sees the line as inactive).

### Actual result

Highlighting the line causes the icon to show, indicating that CSS sees the highlighted line as inactive.

### Environment

- Operating system: Windows 10 1909

- Obsidian version: v0.8.1

* * *

### Additional information

 ![image](https://forum.obsidian.md/uploads/default/original/2X/5/5503c9f82d351eb2ebc07693e7e1af8686de3380.png)  
Figure 1. Expected Behavior. Active line shows URL (my cursor is on line 3)

 ![image](https://forum.obsidian.md/uploads/default/original/2X/2/21f6174124dc001893a9282534fd561bbe582080.png)  
Figure 2. Unexpected Behavior. Active line shows 🔗 (highlighting line 3)

---

<div class="post-metadata">

**Author:** ![s-kyy](https://forum.obsidian.md/user_avatar/forum.obsidian.md/s-kyy/32/7747_2.png) [@s-kyy](https://forum.obsidian.md/u/s-kyy)\
**Post date:** [August 4, 2020, 9:54pm UTC](https://forum.obsidian.md/t/css-active-line-fails-when-highlighting-text/4036/2 "2020-08-04T21:54:52Z")

</div>

That Al’s occurs as well when using this css: [Meta Post - Common CSS Hacks](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/58)

The line goes into preview mode when highlighting.

---

<div class="post-metadata">

**Author:** ![WhiteNoise](https://forum.obsidian.md/user_avatar/forum.obsidian.md/whitenoise/32/11_2.png) [@WhiteNoise](https://forum.obsidian.md/u/WhiteNoise)\
**Post date:** [December 12, 2020, 12:15am UTC](https://forum.obsidian.md/t/css-active-line-fails-when-highlighting-text/4036/3 "2020-12-12T00:15:33Z")

</div>

@death.au is this still a thing?

is this an upstream problem with codemirror?

---

<div class="post-metadata">

**Author:** ![death.au](https://forum.obsidian.md/user_avatar/forum.obsidian.md/death.au/32/796_2.png) [@death.au](https://forum.obsidian.md/u/death.au)\
**Post date:** [December 16, 2020, 1:19am UTC](https://forum.obsidian.md/t/css-active-line-fails-when-highlighting-text/4036/4 "2020-12-16T01:19:58Z")

</div>

Yes to both. I think it’s because codemirror wasn’t built for this.  
A selected line isn’t necessarily an “active” line, either, but there’s no class for “Selected line” as a selection can comprise multiple lines or a section of a line (or both).  
Relatedly, codemirror has trouble with cursor positioning when resizing things based on activeline like this example.

---

<div class="post-metadata">

**Author:** ![jokysatria](https://forum.obsidian.md/user_avatar/forum.obsidian.md/jokysatria/32/1632_2.png) [@jokysatria](https://forum.obsidian.md/u/jokysatria)\
**Post date:** [August 24, 2021, 1:13am UTC](https://forum.obsidian.md/t/css-active-line-fails-when-highlighting-text/4036/5 "2021-08-24T01:13:11Z")

</div>

this plugin can help for workaround [GitHub - nothingislost/obsidian-codemirror-options](https://github.com/nothingislost/obsidian-codemirror-options)

---

<div class="post-metadata">

**Author:** ![looper](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/l/c0e974/32.png) [@looper](https://forum.obsidian.md/u/looper)\
**Post date:** [September 4, 2021, 2:25pm UTC](https://forum.obsidian.md/t/css-active-line-fails-when-highlighting-text/4036/6 "2021-09-04T14:25:14Z")

</div>

@jokysatria Obsidian sees the plugin but fails to load it when I try to activate it? I’m on Obsidian 0.12.15…

---

<div class="post-metadata">

**Author:** ![jokysatria](https://forum.obsidian.md/user_avatar/forum.obsidian.md/jokysatria/32/1632_2.png) [@jokysatria](https://forum.obsidian.md/u/jokysatria)\
**Post date:** [September 4, 2021, 11:26pm UTC](https://forum.obsidian.md/t/css-active-line-fails-when-highlighting-text/4036/7 "2021-09-04T23:26:44Z")

</div>

I don’t have any problem when install it via community plugin store. where did you install it from? (my obsidian also 0.12.15, installer version 0.12.12)

---

<div class="post-metadata">

**Author:** ![looper](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/l/c0e974/32.png) [@looper](https://forum.obsidian.md/u/looper)\
**Post date:** [September 5, 2021, 5:19am UTC](https://forum.obsidian.md/t/css-active-line-fails-when-highlighting-text/4036/8 "2021-09-05T05:19:33Z")

</div>

Ah, I see! I misunderstood and thought it had to be manually installed. Thank you; problem fixed.

---

<div class="post-metadata">

**Author:** ![Thieske](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Thieske](https://forum.obsidian.md/u/Thieske)\
**Post date:** [October 9, 2021, 7:06pm UTC](https://forum.obsidian.md/t/css-active-line-fails-when-highlighting-text/4036/9 "2021-10-09T19:06:03Z")

</div>

Do you know how to prevent the line going into preview mode when highlighting?

---

<div class="post-metadata">

**Author:** ![s-kyy](https://forum.obsidian.md/user_avatar/forum.obsidian.md/s-kyy/32/7747_2.png) [@s-kyy](https://forum.obsidian.md/u/s-kyy)\
**Post date:** [October 9, 2021, 7:40pm UTC](https://forum.obsidian.md/t/css-active-line-fails-when-highlighting-text/4036/10 "2021-10-09T19:40:28Z")

</div>

Have you tried the plugin people mentioned in replies to this post?

---

<div class="post-metadata">

**Author:** ![Thieske](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Thieske](https://forum.obsidian.md/u/Thieske)\
**Post date:** [October 9, 2021, 8:32pm UTC](https://forum.obsidian.md/t/css-active-line-fails-when-highlighting-text/4036/11 "2021-10-09T20:32:24Z")

</div>

I have now! I had to reread the original post to fully grasp what was being said (sorry very new to css).

I also had to install the ‘Editor Syntax Highlight’ plugin for the ‘Codemirror Options’ plugin to make it work like I want it to.

Thanks for the quick reply!

---

<div class="post-metadata">

**Author:** ![WhiteNoise](https://forum.obsidian.md/user_avatar/forum.obsidian.md/whitenoise/32/11_2.png) [@WhiteNoise](https://forum.obsidian.md/u/WhiteNoise)\
**Post date:** [May 26, 2022, 12:59pm UTC](https://forum.obsidian.md/t/css-active-line-fails-when-highlighting-text/4036/12 "2022-05-26T12:59:53Z")

</div>

Closed on May 26, 2022, 12:59pm UTC



---

<div class="post-metadata">

**Author:** ![WhiteNoise](https://forum.obsidian.md/user_avatar/forum.obsidian.md/whitenoise/32/11_2.png) [@WhiteNoise](https://forum.obsidian.md/u/WhiteNoise)\
**Post date:** [October 13, 2022, 4:06pm UTC](https://forum.obsidian.md/t/css-active-line-fails-when-highlighting-text/4036/13 "2022-10-13T16:06:50Z")

</div>

Archived on October 13, 2022, 4:06pm UTC