Using a Decoration instead of a markdown code block postprocessor

Developers: Plugin & API
1

I’ve developed a plugin that postprocesses Markdown code blocks that have an iframe language tagged on them, and then runs any JavaScript in that code block inside of an iframe. It’s pretty neat - you can build graphs with generic tools like plot, import ESM modules, do kind of a tiny subset of live-coding environments inside of Obsidian.

But toggling between editing the Markdown source and viewing the output is really bad DX, there’s a really slow iteration loop involved. I don’t want to run it like that - it’d be much better for this to be a widget that displays above an editable Markdown code block.

However, doing that is… pretty hard, and is intersecting with the less-documented parts of the Obsidian API. It looks like Obsidian has its own Markdown flavor, hypermarkdown, and the syntaxTree that you get if you write a ViewPlugin or StateField is that, and there doesn’t seem to be an actual element type for code blocks.

Are there any plugins that do this, or documentation for it? Meaning, a plugin that exposes a ViewPlugin or StateField and uses the syntax tree generated in order to get the code within a code block?

2

are you using: registerMarkdownCodeBlockProcessor ?

That works in both reading mode and live preview.

Or do you mean something else by your question?

3

Yeah, I’m trying to do something a bit different. When we use registerMarkdownCodeBlockProcessor, there are two modes:

  1. When your cursor in that region, you see the Markdown fenced code block and you’re editing that
  2. When your cursor isn’t, you see the processed code block - the Mermaid diagram or Dataview, or whatever

Which is fine, but not great for tweaking: it’d be nice to both edit the codeblock and see the generated content. So I’m trying to go the somewhat harder route of using a ViewPlugin or StateField to show the interactive content above or below the Markdown code block. Which, in the default CodeMirror Markdown mode I think I could figure out, but hmd is quite a bit trickier and doesn’t seem like it has a real “code block” syntax tree node that I can read code from.