nothingislost / obsidian-dynamic-highlights

An experimental Obsidian plugin that highlights all occurrences of the word under the cursor

Dynamic Highlights

An Obsidian plugin that dynamically highlights text based on selection or search query.

This plugin currently only works in the Source or Live Preview editor modes. For now it will not affect Reading mode or the Legacy Editor.

Selection Highlights

If there is no active selection, all occurences of the word underneath the current cursor position will be highlighted

• Word matching is case insensitive
• The word currently under the cursor will be marked with .cm-current-word
• Occurences of the current word found elsewhere in the document will be marked with cm-matched-word
• All occurences will recieve the data-contents data attribute which will hold the current word value

If there is an active selection, all occurences of the text inside the selection will be highlighted.

• String matching is case insensitive
• The currently selected string will be marked by default with .cm-selection
• Occurences of the currently selected string found elsewhere in the document will be marked with cm-matched-string
• All matches will recieve the data-contents data attribute which will hold the selected string value

Persistent Highlights

Persistent highlights are created by defining a search query and associating a CSS class name and color. Once defined, any string that matches the search query will be marked with the associated CSS class and will receive background color that matches the chosen color.

Search queries can be written using regular expressions as long as you toggle the regex option for the query.

You can define as many unique highlighters as you'd like as long as the class names are unique. Performance may be impacted when creating a large number of complex regex queries so be mindful of your regex complexity.

Examples

You can import the examples with the Import Button at the top right of the plugin's settings.

Visual Linting

Highlights double spaces, empty list markers, double list markers, preceding spaces, and trailing spaces.

{
  "Mini-Linting": {
    "class": "Mini-Linting",
    "color": "#A70F0F38",
    "regex": true,
    "query": " {2,}(?!\\|| |$)|- - |^\\s*- \\n|^ +(?![0-9-`])",
    "mark": [
      "match"
    ],
    "css": ".cm-line .Mini-Linting {\n  background: none;\n}\n\n.cm-line:not(.cm-active) .Mini-Linting {\n  outline: 1px solid var(--text-error);\n}"
  },
}

Strike Out Filler Words to avoid in Writing

{
  "Filler-Words": {
    "class": "Filler-Words",
    "color": "#2D801838",
    "regex": true,
    "query": "\\b([Aa] bit|[Aa]bsolutely|[Aa]ctually|[Aa]nd all that|[Aa]nd so forth|[Aa]nyway|[Bb]asically|[Cc]ertainly|[Cc]learly|[Cc]ompletely|[Dd]efinitely|[Ee]ffectively|[Ee]ntirely|[Ee]ssentially|[Ee]vidently|[Ee]xtremely|[Ff]airly|[Ff]rankly|[Ff]requently|[Gg]enerally|[Hh]opefully|[Kk]ind of|[Ll]argely|[Ll]iterally|[Mm]ore or less|[Mm]ostly|[Oo]ccasionally|[Oo]ften|[Oo]verall|[Pp]articularly|[Pp]erhaps|[Pp]ossibly|[Pp]ractically|[Pp]recisely|[Pp]resumably|[Pp]retty|[Pp]rimarily|[Pp]robably|[Pp]urely|[Qq]uite|[Rr]arely|[Rr]ather|[Rr]eally|[Rr]elatively|[Ss]eriously|[Ss]ignificantly|[Ss]imply|[Ss]lightly|[Ss]omehow|[Ss]ort of|[Ss]pecifically|[Ss]trongly|[Ss]upposedly|[Ss]urely|[Tt]he fact that|[Tt]otally|[Tt]ruly|[Tt]ypically|[Uu]ltimately|[Uu]sually|[Vv]ery|[Vv]irtually|[Ww]idely)\\b",
    "mark": [
      "match"
    ],
    "css": ".cm-line .Filler-Words{\n\ttext-decoration: line-through;\n\tbackground: none;\n\tcolor: var(--text-muted);\n}\n\n/* where to disable */\n.HyperMD-quote.cm-line .Filler-Words,\n.pdf-annotations .cm-line .Filler-Words {\n\ttext-decoration: none;\n\tcolor: unset;\n}"
  }
}

Highlight Custom Styles in Pandoc Exports (:::)

{
  "Pandoc-Syntax": {
    "class": "Pandoc-Syntax",
    "color": "#77787C4A",
    "regex": true,
    "query": "::: \\{.*?\\}[\\s\\S]*?:::",
    "mark": [
      "match",
      "group"
    ],
    "css": ""
  }
}

Settings

Delay

The delay before highlighting is applied after moving the cursor

Ignored Words

