Displaying only the header name in links to headers

Plugins ideas
1

I thought I would share a quick work around to change the format of how header links are shown in preview from [[note > header]] to [[header]] or any other format. If there is a better way to do it, please let me know:

onload() {
    let postProc: MarkdownPostProcessor;

	postProc = (el: HTMLElement, ctx: MarkdownPostProcessorContext) => {

	    var linkElements = el.getElementsByClassName("internal-link");
	    var barIndex, alias;
	    for(var i = 0; i < linkElements.length; i++) {
		    barIndex = (linkElements[i] as HTMLElement).innerText.indexOf(">");
		    if(barIndex < 0) continue;
		    alias = (linkElements[i] as HTMLElement).innerText.substr(barIndex+2);
		    (linkElements[i] as HTMLElement).innerText = alias;
	    }

    }
	
	this.registerMarkdownPostProcessor(postProc);
}
3 Likes
2

This is something I’ve been looking for! Can you help me out on how to use this workaround?

3

Sorry for the late reply. All you need to do is follow this guide. Then in the file main.ts, replace everything in onload() with the snippet above. Maybe someone will make it a plugin in soon

1 Like
4

Thanks! I’ve made it into a plugin, it just needs to be added to the community plugins list. In the mean time you can download it here.

5

@cobalt have you figured out how to update this to support Live Preview?
I’ve looked into it, but can’t figure out what needs to be changed, but my code understanding is very basic :stuck_out_tongue:

Here’s the current code for the plugin I’ve made available on the Obsidian community list:

import { App, Plugin, MarkdownPostProcessor, MarkdownPostProcessorContext } from 'obsidian';

export default class LinkHeadersDirectly extends Plugin {

	async onload() {

		let postProc: MarkdownPostProcessor;

		postProc = (el: HTMLElement, ctx: MarkdownPostProcessorContext) => {

			let linkElements = el.querySelectorAll('a.internal-link');
			let barIndex, alias;

			for(let i = 0; i < linkElements.length; i++) {

				let linkAsHTML = (linkElements[i] as HTMLElement).innerText;

				barIndex = linkAsHTML.indexOf(">");
				if(barIndex < 0) continue;
				alias = linkAsHTML.substr(barIndex+2);
				(linkElements[i] as HTMLElement).innerText = alias;
			}
		}
		this.registerMarkdownPostProcessor(postProc);
	}
}
1 Like
6

Is there a way to do this by simply copy-pasting the name of the header as the manual title of the link?
e.g. [[file_link#header_title|header_title]]
It seems like a very easy solution, but I don’t know how to implement it.

7

I know it’s a bit late but I found a workaround using the plugin “Dynamic Highlights”. All you need to do is download that plugin, go to the settings, then import this:

{
  "Link-Shortening": {
    "class": "Link-Shortening",
    "color": "#A70F0F38",
    "regex": true,
    "query": "\\[\\[.{1,50}#",
    "mark": [
      "match"
    ],
    "css": ".cm-line:not(.cm-active) .Link-Shortening {\n  display: none;\n}"
  }
}

Thanks to @koala for the suggestion

@Signynt @doomgutt

2 Likes
8

check add link text

9

This is a feature of the short links plugin : GitHub - scottwillmoore/obsidian-short-links: An Obsidian plugin to display short internal links.

2 Likes