How do I get page links to work within HTML my plugin renders?

Hello, I’m just getting started writing an Obsidian plugin but am not able to get links to other pages in the notebook to work within the HTML I generate. The link text appears but doesn’t do anything when it is clicked. A simplified repro is below. Thanks for any assistance the community can offer! :slight_smile:

import { App, MarkdownView, MarkdownPostProcessorContext, Modal, Plugin, PluginSettingTab, Setting } from 'obsidian';

export default class MyPlugin extends Plugin {
    async onload() {
        this.registerMarkdownCodeBlockProcessor("myplugin-test", this.renderTest);

        // One of my searches suggested adding this but it had no effect as far as I could tell.
        this.app.workspace.trigger('layout-ready');
    }

    renderTest = (source: string, el: HTMLElement, context: MarkdownPostProcessorContext) => {
        const linkEl = document.createElement('a');
        linkEl.setAttribute('href', '#');
        linkEl.innerText = 'Test Note';
        el.appendChild(linkEl);
    };
};

I should add here that I’ve tried setting the href = ‘Test Note’ (and ‘Test%20Note’/‘Test Note.md’/‘Test%20Note.md’) to no avail. And yes, the Test Note page does exist. :slight_smile:

I figured this out. For any other beginning plugin makers, take a look at MarkdownRenderer.render. It will convert the markdown link [[page]] into the correct html.

        const el = document.createElement('div');
        const renderedEl = new MarkdownRenderChild(el);
        await MarkdownRenderer.render(this.app, source, el, context.sourcePath, renderedEl);

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.