Custom tags rendering with Emojis

Customization Look what I built
1

I often would like to use emoji tags with backlinks lke #[[⭐️]] to highlight blocks. However, they are not visually outstanding at a glance:

image

To make the tags more attractive, I did some tricks to

  • use #star instead of #[[⭐️]] to make it a bit easier to type
  • give it a red background & shadow
  • hide the # sign

Here it is a demo

image
image1380×310 39.9 KB

The css is here

a.tag[data-ref="star" i]::before {
  content: "⭐️";
  visibility: visible;
  border-radius: 2px;
  padding: 2px;
  background: red;
  box-shadow: 0 0 4px red;
}

a.tag[data-ref="star" i] {
  visibility: hidden;
  width: 24px;
  white-space: nowrap;
}

After the above css is added in your custom.css, you could use #star to star your blocks!

image

At last, here is my complete custom.css based on GitHub - PiotrSss/logseq-clean-themes

2

Just tried this, what a clever way to implement a cool idea! Thanks for your effort.

3 Likes
3

Thanks for sharing. Will definitely try it out.

Just to check, is this currently the best way to implement customized tags, or is there already a plugin or builtin mechanism for it?

4

Also, this is a good reference (from RR) to show how we can make tags better looking, which also applies to logseq

3 Likes