Things I have tried
not much yet, just planning.
What I’m trying to do
Thank you in advance for reading this, if you are.
I teach scratch programming. There is a function library called scratchblocks that takes text like “go to x: (5) y: (0)” and converts it into an image (of the associated scratch block). This is a demo of it.
This is the output from this on a webpage, generated from obsidian using a publishing plugin:
To use it on one’s own webpage, one includes a copy of the scratchblocks JS file like this,
<script src="scratchblocks-min.js"></script>
and then runs this javascript renderMatching function on load, which tells it which items to process:
<script>
scratchblocks.renderMatching('pre.blocks', {
style: 'scratch3', etc...
This takes any pre.blocks in the file and converts them to the images above [^1], but one can use any selectors one wants. (in fact, in my case I am using “div.language-ad-scratch pre” as my selector, and my scratchblock text is in code blocks inside custom admonition “scratch” callouts. This allows me to segregate the processing to only specific code blocks.)
I am now using a plugin to post my notes to the web, and by including the js file and the renderMatching call in my site js, it converts the original obsidian “```go to x: (5) y: (0)```” code block text to the image above. [^2]
This works fine, and I can publish my output if I need to preview, but it occurs to me that since this is just some simple javascript, and there are js plugins (like templater), it should be possible to preview the results in Obsidian itself. But I am totally new to templater, for example, and don’t really understand how to use it in this case.
I think I can put the js files in the right place, but questions I have include:
KEY QUESTION:
- how to I reference the correct locations in my file (would div.language-ad-scratch pre work??), i.e. how do I express this in the templater language?
ANCILLARY QUESTIONS:
- how to do I have it only appear in reading or mode, not source or preview.
- how do I have it run only on certain files (frontmatter? or other means?)
- how do I make sure it runs on load? or do I need to?
- I still want sending the md file to the web to work as it does now, sending text, not the images…or do I?
Again, thank you for reading this far. If anyone knows the answer to any of these questions, I would be grateful for any help.
FOOTNOTES:
[^1]: (not really images, but svg objects…I don’t really understand this but in the html it looks like:
<svg version="1.1...><defs><g id="sb3-greenFlag">
<path d="M....more path....img data, defs, g, etc..
).
[^2]: In fact what i am doing is converting my scratch project to scratchblocks text using the scratchblocks reverse generator, then converting selections from this text into images for teaching purposes.