Executing Code Blocks

[andynameistaken]

Hi, I am really impressed what you achieved with code blocks inside your documentation - it looks awesome!
Could you explain how it works based on your config? I would love to understand it.
This feature would be neat as standalone plugin. I'm not exactly super wealthy, but you can count on my donation if you do so and I hope other people will appreciate your work as well.
Do you think it's possible to achieve syntax highlighting and simple code completion in editing mode?
And something not exactly related to this topic: do you think it is possible to embed source code in mkdocsand execute it?
If so, it might be interesting idea to sit down on abandoned concept from mkdocs-material for built-in text editor and try to create something between mkdocs and jupyter notebooks.

[facelessuser]

The current code blocks all use Pyodide. They can run any code that is currently loaded into Pyodide, in my case, ColorAide. For general code execution, the code is actually much more simple as I do some advanced stuff to identify color objects so so I can auto-generate color previews and gradients. None of that is needed for basic Python execution and can be stripped out. It can probably be further simplified if you don't need a dedicated "notebook" page.

There are currently two parts

1. custom code blocks via SuperFences custom fences. This allows me to write normal code blocks in MkDocs with Python code and they will be executed and appear to have been run in a reply showing the results. So, in answer to your question, yes this can be done. Depending on what you want, there are already plugins that allow this. https://github.com/pawamoy/markdown-exec. I wanted something very specific: execute code as if run in a terminal and I wanted to do it live in the browser, so I crafted my own solution.

2. The second part is the JavaScript that loads the Python and required package wheels in the browser and does what 1) does, but live in the browser. This allows a user to edit the code and re-run it.

Ideally, this is all done using Material's instant mode so that you don't have to reload package dependencies into the browser on every page change.

Currently, it is not necessarily user-friendly for others to just pick up and use themselves, especially since there is a bunch of color-specific stuff in the code.

[facelessuser]

I realized I didn't answer all of your questions.

Do you think it's possible to achieve syntax highlighting and simple code completion in editing mode?

Sure, it is possible, maybe not in the exact way I'm doing things now, but my goal was not to create a code editor in the browser, simply to allow the user to modify examples to better understand how the code worked and/or try out their own examples.