A comma delimited list of words that will not be highlighted

The default list can be found here: https://gist.github.com/sebleier/554280

Limitations

• There is currently no support for dynamic highlights in reading/preview mode.
• Only strings with 3 or more characters will be highlighted in selection highlight mode

Acknowledgments

Thanks to @chrisgrieser aka @pseudometa for the plugin idea and feedback. Thanks to @chetachiezikeuzor for the plugin settings UI code which was inspired by https://github.com/chetachiezikeuzor/highlightr-Plugin/

obsidian-dynamic-highlights's Issues

Allow Multi line Matches (`s` flag for a regex)

I'd like to create a highlighter for Pandoc's Custom Style Syntax, which looks like this:

::: {custom-style="foobar"}
blabla
blabla
:::

This means I need a regex with the s flag, and would be able to even make good use of the capture group feature. however, it seems multi-line regex or custom flags are not supported? I tried entering this as a highlighter rule.

/::: {custom-style="(.*)"}\n(.*)\n:::/s

FR: Add word itself as data-attribute to CSS class

would allow more conditional styling, eg. different styling for specific words

FR: only highlight word when there is another instance of it

would reduce unnecessary noise

[BUG]: `Esc` key does not work in the Settings tab

When I am in the Dynamic Highlights Settings Tab, I cannot close the window anymore by pressing Esc.

(+ Rip me since my theme removes the close buttons 😆 )

macOS 12.0.1
Obsidian 0.13.19

FR: Settings for ignoring words

highlighting words such as the is adding a bit of unnecessary noise, so I'd suggest adding an option to configure words to ignore. (Could also be solved via CSS, when the css class .current-word gets a data-attribute).

I'd suggest adding a stop list of English words as default words to ignore, e.g. https://gist.github.com/sebleier/554280

Add an option to let the user decide whether to mark text if it's inside of front matter or a code block

Is it possible to add an option to let the user decide whether to mark text if it's inside of front matter or a code block?
Thanks!

FR: Highlight entire line / bullet based on keyword

Love this plugin! It would be very cool to be able to dynamically highlight a line based on a keyword, tag, (or emoji).

Example. In my notes, I might add the tag #actionitem or (question). I would love if that entire line of text, rather than just the word, was highlighted to make it easier to find!

thanks!

Understanding the radio buttons in Persistent Highlights

Apologies if I missed it in the docs, but can you please say that the radio buttons mean in "Persistent Highlights" against regex rules:

• matches
• parent line
• start
• end

Perhaps tool tips/hover tips might help?

FR: Add a toggle to re-enable highlighting in yaml/code block

So I had the idea to use the plugin to build me a (visual) linter. But for a lot of things (e.g. hashtags in yaml, codeblocks without language), the highlighter does not work, cause you implemented my earlier request #17 🙈

I think adding a toggle to include/search only in yaml/code blocks would easily solve this, probably on a per-highlighter-rule bases

Allow for importing and exporting highlighters to promote sharing

Add an option to disable a highlighter without deleting it

[POSSIBLE FEATURE REQUEST?] Highlight words that are Wikilinks automatically without brackets

Would it be a possibility to highlight words that are wikilinks (notes) by just typing?

There is some discussion here https://discord.com/channels/686053708261228577/707816848615407697/936823034550050836

The outgoing links plugin already detects them.

Not sure if it would be a feature request for this plugin or your auto linker plugin.

Permanent highlights should ignore YAML + codeblocks

I noticed that the plugin also applies permanent highlights to the yaml header and code blocks, where it leads to tons of highlights that are actually distracting rather than helpful, since words and punctuation have a different meaning there as opposed to "normal" markdown text, resulting in mostly unwanted highlights.

I'd simply suggest to have the plugin's permanent highlights ignore yaml and code blocks. Either permanently, or with a toggle (which should probably be on by default).

Add an option to add custom styles to highlighters

Add a button that pops up a CSS editor modal where you can write CSS styles associated with a highlighter.

Once import/export is available, this will allow for fully self contained highlighters. This will allow for much easier highlighter sharing.

Fix bug where word matches don't get cleared while typing

It would be helpful to show some marks of all occurrences of the word on the scrolling bar after highlighting

First of all, I appreciate the author's dedication to this plugin. This plugin has played a very important role in my daily writing, and its feature is very similar to IDEA, which is in line with my operating habits. But the fly in the ointment is that this plugin cannot display the markup of the word at the scroll bar, like the following:

Create example highlighters

Once import/export is available, create a showcase of common highlighter use cases.

Performance observation

Reported by @kometenstaub

