How do I inject an HTML element in the reading mode?

Developers: Plugin & API
1

I want to write a plugin that adds an HTML element to the top of the note in the reading mode.

How do I achieve this?

2

Do you mean you want to add a element on top of the note whenever you open a new markdown view?

Maybe this needs to patch the built-in MarkdownView class. Use monkey-around library:

import { around } from "monkey-around";

// Inside Plugin class
// ...
addElementOnNote() {
    let self = this; // `this` is the plugin
    self.register(
        around(MarkdownView.prototype, {
            onload(next) {
                return function(...args) {
                    console.log(this);
                    let div = document.createElement('div');
                    div.innerHTML = '<h1 style="color:red">Hello World</h1>';
                    (this.previewMode.containerEl as HTMLElement).prepend(div);

                    next.call(this, ...args);
                }
            }
        })
    )
}

The result is like:

image
image771×600 19.4 KB

3

What is the use case? Why do you want to inject that element?