Add custom classes to Obsidian elements π¨
Allthough Obsidian is very customizable, it doesn't allow for adding css classes to Markdown elements out fo the box. For example, if I wanted to change the color or appearacne of a specific list of items I wouldn't be able to do it; I would be locked to changeing it for an entire page or vault by using page level css or a theme.
Obsidian Element Enhancer implements a simple script that enables the ability to apply custom css classes to any adjacent Markwon element for styling. π
- Install the
Dataview
plugin and enableJavaScript Queries
- copy the scripts/obsidian-element-enhancer.js file to your Obsidian vault (suggested to save it to a "./scripts" folder).
-
Enter the following
div
on a new line before the markdown element you want to add custom classes to (note: you must insert a blank line between thediv
and target markdown element):<div class="π example1 example2 example3"></div>
-
Add the following as the last line in your note. Make sure to update the path to the script that you copied to your vault in the Installation step above.
`$= await dv.view("scripts/obsidian-element-enhancer", "π")`
bullet cards in example can be found here β’ obsidian-bullet-cards
note: live preview is not supported