Way to display Links to headers in Live Preview as "Note name > header"?

[ReaderGuy42]

In Reading mode links to headers are displayed as note name > header. I’m working on a new system where I can link to page numbers, which are h6 headers, e.g. I have a note titled Chiang2005What and all the quotes in it:

##### 15
> quote from book

then in another note I can refer to that quote by using [[Chiang2005What#15]] which I’d love to be rendered like in Reading mode, i.e. Chiang2005What > 15 as I find that easier to read.

Is this possible?

Thanks!

[ariehen]

You’ll have to add it, but you could use link/display text here:

[[Chiang2005What#15|Chiang2005What > 15]]

https://help.obsidian.md/Linking+notes+and+files/Internal+links#Change+the+link+display+text

[ReaderGuy42]

Oh, yeah, forgot to mention that, I was hoping for a css snippet type thing to automate it. Thanks! I’m not sure that’s even possible because I don’t understand what the href thing in css/html does.

[ReaderGuy42]

I’ve been playing around with adding a plugin that uses a replace() function, displayed here: W3Schools Tryit Editor

but I can’t seem to get it to work in Obsidian:

import { Plugin } from 'obsidian';

export default class HighlightUnderlinePlugin extends Plugin {
    private styleElement: HTMLStyleElement | null = null;

    onload() {
        this.addCustomCSS();
        this.registerMarkdownPostProcessor(this.replaceHashWithGreater.bind(this));
    }

    addCustomCSS() { //I add this to see that it's targetting the correct class
        const css = `
            .markdown-source-view.mod-cm6 .cm-underline {
                background-color: green !important;
            }
        `;
        const styleElement = document.createElement('style');
        styleElement.innerHTML = css;
        document.head.appendChild(styleElement);
        
        this.styleElement = styleElement;
    }

    onunload() {
        if (this.styleElement) {
            this.styleElement.remove();
        }
    }

    replaceHashWithGreater(container: HTMLElement) {
        // Select all elements with the '.cm-underline' class
        const underlineElements = container.querySelectorAll('.cm-underline');

        underlineElements.forEach(element => {
            // Get the current innerHTML
            let text = element.innerHTML;

            // Replace all occurrences of # with >
            let res = text.replace(/#/g, " > ");

            // Set the modified text back as innerHTML
            element.innerHTML = res;
        });
    }
}

this turns the links green correctly, but does nothing else.

Any advice appreciated