# Decorate Attributes with Emojis

**URL:** <https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823>\
**Category:** Tricks & Techniques\
**Created:** [February 1, 2026, 2:15pm UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823 "2026-02-01T14:15:46Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![LogeshG5](https://community.silverbullet.md/user_avatar/community.silverbullet.md/logeshg5/32/1171_2.png) [@LogeshG5](https://community.silverbullet.md/u/LogeshG5)\
**Post date:** [February 1, 2026, 2:15pm UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823/1 "2026-02-01T14:15:46Z")

</div>

Here is a way to display Emojis inplace of attributes of tasks.

 ![image](https://community.silverbullet.md/uploads/default/original/2X/1/160629eabb7e32a7028482a9d248837a341048a1.png)

> <https://github.com/LogeshG5/silverbullet-libraries/blob/main/Emoji%20Attributes.md>

Editing the attributes is better after this commit in silverbullet,

> <https://github.com/silverbulletmd/silverbullet/commit/aa6f7057810c7141e96230e1aaa0f3456c45ef77>

Edit:  
~~Caveat: Needs css improvement for other lists, paragraphs...~~  
Updated `display: none` suggestion from @bau, Thanks.

---

<div class="post-metadata">

**Author:** ![Platinum](https://community.silverbullet.md/user_avatar/community.silverbullet.md/platinum/32/2510_2.png) [@Platinum](https://community.silverbullet.md/u/Platinum)\
**Post date:** [February 1, 2026, 8:01pm UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823/2 "2026-02-01T20:01:19Z")

</div>

Nice, though the display seems messed up for me. I don't know enough CSS to fix it. Any ide what is going on here?

 ![image](https://community.silverbullet.md/uploads/default/original/2X/3/3df67ed3f89154a8ddacc5bed900a015e2534978.png)

BTW, **love the [change](https://github.com/silverbulletmd/silverbullet/pull/1805)** to "Render attribute decorations only when the cursor is not in range".

---

<div class="post-metadata">

**Author:** ![lochel](https://community.silverbullet.md/user_avatar/community.silverbullet.md/lochel/32/912_2.png) [@lochel](https://community.silverbullet.md/u/lochel)\
**Post date:** [February 1, 2026, 8:55pm UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823/3 "2026-02-01T20:55:23Z")

</div>

Try "Client: Reload UI"

---

<div class="post-metadata">

**Author:** ![Platinum](https://community.silverbullet.md/user_avatar/community.silverbullet.md/platinum/32/2510_2.png) [@Platinum](https://community.silverbullet.md/u/Platinum)\
**Post date:** [February 1, 2026, 11:53pm UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823/4 "2026-02-01T23:53:51Z")

</div>

Worth trying, and it did refresh but nothing changed. This seems to be a CSS issue.

---

<div class="post-metadata">

**Author:** ![LogeshG5](https://community.silverbullet.md/user_avatar/community.silverbullet.md/logeshg5/32/1171_2.png) [@LogeshG5](https://community.silverbullet.md/u/LogeshG5)\
**Post date:** [February 2, 2026, 2:46am UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823/5 "2026-02-02T02:46:33Z")

</div>

I too am not good at css. There must be a better approach which I'm not sure, but the below works.

Adjust left: `1.5`em; margin-left: -`1.5`em to lower values like `0.7`em as the text `deadline` and `scheduled` is longer than the ones that I used.

```auto
.sb-attribute[data-deadline]::before,
.sb-attribute[data-scheduled]::before
{
  position: relative;
  left: 0.7em;
  color: var(--root-color); /* readable emoji color */
  margin-left: -0.7em;
}

```

---

<div class="post-metadata">

**Author:** ![bau](https://community.silverbullet.md/user_avatar/community.silverbullet.md/bau/32/2597_2.png) [@bau](https://community.silverbullet.md/u/bau)\
**Post date:** [February 2, 2026, 7:41am UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823/6 "2026-02-02T07:41:13Z")

</div>

Probably related to the fact that the structure elements (meta) and the attribute name (atom) are still displayed although "hidden" by the background color assignment.

Try "display: none;" instead.

---

<div class="post-metadata">

**Author:** ![Platinum](https://community.silverbullet.md/user_avatar/community.silverbullet.md/platinum/32/2510_2.png) [@Platinum](https://community.silverbullet.md/u/Platinum)\
**Post date:** [February 2, 2026, 7:54am UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823/7 "2026-02-02T07:54:54Z")

</div>

> [@bau](#):
>
> Try "display: none" instead.

Thanks, I tried, but the icon disappears:

 ![image](https://community.silverbullet.md/uploads/default/original/2X/6/6ac7a16669355aee0f5a742ee52f152650b08cdd.png)

---

<div class="post-metadata">

**Author:** ![Platinum](https://community.silverbullet.md/user_avatar/community.silverbullet.md/platinum/32/2510_2.png) [@Platinum](https://community.silverbullet.md/u/Platinum)\
**Post date:** [February 2, 2026, 8:01am UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823/8 "2026-02-02T08:01:52Z")

</div>

> [@LogeshG5](#):
>
> I too am not good at css. There must be a better approach which I'm not sure, but the below works.
> 
> Adjust left: `1.5`em; margin-left: -`1.5`em to lower values like `0.7`em as the text `deadline` and `scheduled` is longer than the ones that I used.

Thanks. That worked, or at least had an effect. It still looks a bit off, but it's functional for now unless a CSS expert can come fix it :).

![image](https://community.silverbullet.md/uploads/default/optimized/2X/5/5f07299ea87deb62be5db39bc877943bda81e220_2_345x22.png)

---

<div class="post-metadata">

**Author:** ![bau](https://community.silverbullet.md/user_avatar/community.silverbullet.md/bau/32/2597_2.png) [@bau](https://community.silverbullet.md/u/bau)\
**Post date:** [February 2, 2026, 8:24am UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823/9 "2026-02-02T08:24:12Z")

</div>

Had to add a ";" after "display: none".  
(corrected in original answer)

---

<div class="post-metadata">

**Author:** ![Platinum](https://community.silverbullet.md/user_avatar/community.silverbullet.md/platinum/32/2510_2.png) [@Platinum](https://community.silverbullet.md/u/Platinum)\
**Post date:** [February 2, 2026, 8:37am UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823/10 "2026-02-02T08:37:16Z")

</div>

Didn't work with that either :(. Updated my screenshot above. It removes the `scheduled:` part, but doesn't display the icon.

---

<div class="post-metadata">

**Author:** ![bau](https://community.silverbullet.md/user_avatar/community.silverbullet.md/bau/32/2597_2.png) [@bau](https://community.silverbullet.md/u/bau)\
**Post date:** [February 2, 2026, 8:57am UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823/11 "2026-02-02T08:57:56Z")

</div>

This, works fine for me:

```auto
/* attribut deadline: decoration */
.sb-attribute[data-deadline]::before {
  content: "📅 ";
  display: inline;
}
/* deadline: color */
.sb-attribute[data-deadline] > .sb-list.sb-frontmatter{
  background: none;
  color: blue;
}
/* deadline: hide attribute name*/      
.sb-attribute[data-deadline] > .sb-list.sb-frontmatter.sb-atom {
    display: none;
}
/* deadline: hide [:] */
.sb-attribute[data-deadline]> .sb-list.sb-frontmatter.sb-meta {
    display: none;
}

```

Probably the css attributes for positioning the icon are not adapted when the "meta" tags are removed. Also, it may be necessary to specify the "display: inline;" for the decoration.

---

<div class="post-metadata">

**Author:** ![bau](https://community.silverbullet.md/user_avatar/community.silverbullet.md/bau/32/2597_2.png) [@bau](https://community.silverbullet.md/u/bau)\
**Post date:** [February 2, 2026, 11:51am UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823/12 "2026-02-02T11:51:54Z")

</div>

Bravo for the PR tested with the latest Edge version: it works very well!

In addition, I publish below a small code called by Alt+Ctrl+a which:

- reveals the structural elements and the name of the attributes
- hides the display of decorations

like the PR but of **all the attributes of a page**.  
Attributes are also **highlighted** with coloring and a border.

Modality: the code manipulates the DOM by adding **temporarily** a class in the body of the page. This class then does the work. The datas are not modified.

Normal display is restored by calling the command again with Ctrl+Alt+a or by refreshing the page.

The space-lua:

```auto
-- slashCommand.define
command.define {  
  name = "toggle-attr-display",  
  key = "Ctrl-Alt-a",
  run = function()  
    local body = js.window.document.body  
    if not body then  
      editor.flashNotification("Body inaccessible")  
      return  
    end  
    local classStr = body.className or ""  
    local hasAlt = string.find(classStr, "attr%-alt%-display") and true or false  
    if hasAlt then  
      body.className = string.gsub(classStr, "%s*attr%-alt%-display", "")  
      editor.flashNotification("Affichage attribut : normal")  
    else  
      body.className = classStr .. " attr-alt-display"  
      editor.flashNotification("Affichage attribut : alternatif")  
    end  
  end  
}

```

and the css:

```auto
/* priority: 10 */

/* pour dévoiler les meta et le nom d'un attribut
   via l'appel d'une commande*/
body.attr-alt-display .sb-attribute {
  background: yellow;
  color: black;
  border: 1px solid orange !important ;
}
body.attr-alt-display .sb-attribute> .sb-list.sb-frontmatter.sb-meta {
    display: inline !important;
}
body.attr-alt-display .sb-attribute> .sb-list.sb-frontmatter.sb-atom {
    display: inline !important;
}

```

![Reveal_attrib](https://community.silverbullet.md/uploads/default/original/2X/4/4ffa889dc1a14174f1680def49ce2d608d82cbd9.gif)

---

<div class="post-metadata">

**Author:** ![Platinum](https://community.silverbullet.md/user_avatar/community.silverbullet.md/platinum/32/2510_2.png) [@Platinum](https://community.silverbullet.md/u/Platinum)\
**Post date:** [February 2, 2026, 2:37pm UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823/13 "2026-02-02T14:37:38Z")

</div>

> [@bau](#):
>
> This, works fine for me:

This works beautifully, thank you very much!! The code is simple and easy to understand for someone like me too!

And Alt+Ctrl+a is also very helpful!

---

<div class="post-metadata">

**Author:** ![lochel](https://community.silverbullet.md/user_avatar/community.silverbullet.md/lochel/32/912_2.png) [@lochel](https://community.silverbullet.md/u/lochel)\
**Post date:** [February 2, 2026, 7:42pm UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823/14 "2026-02-02T19:42:50Z")

</div>

This is really nice and helpful. Does anyone know how to display the attributes without them being crossed out, when the task is marked as done?

---

<div class="post-metadata">

**Author:** ![Platinum](https://community.silverbullet.md/user_avatar/community.silverbullet.md/platinum/32/2510_2.png) [@Platinum](https://community.silverbullet.md/u/Platinum)\
**Post date:** [February 2, 2026, 8:00pm UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823/15 "2026-02-02T20:00:18Z")

</div>

> [@lochel](#):
>
> This is really nice and helpful. Does anyone know how to display the attributes without them being crossed out, when the task is marked as done?

I use this:

```space-style

#sb-main .cm-editor .cm-task-checked {
  text-decoration: none !important;
  /* color: #ddeedd; */
  opacity: 0.4;
}

#sb-main .cm-editor .sb-line-task {
  color: #886666;
}

```

---

<div class="post-metadata">

**Author:** ![lochel](https://community.silverbullet.md/user_avatar/community.silverbullet.md/lochel/32/912_2.png) [@lochel](https://community.silverbullet.md/u/lochel)\
**Post date:** [February 2, 2026, 8:42pm UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823/16 "2026-02-02T20:42:54Z")

</div>

This helps to avoid the entire task to be crossed out. Does anyone know how to apply this to just the attributes?

---

<div class="post-metadata">

**Author:** ![lochel](https://community.silverbullet.md/user_avatar/community.silverbullet.md/lochel/32/912_2.png) [@lochel](https://community.silverbullet.md/u/lochel)\
**Post date:** [February 3, 2026, 7:27am UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823/17 "2026-02-03T07:27:09Z")

</div>

It was actually much easier than I initially thought. The main source of confusion for me was that using the `#sb-main .cm-editor` prefix is important to reliably override CodeMirror's styling.

Here's the minimal working solution to strike only the task text while leaving attributes unaffected:

```auto
#sb-main .cm-editor .cm-task-checked {
  text-decoration: none !important;
}

#sb-main .cm-editor .cm-task-checked .sb-task {
  text-decoration: line-through;
}

#sb-main .cm-editor .cm-task-checked .sb-attribute {
  opacity: 0.4;
}

```

---

<div class="post-metadata">

**Author:** ![Platinum](https://community.silverbullet.md/user_avatar/community.silverbullet.md/platinum/32/2510_2.png) [@Platinum](https://community.silverbullet.md/u/Platinum)\
**Post date:** [February 4, 2026, 2:08am UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823/18 "2026-02-04T02:08:59Z")

</div>

Love the change!

There seems to be some vim breakage around it. I filed [this issue](https://github.com/silverbulletmd/silverbullet/issues/1814).

---

<div class="post-metadata">

**Author:** ![bau](https://community.silverbullet.md/user_avatar/community.silverbullet.md/bau/32/2597_2.png) [@bau](https://community.silverbullet.md/u/bau)\
**Post date:** [February 4, 2026, 3:46pm UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823/19 "2026-02-04T15:46:01Z")

</div>

Just to point out that as of the edge version released this afternoon (2.4.1-140224571ee82d0c1f34446e4d144045f00038b9) the attribute name and value spans have consistent typed classes:

```auto
<span class="sb-attribute" data-deadline="2026-02-05">
    <span class="sb-list sb-frontmatter sb-meta">[</span>
    <span class="sb-list sb-frontmatter sb-attribute-name">deadline</span>
    <span class="sb-list sb-frontmatter sb-meta">: </span>
    <span class="sb-list sb-frontmatter sb-attribute-value">2026-02-02</span>
    <span class="sb-list sb-frontmatter sb-meta">]</span>
</span>

```

The `sb-attribute-name` replaces `sb-atom`. The modification follows [Add class to value attributes · Issue #1768 · silverbulletmd/silverbullet · GitHub](https://github.com/silverbulletmd/silverbullet/issues/1768).

A change will be necessary if your css rules target `sb-atom`.

---

<div class="post-metadata">

**Author:** ![Platinum](https://community.silverbullet.md/user_avatar/community.silverbullet.md/platinum/32/2510_2.png) [@Platinum](https://community.silverbullet.md/u/Platinum)\
**Post date:** [February 17, 2026, 7:27am UTC](https://community.silverbullet.md/t/decorate-attributes-with-emojis/3823/20 "2026-02-17T07:27:30Z")

</div>

> [@bau](#):
>
> ust to point out that as of the edge version released this afternoon (2.4.1-140224571ee82d0c1f34446e4d144045f00038b9) the attribute name and value spans have consistent typed classes:

Much appreciated. Saved me gobs of time I'd have lost in trying to figure this out.