Replace code fence containing YAML with HTML Template

Developers: Plugin & API
1

Hello Obsidian Community!

I am wanting to learn to create a plugin that would take a code fence in a note that contains YAML structures. Then when exiting the code fence, have the plugin take the YAML, render an HTML template, something like handlebars, and replace the code fence with HTML.

However, I’m not sure where to start. I know there is two modes: Edit and Reader mode which contains different CSS classes and such. So, knowing that, I’d need to figure what the rendered form in Edit and Reader modes are.

An example of what I’m thinking of is Fantasy Stat Blocks by Javalent. However, I think it’s a bit much for what I need.

My intent is to have a folder layout like this

Screenshot_20240202-213253
Screenshot_20240202-2132531080×908 59.8 KB

Inside here, have my handlebars HTML templates.

Then the code fence should look something like this

Screenshot_20240202-213629
Screenshot_20240202-2136291080×974 72 KB

Thank you for any help or discourse!

2

The official plugin doc would help. Please go thru the instructions, and follow the code block sample to build your own.

Reading files in the vault can be achieved using vault.getFiles()

Further questions are warm welcome.

1 Like
3

My plugin pretty much does that, feel free to dig though it. GitHub - sytone/obsidian-queryallthethings: Query all your data stored in Obsidian, this plugin allows SQL based queries against the data collections available in Obsidian and Dataview. Output can then be rendered by Handlebars

I also intend to at some point replace the code block with the rendered output just like template so it executes once and renders output to the file and saves. Is that more what you were thinking about?

4

I believe so, the “Render handlebars to HTML from Markdown”. I have some HTML I’d like to try with.

Do you have an example of that too?

5

Yes. The output of the queries can be passed to obsidian to process as markdown and render or it can be bypassed and the raw html can be returned to render exactly as is.

I also have handlebars helpers to take markdown and return html so you can do partial processing.