Highlightr+

Status: This plugin is currently available in the Obsidian plugin store

Highlightr+ is a simple plugin that brings a minimal and aesthetically pleasing highlighting and annotating menu into the Obsidian note-taking app. This plugin makes color-coded highlighting much easier with a user-friendly assortment of highlight colors.

This plugin is based on Chetachi's original Highlightr plugin. The screenshots below are from the Highlightr plugin and the UI may be slightly different in Highlightr+, but the functionality is the same.

Demo

Ease of Use

Make beautiful highlights and add annotations with tags to your Obsidian notes to supplement your note-taking. The colors included were chosen to be universal across themes, in both light and dark mode. The use of inline CSS is essential in maintaining the longevity of your notes. When you export, you will not be reliant on any external CSS styling. This will make your notes much more flexible!

How it Works

Although the plugin supplies you with a beautiful assortment of colors, you are free to customize your highlighter menu as you wish! Create new highlighter colors by openning the plugin settings tab. There, you will see an input, color picker and an save button. Use the input to set the name of your brand new highlight, then use the color picker to pick the color for said highlight. Then use the save button to save the new highlight into your highlighter menu.

This plugin adds different context menu items depending on where you right-click: Highlight, Change Highlight Color, Unhighlight, Annotate, Edit annotation and Erase annotation. These menu items can only be seen by right-clicking on text selection, a highlight or an annotation icon. Clicking "Highlight" will reveal the highlighting submenu, allowing you to choose from an assortment of colors. When you choose a color, your selected text will then be wrapped within HTML mark tags, including a color for the background that corresponds with the color you have chosen. Clicking "Unhighlight" will either remove the HTML mark tags and its style attribute if there are no annotations or just remove the style attribute if there are annotations. When adding an annotation, a data-note attribute is added to the HTML mark tag. If tags are added to the annotation, then a data-tags attribute to the HTML mark tag is also added. In addition, to these added attributes, annotations marked with a note icon placed right after the highlight or selected text followed by tags if there are any.

You can also use the command palette or a hotkey of your choosing to open your highlighlighter menu. You will be able to add hotkeys to each individual highlighter color from your highlighter menu, as the plugin creates a command for each highlighter as well.

The plugin settings give you the ability to choose between 'inline CSS' and 'CSS classes' highlighting modes. The former will add a new style attribute whilst the latter will add a new class attribute with your chosen highlight color. Each class is named hltr-${highlight_title_here} by default and is generated from the title by which you have named your highlight color. Although inline CSS is highly encouraged, CSS classes will make your highlights much more flexible and easier to customize.

Disclaimer

The plugin component will not work with cMenu plugin.

Installation

This plugin is available in the Obsidian community plugin store. You can install it from there. For a manual installation, you can download the necessary files and place them within your .obsidian/plugins folder.

Changes made to Chetachi's original Highlightr plugin

• created a submenu to pick the highlight color
• added an annotating menu which allows users to add a note and/or tags
• the context menu options differ depending where you right-click
• added a sidebar panel to display highlights, annotations and tags

Checklist

• Highlighter color commands
• Open highlighter palette with command
• Unhighlight with command
• Undo highlight functionality
• Customize highlighter colors
• CSS classes setting

Support

If you like this Plugin and are considering donating to support continued development, use the buttons below!

Created with ❤️ by Chetachi & Olivier

Donate to Chetachi

Donate to Olivier