This plugin gives you huge control style links and references in Obsidian to notes in your vault! You can, for example, automatically add colors and emojis to the links.
Why is this useful? If the note you are referring to represents something, like a paper, a location, a person or a day in the week, you can make this type of note stand out in Obsidian. Supercharged links will make sure that you can make those different links stand out. This visual feedback helps you find the right link back quickly!
Now how does this work? The plugin adds CSS attributes to the links. Those attributes will be based on the tags, frontmatter and Dataview inline links in your notes. Combined with css snippets, you will have full control over customizing your links! It supports note preview, live preview (!), backlinks panel, the file browser, the search panel, and supports the Breadcrumbs plugin.
It also adds context menu items to modifiy target note's frontmatter properties and "inline fields" (dataview syntax) by right-clicking on the link The preset values for those properties can be managed globally in the plugin's settings or on a file-by-file basis thanks to fileClass definition (see section 4)
The plugin scans your workspace to find links to your files. For each of those links, it will use the front-matter and tags, and adds them as CSS attributes to the html element of the link.
Complicated 😰....! Let's break it down step by step :)
The front-matter section is an optional section of your note written in Yaml. For documentation, see https://help.obsidian.md/Advanced+topics/YAML+front+matter
Let's say I have a note about Jim : Jim.md
---
next-actions: [👥, ☎️, 🍻, say hi]
age: 42
---
Jim is one of my colleagues
#person
I want to have a specific display of the internal-links linking to Jim's note to display a blue tag-like rounded rectangle and display when hovering the link
First you have to tell the plugin what front-matter properties you want your internal-link to be supercharged with in the Target Attributes for Styling
section of the plugin's settings.
So in this case the plugin will only include category
and next-actions
and tags
in the internal-links.
You can choose not to search for Dataview inline fields, which will improve performance if you are not using those.
When a file is opened or when one of the files of your vault has changed, the plugin is "supercharging" all internal-links with the front-matter properties set previously. This only happens if these properties are present in the file targeted by the link.
Let's say that I have a file daily.md like this:
Daily.md
[[Jim]] will be organizing the weekly steering committee
Without the plugin activated, the html link element would normally look like this:
<a data-href="Jim" href="Jim" class="internal-link" target="_blank" rel="noopener">Jim</a>
You wouldn't really know anything about Jim.md's specificity here and therefore wouldn't be able to customize it a lot.
That's where the plugin comes in: it will add two extra properties in the <a>
element : next-actions
and tags
. tags
is a special property as it will also include tags such as #person
that might be in your file.
Importantly, the plugin adds these properties by prefixing them with data-link
so that it will not conflict with other attributes in other plugins or Obsidian itself.
So... with the plugin activated the <a>
element will be supercharged like this: <a data-href="Jim" href="Jim" class="internal-link" target="_blank" rel="noopener" data-link-next-actions="👥 ☎️ 🍻 say hi" data-link-tags="#person" >Jim</a>
Although category
is included in settings as a property to track, since it's not included in Jim.md front-matter section, the property data-link-tags
isn't included in the <a>
element
Now you can enjoy the flexibilty of css to customize your links by setting css properties in a CSS snippet like links.css
To change the color of every appearance of a link to a note based on the tag in the file:
[data-link-tags*="#topic" i]{
color: #ff6600 !important;
}
This will target all HTML elements that contain the data-link-tags
property, that is, all supercharged links.
To put a fancy 👤 emoji before the name of each link to a "category: people" note:
.data-link-icon[data-link-category$="People" i]::before{
content: "👤 "
}
Selecting specifically .data-link-icon
is required to prevent bugs in Live Preview.
To highlight the link in a tag-like blue rounded rectangle when there is a property next-actions in the target file:
:not(:empty)[data-link-next-actions]{
color: white;
background-color: rgb(29, 29, 129);
border-radius: 18px;
padding: 5px 15px;
}
This will only change this in the preview view, because we are explicitly targetting a.internal-link
.
To display the value of the next actions property at the target file, whenever you hover on the link:
a.internal-link[data-link-next-actions]:hover::after{
content: " ► "attr(data-link-next-actions)
}
A small caveat: ::after
is currently not supported in Live Preview!
Right click on a link will automatically display an item per target note's frontmatter property and "inline fields" (dataview syntax)
these options are accessible from:
- the context menu of a link,
- the context menu of a calendar day,
- the context menu of a file in the file explorer,
- the "more options" menu of a file
- the command palette "Cmd+P" or by typing the hotkey Alt+O (can be customized in hotkeys settings)
- Right-click on the link
- Click on "Update .... " to change the property's value
- Change the value in the modal's prompt
- Type
enter
to save or click X oresc
to cancel
demo: https://youtu.be/qhtPKstdnhI
- Right-click on the link
- Toggle the swith in the modal to change the value
- Press
esc
to leave the modal
demo: https://youtu.be/iwL-HqvoNOs
- Right-click on the link
- Change values comma-separated
- Press
enter
, the values will be displayed as an array of values in the target note's frontmatter property
this doesn't work with indented lists YAML format
demo: https://youtu.be/WaW6xElq0T4
- Add a new Property Manager in the settings
- Enter the property name
- Add preset values (you can order them once the property has been created)
Back in a note Right-click on the link
- Click on "Update .... " to change the property's value
- The modal will display a dropdown list with preset values
- Change the value in the modal's dropdown
- Click on the save button to save or click X or
esc
to cancel
demo: https://youtu.be/GryvvJ6qIg4
- In the settings, follow the steps 1 to 3 of previous section
- Toggle the
isMulti
switch
Back in a note Right-click on the link
- Click on "Update .... " to change the property's value
- The modal will display a grid of switches for preset values
- Change the values by toggling the switches in the modal
- Click on the save button to save or click X or
esc
to cancel
demo: https://youtu.be/iyIG6LmCcuc
- In the settings, follow the steps 1 to 3 of previous section
- Toggle the
isCycle
switch
Back in a note Right-click on the link
- Click on " .. > .. " to change the property's value for the next one in the settings list
demo: https://youtu.be/7BqG4sG15jc
- Right-click on the link
- Click on "Add field at section"
- Select the line in the target file where you want to insert the new field
- Select the field
- Select/input the value for this field (if the field has preset values, you will be prompted to choose one)
demo: https://youtu.be/JYURK2CM3Es
In the settings
- toggle "display field option in context menu" If toggled on, the context menu will include field options If toggled off, the context menu wont include field options
demo: https://youtu.be/PC3MC0CfG0E
In the settings
- Add the fields you don't want to see in your context menu, comma separated
demo: https://youtu.be/eFkxECqBvvY
a class file is basically a simple note the name of the file will be the name of the class the lines of the file will be the fields managed for this class
- Define the folder where you wan't to store your class files
- Create a note in this folder, let say
music.md
, containing lines with the name of fields that you want to manage for this class
music.md
=========
genre
difficulty
artist
tone
- In a regular note, let's say
Black Dog.md
, insert a frontmatter field namedfileClass
- The value of
fileClass
has to be the name of the file Class where you have the fields that you want to manage for this note. e.g in our case
---
fileClass: music
---
- when right-clicking on a link to
Black Dog.md
, the fields in the context menu will be filter to show only the ones that are also included inmusic.md
demo: https://youtu.be/Av7DeYZILUk
You can specify the type of an attribute in a fileClass, and its options. Type and Options are called "attributes settings"
Type can be one of:
- "input" (default) : this field can take any value
- "select" : this field can take one value out of a list of items preset in options (see below)
- "multi" : this field can take 0,1 or multiple values out of a list of items preset in options (see below)
- "cycle" : this field can take one value that can "progress" within a list of items preset in options (see below)
Options is an array of options
An attribute settings is written in JSON and must be written as a value of and "inline (dataview) field"
example: Say you want to set "genre" attribute in music.md
fileClass as a "multi" with "rock", "pop" and "jazz" as options, and you want to set "difficulty", "artist" and "tone" as fields that can take any value, your music.md
will look like this:
music.md
=========
genre:: {"type":"multi", "options":["rock", "pop", "jazz"]}
difficulty
artist
tone
NB: "input" type attributes dont need a setting, leaving the name of the attribute only will categorize this attribute automatically as an "input" type.
Because it can be overwhelming to remember this syntax, you can manage "type" and "options" for each fields from:
- the context menu of a note that has this fileClass as a frontmatter's fileClass attribute : click on [
⚙️ Manage <music> fields
] formusic.md
from any file withfileClass: music
set in frontmatter - the more-options menu of a fileClass file
- a command within a fileClass file (
alt+P
)
demo: https://youtu.be/U0Bo_x1B2TM
- link context menu to modify frontmatter attributes
- manage indented lists multi-values frontmatter property
- extend options management to iinline-fields
- fileClass fields types and validators