How can I change HTML in a note after markdown has been changed, and make it applied to any tab I'm viewing and stays?

Developers & API
1

I have this JS to manipulate .cm-callout elements, it works when I paste it into the dev tools console:

let callouts = document.querySelectorAll('.callout');
callouts.forEach(callout => {
    let color = getComputedStyle(callout).getPropertyValue('--callout-color');
    if (color) {
        const cmCallout = callout.closest('.cm-callout');
        if (cmCallout) {
            cmCallout.style.setProperty('--callout-color', color);
        }
    }
});

I tried looking at the Markdown Post-Processing page to figure it out, but taking out the sample code and editing inside registerMarkdownPostProcessor() doesn’t work:

import { Plugin } from "obsidian";


export default class ExamplePlugin extends Plugin {
  async onload() {
    this.registerMarkdownPostProcessor((element, context) => {
		let callouts = element.querySelectorAll('.callout');
		callouts.forEach(callout => {
			let color = getComputedStyle(callout).getPropertyValue('--callout-color');
			if (color) {
				const cmCallout = callout.closest('.cm-callout');
				if (cmCallout) {
					cmCallout.style.setProperty('--callout-color', color);
				}
			}
		});	
    });
  }
}

I’m not too familiar with the Obsidian API, and I think it is very unclear and lacking overall if I can’t look through it and figure it out. I even tried GPT 4 with the Webpilot plugin to look through the site, and it didn’t generate working code.

2

The documentation says:

If you want to change how to convert Markdown to HTML in the Reading view, consider building a Markdown post processor.

But .cm-callout doesn’t exist in the reading view (cm stands for CodeMirror).

It’s important to distinguish between the live preview & the reading view. Live preview just mimics the reading view, and their working mechanisms are very different.