Task dynamic styling

Evolution proposal 1740 was integrated yesterday, by @zef , into the Edge (pre-release) version of Silverbullet.

When generating the html code (backend of md pages) by Silvebullet, a span is added to the description of the attributes it encapsulates.

This span is associated:

  • to a new class: “sb-attribute”
  • to an attribute (in the HTML sense) which conveys the name of the attribute (in the Silverbullet sense) and its value, which allows this information to be manipulated like a CSS selector.

This will make, among other things, customizing the display of a task much easier.

Example of the new structure for a task attribute:

<span class="sb-list sb-task"> TODO </span>
 
<span class="sb-attribute" data-statut="ok">

<span class="sb-list sb-frontmatter sb-meta">[</span>
<span class="sb-list sb-frontmatter sb-atom">statut</span>
<span class="sb-list sb-frontmatter sb-meta">: </span>
<span class="sb-list sb-frontmatter">ok</span>
<span class="sb-list sb-frontmatter sb-meta">]</span>

</span>

CSS rule example with new components:

  • background of all atributs elements :
    .sb-attribute[data-statut] { background-color: red;}

  • background of the value alone:
    .sb-attribute[data-statut] > .sb-list.sb-frontmatter:not(.sb-meta):not(.sb-atom) { background-color: red;}

1 Like