Inline code occludes text selection and vim cursor

Steps to reproduce

In edit mode, select some text that includes inline code.

Expected result

The inline code is properly shown as selected.

Actual result

Most of the visual highlight that indicates what text is selected is occluded, seemingly by the background of the inline code:
Screen Shot Obsidian Inline Code Bug

Environment

  • Operating system: macOS 10.14.6
  • Obsidian version: v0.10.8
    (Theme = none; no custom CSS snippets)

Additional information

This glitch is not present for code blocks or other special types of text I have tested.

2 Likes

Bug with selection area background z-index.

image

Thanks for reporting this- bugging me too.

I thought this was just me or the theme “minimal” I was using. +1 for me

Steps to reproduce

Given a .md file with this content:

In line `code` is not correctly highlighted when selected in edit mode.

    ```
    Unlike code blocks, which are.
    ```

Select the text.

Expected result

All the selected text to have the background for selected text applied.

Actual result

The text in in-line code is not highlighted.

Environment

  • Operating system: macOS Big Sur
  • Obsidian version: 0.11.7

Additional information

When previewing it works as expected.

Steps to reproduce

Type some `backtick-quoted code`
With vim plugin enabled, position the normal-mode cursor within the code

Expected result

The cursor renders normally

Actual result

The highlighted background of the code seems to obscure the green block cursor, so only the top and bottom are visible

Environment

  • Operating system: Windows 10
  • Obsidian version: v0.6.7
  • Using custom CSS: No

Additional information

Example:
image

3 Likes

Still an issue

Yep, same here. It happens in MacOS, Obsidian v0.11.4 as well.

It happens in single-backticked code, but not triple-ticked code-blocks. With a theme and without.

image
image

Thanks for the reminder, looked into it before but there wasn’t an easy fix.

Let me know if anyone has any ideas! (If I recall correctly, if we change the z-index of the selection, it would cover the text as well.)

Hey, this isn’t a real solution but in case this was bothering anyone else, what I did was create a basic CSS file with the snippet:

.cm-inline-code {
    background-color:rgba(0,0,0,0.2) !important;
}

This basically preserves the appearance of the inline code blocks in the editor, although it still darkens the cursor slightly.

You can also make the background fully transparent, i.e. background-color:transparent !important;. This will make the dark background for inline code go away, (so it will look like other colored text) but will make the cursor fully visible.

3 Likes

I have a fix for this in this plugin I just put together GitHub - nothingislost/obsidian-codemirror-options

The option which addresses this issue is called “Style Active Selection” and it behaves like this:

cm-text-selection-2

Do note that it relies on the deprecated CodeMirror 5 direct API and will break when WYSIWYG is rolled out. I’ll do what I can to make this work with CM6 once the APIs are available.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.