Before discussing some alternatives, I would like to know which purpose do you want to use this for? Only personal usage, or do you want to publish it somehow, or something else?
Alt 1: Using CSS snippets
Doing this within Markdown is hard, I think. There does exists CSS snippets which are able to make lists into tabs like this, but I’m not sure if we’re able to translate the HTML structure provide by Obsidian into those templates for CSS tabs.
Some examples using this technique:
- Pure CSS tabs without Javascript
- CSS-only tabs - no absolute positioning, no JS
- Functional CSS Tabs Revisited | CSS-Tricks - CSS-Tricks
Alt 2: Using buttons to switch out the code block
Another idea I had, was to possibly use inline buttons (from the Buttons plugin) for the various tabs, and then to replace the code block under the buttons with the corresponding code segments (in that language). Couldn’t get the buttons to work properly (and definitively not in combination with the Templater plugin).
And even if I got the Buttons to do what I wanted them to, I don’t think it would be possible to actually edit the code snippets in place in that particular document.
Alt 3: Hover preview of the code snippets
Another option which is doable, and could actually work rather nicely for smaller code snippets, is to use the hover preview for the code snippets.
Let’s say you have a note Sum of elements, and then you have a corresponding document for each programming language, i.e. Sum of elements (Java), Sum of element (Python3), and so on
Then within Sum of elements you could have snippets like:
... and this is how to do sum of elements.
[[Sum of elements (Java) | Java]] [[Sum of elements (Python3) | Python3]] ...
Then you could hover the link to view the code snippets, and you could follow the link to see all of it, and/or copy/edit the code.
The main downside to this method would be that you won’t see the code as you read the text on the main page.
Alt 4: Code snippet embeds
A variation over the previous alternative is to actually use code embeds to embed the code snippet page. This could be combined with setting a “main” programming language in the front matter, and always preload (or embed) that programming language.
This could be combined with some dataview query which would try to embed a code snippet note based on the current file note and the programming language in the frontmatter, or something like that.