Here is a way to display Emojis inplace of attributes of tasks.
Editing the attributes is better after this commit in silverbullet,
Edit:
Caveat: Needs css improvement for other lists, paragraphs...
Updated display: none suggestion from @bau, Thanks.
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?
BTW, love the change to "Render attribute decorations only when the cursor is not in range".
Try "Client: Reload UI"
Worth trying, and it did refresh but nothing changed. This seems to be a CSS issue.
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.5em; margin-left: -1.5em to lower values like 0.7em as the text deadline and scheduled is longer than the ones that I used.
.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;
}
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.
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 :).
Had to add a ";" after "display: none".
(corrected in original answer)
Didn't work with that either :(. Updated my screenshot above. It removes the scheduled: part, but doesn't display the icon.
This, works fine for me:
/* 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.
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:
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:
-- 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:
/* 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;
}
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!
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:
#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;
}
This helps to avoid the entire task to be crossed out. Does anyone know how to apply this to just the attributes?
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:
#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;
}
Love the change!
There seems to be some vim breakage around it. I filed this issue.
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:
<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.
A change will be necessary if your css rules target sb-atom.