This topic is part documentation/tutorial, part feature request.
It is a wiki page. It is not complete yet. If you have something to add, please do.
- [ ] Add code samples/templates
- [ ] How exactly does Remnote calculate the value of the attributes. Show example markup and which attributes remnote generates.
Data attributes (MDN - Using data attributes) are HTML attributes whose value is based on the content/state of an HTML element.
You can select them with attribute selectors (MDN - Attribute selectors).
Data Attributes in RemNote
This allows you to style RemNote in a pretty fancy ways. See Custom Rem-level formatting with tags for examples.
Currently the following data attributes are implemented:
.rem(individual rems) and
data-rem-container-tagson whole subtrees (
These allow you to style references individually, like color all references to a
#Person differently or automatically prepend an emoji.
You can also specifically target (pairs of) consecutive references and style them like this
Note: Power Up tags like Todo and Highlight also generate these, but they also add css classes which are usually more flexible.
These are the most important ones. They provide the power for custom layouts. They are used build most stuff in the Library, from simple things like blockquotes (Library Link)
to highly nested ones like the Kanban Board (Library Link)
These allow you to specifically style a whole page, e.g. to make a dashboard like this from Calhistorian:
or a concept maps (spatial layout of concepts of a topic).
Feature Request: We need more data!
These data attributes could be added:
data-rem-referencefor the link text of a reference. They currently only have
data-rem-tagsfor the tags applied to the referenced rem.
data-tagon tag buttons at the right side of a rem. This can be used to hide specific tags.
Data tags for descriptors: If a rem has a child descriptor
data-descriptor-key="value", e.g. to make flexible progress bars.
Data tags for user id or user name for imported or - once collaboration is implemented - shared rem.
- If collaborating on an idea this would make it easier to follow who said what in an outline. Or to highlight ones own thoughts on an imported article. Currently they are indistinguishable.
Data tags in Searches to highlight specific results or for example to implement different levels of privacy/a focus mode, e.g. by
display: nonerems with a specific tag.
- Data tags in Queue. Rems in Queue currently have no data tags at all so no Custom CSS styling tags are possible. RIP ASCII-Art table with clozes.
Basically every RichTextViewer could have it’s content as a data attribute, including references, tags, the rem itself and sidebar entries.
- This would allow styling based on the content of something. E.g. highlight everything which mentions some piece of text. Logseq does this. Let’s see what they can build with it