Link Search Menu Expand Document

Tags

Summary

Dendron includes support for tags. You can put a tag in your note by typing:

#example.my-example

The tag will look like #example.my-example

In Dendron, tags are just a shorthand for writing tags.example.my-example. You can format your tags as wikilinks if you want to do something regular tags can't, for example adding an alias.

Details

To find all notes that were tagged with this tag, you can click on it while holding down Ctrl, press Ctrl+Enter on your keyboard, or use the "Dendron: Goto Note" command. Once you open the tag, expand the Backlinks section on your editor to see everywhere this tag was used.

You might have already noticed this when you opened the tag, but tags are just notes under the tags. hierarchy. This has a lot of benefits:

  • You can use commands like Rename Note or Refactor Hierarchy to rename or reorganize your tags, and it will update all notes where these tags were used.
  • You can add content to your tag and it will show up when you hover over the tag in the editor, or when you publish it. Try clicking on the example tag above!
  • You can organize your tags into hierarchies (like #cuisine.ethiopian and #cuisine.swedish).
  • You can link tags together by adding links in their content.

Autocomplete (intellisense)

Tags support autocomplete (intellisense), but tag notes must be created for autocomplete to work. To create a tag note, Ctrl+click on a tag, or select the tag and use "Dendron: Goto Note" command.

Pretty Tags

You can further customize the look of tags in the preview by using the following CSS modification.

Stylized Tags Using Custom CSS

To customize the look and feel of your tags, you can do so by using the following convention and CSS edits.

Let's say you have a books hierarchy and you have a books.high-growth-handbook note. You have all the tags you use for books under a books.tags. namespace.

If you use links for tags: [[#business|books.tags.business]], you can use this CSS to customize their look:

/* General tag styling */
a[href*="tag."] {
    color: #000;
    background: #fff;
    display: inline-block;
    padding: 0 10px;
    border-radius: 4px;
}
/* Customizing the look of specific tags */
a[href*=".tags.business"] {
    color: #fff;
    background: rgb(36, 89, 233);
}

The result looks like this: