Hide or Truncate URLs in Editor using CSS?

Help
2

This is possible, I think, but I question the utility. If you need to modify the url for whatever reason (e.g. there’s extra characters on the end or something) how would you edit it?

3

Actually, I may have come up with something:

2020-05-24_173547
2020-05-24_173547851×103 44.8 KB

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;
}

When your cursor is on the active line, you’ll see the full URL (so you can edit it) and if it’s not the active line, it’s hidden with a single character (in this case 🔗) shown in its stead.

(Thanks to @Silver for exposing the active line with a CSS class :+1:)

27 Likes
4

Wow! This is amazing. I didn’t really know if it was possible or not to do this with CSS, so this is much more than I hoped for! Thanks.

2 Likes
5

Wonderful. Not sure, tho, how to insert or where to insert the code in css file. Where would I place it?

1 Like
6

It should work fine pasted anywhere in your obsidian.css file. Though it’s probably easiest right at the top or right at the bottom of the file

1 Like
7

Magician confirmed. You have broken people’s expectation as to what’s achievable by CSS! :laughing: :+1:

1 Like
8

CSS is great, you could even write CSS functions today.

9

Thanks @Silver, sometimes I break my own expectations :laughing:

What is this wizardry? :open_mouth:

10

@death.au , can you work the same magic to provide a way to hide the # symbol in headings? The change in font size is enough for me to know it’s a heading, and I use a lot of headings, and I don’t like seeing hundreds of # in my editor. Waiting with bated breath…

1 Like
11

Sorry to keep you hanging @cobblepot, but this should be what you need:

.CodeMirror-code > :not(.CodeMirror-activeline) .cm-formatting-header {
  display:none;
}
2 Likes
12

No problem and many thanks, @death.au! I tried combining your two solutions to achieve two other looks but my css isn’t up to the task, apparently. If you are so inclined and have the time, I would love to see solutions for these (no obligation, obviously):

  1. Remove all # symbols from headings but also add a single § to all headers - just one, regardless of heading level.
  2. Remove all # symbols from headings but also add a single § to first-level headings only–other headings get nothing.
13

This is actually pretty easy and simple to do.

In this example you’ll get H1 before the header, so just change content: to content: "§ ".

2 Likes
14

I’ll also add that if you’re looking to do this in the editor, the selectors will be .cm-header-1::before for the H1 or .cm-header::before for all headers.

So, in summary:

.CodeMirror-code > :not(.CodeMirror-activeline) .cm-formatting-header {
  display:none;
}
.CodeMirror-code > :not(.CodeMirror-activeline) .cm-header::before {
  content: "§ ";
}

(and if you want just H1s instead of all headers, use .cm-header-1 instead of .cm-header)
This is just for the editor, and untested

2 Likes
15

hey @death.au thanks for that great code, I used your code as the foundations for this css hack I made

# replaced by §

This is the project I’m working on based on your code:

Org-sidian Bullets ◉ Instead Of # For Headers (Inspired by org-mode)

There’s a strange bug I can’t seem to fix, could you please take a quick look at it

Some headings get the symbols repeated in a strange way

It happens to normal text sometimes

but the bug I can always replicate is when I do something like this:

I create a normal heading

# [[test heading]]

Instead of displaying this
§ [[test heading]]

it displays this
§ [[§ test heading§ ]]

bug-symbol-2020-10-28
bug-symbol-2020-10-281920×1080 87 KB

I’m using your code exactly as is, with a blank obsdian.css to make sure nothing from my theme interferes.

I would really appreciate any help, since my css hack fully depends on this.

Thank you!

16

Without looking too deeply into it, I think it’s probably because a heading with a link gets split up into multiple spans with formatting, etc.
You might try adding :first-child to the selector to see if that helps.

1 Like
17

Thanks for the suggestion @death.au, really appreciate it , unfortunately I wasn’t able to use :first-child without breaking things.

If you got a change would you be willing to help me take a quick look to see what’s wrong

I tried to use something like nth-child() but wasn’t able to make it work either

Here’s the code, it’s pretty much the same as your (plus margins) I just define it in the same way for all the remaining heading sizes

.CodeMirror-code > :not(.CodeMirror-activeline) .cm-formatting-header {
  display:none;
  }
  /* heading 1 */
  .CodeMirror-code > :not(.CodeMirror-activeline) .cm-header-1::before {
  margin-right: 8px;
  content: "◉";
  }
  /* heading 2 */
  .CodeMirror-code > :not(.CodeMirror-activeline) .cm-header-2::before {
  margin-left: 10px;
  margin-right: 8px;
  content: "○";
  }

I understand you are busy, so no worries if you can’t, but it would mean a lot if you got a chance to take look at it.
Thanks!

18

Sorry it took me a while to get around to this, @santi but I did manage to come up with a solution:

.CodeMirror-code> :not(.CodeMirror-activeline) .cm-formatting-header {
  display: none;
}

/* heading 1 */
.CodeMirror-code> :not(.CodeMirror-activeline) .cm-formatting-header+.cm-header-1::before {
  margin-right: 8px;
  content: "◉";
}

/* heading 2 */
.CodeMirror-code> :not(.CodeMirror-activeline) .cm-formatting-header+.cm-header-2::before {
  margin-left: 10px;
  margin-right: 8px;
  content: "○";
}

The trick is .cm-formatting-header+.cm-header-1 so it only targets the .cm-header-1 span that comes directly after the .cm-formatting-header span. Since headers (usually) only have their formatting symbol at the start, this should be fine.

19

Though the above won’t work with Setext-Style headers (the other style of markdown headers) where you put the formatting underneath… for example:

This is a h1
===

This is a h2
---

But In that case, the first-child thing works! So, for completeness sake:

/* heading 1 */
.CodeMirror-code> :not(.CodeMirror-activeline) .cm-formatting-header+.cm-header-1::before,
.CodeMirror-code> :not(.CodeMirror-activeline) .cm-header-1:first-child::before {
  margin-right: 8px;
  content: "◉";
}

/* heading 2 */
.CodeMirror-code> :not(.CodeMirror-activeline) .cm-formatting-header+.cm-header-2::before,
.CodeMirror-code> :not(.CodeMirror-activeline) .cm-header-1:first-child::before {
  margin-left: 10px;
  margin-right: 8px;
  content: "○";
}

… It’s possible I spend too much time working on things that really don’t matter. Especially since Obsidian’s default theme seems to not like links in Setex-style headers:
image

1 Like
20

Thank you so much @death.au I really appreciate it, it works perfectly. I get you, I don’t use “Setex-style headers” but still thanks for including code for it!

I’ll update the code here if anyone else is interested in the full code for all headers

Org-sidian Bullets ◉ Instead Of # For Headers (Inspired by org-mode)

Thanks once again @death.au I was really stuck with it, it means a lot!

1 Like
21

Might you have anymore wisdom to share? How do I hide the brackets / parenthesis [ ] ( ) that wrap each link?

Maybe I’m missing something and there is already a way to do this with a community plugin? I checked out Advanced Obsidian URL and Advanced Appearance but those don’t seem to do what I desire…

449-4Z1
449-4Z1781×296 67.9 KB

Thanks for this tweak! Beautiful.