There might be a performance issue where this line is repeatedly setting up a requestAnimationFrame and consuming CPU when nothing is happening:
https://github.com/Simonwep/pickr/blob/411cb1d214f961e0238ad72fecf6abf3e99113ca/src/js/pickr.js#L147

Seems to come from a dependency and we traced the issue to this plugin. Not sure if there are any specific repro steps but it doesn't always happen.

Do not highlight with multiple words selected

The plugin currently simply selects the first word. However, when I am selecting text, this probably means that I am doing something where highlights do not matter that much anyway, and the extra highlight only adds noise.

Alternatively, the plugin could select both/all words there a selection is, and highlight all occurrences of those two words occurring together, which might also be useful.

With this plugin enabled, internal links don't always open

I determined this plugin to be the cause of the issue. I messaged about the issue here on the Obsidian Discord server:
https://discord.com/channels/686053708261228577/694233507500916796/979900541796765696

Enable "Discussions" on the repo for sharing persisted highlights

Wanted a good place to share my inline dataview highlight:

{
  "inline-property-name": {
    "class": "inline-property-name",
    "color": "#00000000",
    "regex": true,
    "query": "^[\\w ]+::",
    "mark": [
      "match"
    ],
    "css": ".inline-property-name {\n  color: var(--text-faint);\n  font-size: 0.8em;\n}"
  }
}

Bug：The new version of the plugin will cause another plugin obsidian-shellcommands to fail

The new version of the plugin will cause another plugin obsidian-shellcommands to fail. The old version 0.1.2 is normal and will not conflict.

Can this compatibility issue be resolved? Thanks!

obsidian-shellcommands: https://github.com/Taitava/obsidian-shellcommands

Best Regards.

Optionally render in transclusions and other areas

I'm loving using this, but it looks like it doesn't render in transcluded link embeds. Could this be added?

More generally, it would be nice to optionally render matched text in frontmatter YAML, backticked-text, quotes (lines starting with > ), transclusions, and maybe other areas too. I'd love to have a way to specify where to render or not render per highlight entry.

Docs: Add screenshots on the README file.

Improve the UI display of persistent highlighters

Right now the persistent highlighters listing is fairly primitive. Could use some better formatting/styling and more information display such as the hex color value.

FR: Please support could change style for Word matching

I have an idea before I reading this article. https://www.reddit.com/r/coolguides/comments/ut3x75/bionic_reading_does_this_help_you/
I want to try get it on obsidian. Maybe dynamic highlights is the best suit tool.
But the tool only change color. I can't change the font weight.
Anyway to get it?

Also Implement Highlights in Preview Mode

The Permanent and the Selected String Highlights both also makes a lot of sense in preview mode, especially since dynamic highlights will often be used by people reading their notes and not necessarily editing them.

Allow highlighters to specify light mode and dark mode colors

When using regex mark capture groups with their group number and name

also add option to only mark named capture groups rather than marking the entire match

Minor Bug: disable in URLs

It's a minor thing, but I think the current-word- highlight does not make much sense in URL-strings, and also breaks some theme's css (e.g. for hovers). My suggestion would be to disable the current-word-highlight in the cm-string.cm-url scope (which covers the respective urls, I think?)

[Feature Request] Allow word under cursor to show how many occurrences there are in status bar

Feature request to see how many occurrences of the word being highlighted there are when cursor is on the word.

