Improve parsing of internal liks (for css-based markdown hiding)

Use case or problem

I’ve played around with CSS-based markdown hiding in the editor, and it works quite well! I find it much easier to focus on my writing when all the clutter is hidden away. As others have noted, this technique cannot currently be used to hide the clutter in internal links when using pipe aliases.

The GIF below shows the desired behavior. Details about how I made this are given below.

Proposed solution

It would be very simple for the Obsidian developers to support for this. All that is needed is a small tweak to Obsidian’s markdown parser so that it applies separate styles to the left and right hand sides of the pipe symbol.

Current workaround

I have made a rough prototype plugin using CodeMirror’s overlay addon. The plugin performs a crude parse of the entire markdown file, looking for any occurrence of the pattern /\[\[((?!\]\]|\|).)+\|((?!\]\]).)+\]\]/ and applies the necessary token styles on top of the existing ones.

The problem with the workaround is that it is too crude—it does not understand markdown syntax. For example, it incorrectly detects links in code blocks. The good news is that this logic can easily be integrated into Obsidian’s markdown parser if you are willing, even though this feature will only be used for a short time until you implement true WYSIWYG editing.

Related feature requests

2 Likes