How can I hide block-id labels in editor mode?

Custom CSS & Theme Design
1

image

So in editor mode, I would like to make the ^0e6595 block id label not visible in editor mode (just visible in the raw *.md). I was wondering if there was a pre-existing way to do this.

I guess one approach would be to post-process the files and wrap any ^alphanumeric codes in a html tag and style it with css, but I was wondering if somebody had a preexisting approach.

Thanks.

2

You mean the live preview mode? Then this css should work:

.markdown-source-view.mod-cm6.is-live-preview .cm-blockid  {
	display: none;
}
1 Like
3

Thank you!

4

There are a few ways to go about this:

/* hide blockID completely - not recommended */
.cm-blockid {
    opacity: 0;
}

/* hide blockID except if on active line */
:not(.cm-active) > .cm-blockid {
    opacity: 0;
}

/* hide blockID except on hover or active line */
:not(.cm-active) > .cm-blockid {
    opacity: 0;
}

:not(.cm-active) > .cm-blockid:hover {
    opacity: 1;
}

/* dim blockID except when on line */
.cm-blockid {
    opacity: 0.3;
}

.cm-active > .cm-blockid {
    opacity: 0.8;
}

Pick your poison!

I think display: none is going to produce some weird behavior here, but TurkeyTips has a good point. If you only want these for Live Preview, add .is-live-preview to the front of the selectors.

2 Likes
5

I think display: none would be alright here just because the blockids are the last thing on the line, so removing them from the layout shouldn’t do any harm. You’re right though, opacity or visibility: hidden are better.

6

Thanks everyone. Is there an obsidian css reference somewhere? I tried googling / searching obsidian help for “cm-blockid” or “cm-active” and didn’t get much.

I was also curious to see if I can change the block link behavior to make the default text the text from the bullet/block we’re linking to (instead of the blockid). I’m happy to try and figure that out by myself, but some documentation pointers would be appreciated.

Thanks.

7

Yeah there is, but the easiest way is open the obsidian dev tools with “Ctrl+Shift+i” and then click the “Elements” tab. Now you can see all the class names for every html element.

You can also hit the button in the top left corner of this window (looks like a cursor over a square), which lets you click any html element to see it’s name and properties.

1 Like
8

I was mainly referring to editing, e.g. if you wanted to go back and change the line or blockID, add a manual blockID, etc.

Here, using display: none, I can’t arrow-right past the blockID, and trying to type ^ on the next line immediately disappears it. The line numbers are funky as well.

Obsidian_q8llSShny2

1 Like
9

Here’s a great resource as well:

10

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