another alternative would be to maybe allow ctrl+f for the word under the cursor to show automatically inside find and replace bar (although search matches don't show the occurrences by default)

Bug：Conflict with obsidian-advanced-slides

Your plugin is very useful, but I'm afraid I have another compatibility issue to report.

This plugin will conflict with obsidian-advanced-slides, which will cause obsidian-advanced-slides preview results to not display any content. After closing Dynamic Highlights, it returns to normal.

obsidian-advanced-slides address: https://github.com/MSzturc/obsidian-advanced-slides

Best regards.

Add the ability to clear the background color and unset the background style

For when you don't want a background color style and rather use other styling
If color is empty, don't apply background style.

Regexp doesn't match if special chars at beginning or end of word

I've noticed that it doesn't highlight the word if there is a special character (é, à, ü) at the beginning or end of a word.

I looked at the code and it does get the word correctly, but it doesn't apply the span with the CSS class to it.

const view = app.workspace.activeLeaf.view
const word = view.editor.cm.state.wordAt(view.editor.cm.state.selection.main.from)
let wordText = word && view.editor.cm.state.doc.sliceString(word.from, word.to)

The issue seems to be the \b in the regular expression:

I don't know the code, the plugin doesn't work, it doesn't highlight in lp mode, and the import doesn't work, can you teach me?

Add the ability to edit persistent highlighters

FR: Setting to add delay to highlighting

Not only would it remove distractions when writing, but having a short delay would also help with performance. In case you are considering on expanding this highlight the current sentence as well, a short delay would be very fine and would probably give the time needed for performance?

split `cm-matched-string` into two css classes

with the latest update, matches to the current string + matches to the current selection both get cm-matched-string class. this makes it impossible to style them separately, even though it would be useful to use more subtle styling for current-string-matches and more emphasized styling for current-selection-matches.

Feature request: word highlight

It would be nice to have an option same as line, but highlighting the full word containing the matched string

Come up with a new plugin name

Highlight Current Word no longer describes the plugin. What should it be called now?

• Contextual Highlights?
• Selection Highlighter?

Open to suggestions.

FR: Toggle and/or frontmatter key for permanent highlights

Like, my use case for permanent highlights would be support for writing. However, when I am not writing, but just doing "normal" note-taking, I prefer to turn the writing-related permanent highlights off again.

• One solution would be a command to toggle permanent highlights on/off.
• a more fine-grained solution could be to have toggles for specific rules
• a different approach could be to have a yaml-key to turn off/on permanent highlights. That way, you could simply add "permanent-highlight: true" to your writing notes.

FR: Permanent Highlight of certain words?

I was playing around with the data attribute and realized this should rather be a plugin feature to be more flexible.

So the idea is to stray a bit away form the "word where the cursor is" idea but instead permanently highlighting certain words. One use case could be to automatically apply strikethroughs to filler words. Another one I can think of is to highlight conjunctions ("and", "or", "but", etc.), which would help with recognizing sentence structures at glance. (In most languages, sentences are longer than in English.)

both features would be great features for writers to have. They would stray away from the original idea of this plugin a bit, but nevertheless probably be based on a very similar code base, so it would probably make sense to add this feature to this plugin?

[Enhancement] ability to pick highlighting variants for dark/light theme

Thanks for making this plugin! Thanks to it I am able to highlight citations in the thesis I am writing :)

Do you consider adding an option/toggle for dark/light mode? My theme is automatically switching together with the system mode,
The highlight I am using in light theme doesn't look great in dark theme, would be nice to have a toggle to set in which theme the highlight will be used

Editing a persistent highlighter's name creates a duplicate record

Steps to repro

• Create a new persistent highlighter
• Click "edit"
• Update the highlighter's name
• Press "save"

Expected

highlighter name is modified

Actual

The old highlighter exists. A second highlighter with the new name is created.

Screen.Recording.2022-02-19.at.2.11.31.PM.mov

Plugin failed to load after update

My debug info
Plugin version 0.2.3
I am on Obsidian 0.13.23, does this is related to what what fixed in the Insiders release?
Fixed plugins unable to load when using esbuild’s new esmodule format.

SYSTEM INFO:
	Obsidian version: v0.13.23
	Installer version: v0.12.19
	Operating system: Darwin Kernel Version 21.4.0: Mon Feb  7 21:32:19 PST 2022; root:xnu-8020.100.429.131.1~2/RELEASE_ARM64_T8101 21.4.0
	Login status: not logged in
	Insider build toggle: off
	Live preview: on
	Legacy editor: off
	Base theme: dark
	Community theme: Minimal
	Snippets enabled: 0
	Safe mode: off
	Plugins installed: 4
	Plugins enabled: 3
		1: Minimal Theme Settings
		2: Style Settings
		3: Templater

RECOMMENDATIONS:
	Custom theme: for cosmetic issues, please first try updating your theme to latest. If still not fixed, please try to make the issue happen in the help vault or disable community theme and snippets.
	Community plugins: for bugs, please first try updating all your plugins to latest. If still not fixed, please try to make the issue happen in the help vault or disable community plugins.

FR: Ability to highlight in Dataview

I'm uncertain if this is possible at the moment?

How would you apply a format just to .dataview.table-view-table td for the particular cell containing the match?

I'm not sure if this is:

1. A bug
2. I'm just being stupid and it's easy
3. The feature does not exist

Thanks

Only first match on a line is highlighted

I have the issue that a match is only highlighted the first time per line:

Here are the settings:

fix settings ui layout on mobile

FR: enable unnamed capture groups instead of named ones

Reference: https://discord.com/channels/686053708261228577/805952223124520961/934836811132444753
https://discord.com/channels/686053708261228577/840286264964022302/934844137755254836

Add an option for persistent highlighters to mark the parent line