Linking code blocks to external "playground"

[SeanTAllen]

A number of programming languages including the one I work on have playground services where you can run code online. I looked into setting up having a button on codeblocks that could open the code in question in a playground service (url plus url encoded code block text as part of query string).

I didn't see a way to do with existing functionality in mkdocs material. Did I miss something or is that a use case that isn't currently supported?

[facelessuser]

The question seems a little vague. What kind of code are you wanting to run in a "playground"? Is there a particular existing system you are trying to integrate with?

[facelessuser]

If all you want to do is generate a button with a link to some external service, you could definitely do this with JavaScript, though I'd cap your URL length to a sane size.

[SeanTAllen]

Does going the javascript route involve updating/changing the material theme in some fashion? We are very interested in keeping with the stock insiders version that we are currently using.

[facelessuser]

Extra JavaScript would not necessarily require changing your Material theme, though you may have to add some extra CSS to style any new elements you inject. If it isn't dynamic, you could even do it on the backend with just custom fences I suspect. Just format the fences at documentation build time and inject your button. Then you could do it all with Python. For my docs, we create the custom fences at build time but then allow dynamic interaction on the page itself. That dynamic interaction is what requires extra JavaScript.

[gkapfham]

Yeah, that is kind of why I was asking. I mean, there are things like MkDocs Jupyter, though I've never used it. I had a very particular thing I wanted to do with coloraide (incorporating color previews and gradients), but you could easily strip out the color previews and have simple live Python playgrounds.

I obviously didn't go to the extent that something like Jupyter does. I'm not tracking global variables across the entire page and output is generally limited to the console stuff, but that was all I wanted.

In short, custom fences can be very powerful, and that is indeed how I did things. Custom fences, Pyodide, and some JavaScript.

Hello @facelessuser, I agree that the coloraide docs are really impressive!

I read the documentation at: https://facelessuser.github.io/coloraide/playground/?notebook=https%3A%2F%2Fgist.githubusercontent.com%2Ffacelessuser%2F7c819668b5eb248ecb9ac608d91391cf%2Fraw%2Fplayground.md#playgrounds

and I'm wondering whether the playground tag is setup in such a way that I can reuse/customize it in my own sites that are using Material for Mkdocs sites?

If it is not yet a reusable plugin then I am glad to review the source code that you wrote to get it to work. If possible, can you point me in the right direction inside of your doc directory for coloraide so that I can start to figure out how it works?

Thanks for any insights that you can provide!

Finally, have you seen this approach?

#421

Here is an example that was linked at the bottom of this issue:

https://eskool.gitlab.io/mkhack3rs/pyscript/
https://eskool.gitlab.io/mkhack3rs/pyscript/examples/

If you have thoughts on which approach you prefer, I would be glad to read and respond to your ideas. Thanks!

[facelessuser]

@gkapfham All of the color examples (color previews and such) are probably coloraide specific, but all of that could be removed from the code.

I'll be the first to admit, that it can probably be cleaned up and improved a lot more. I'm not really a web designer, but I can make almost anything work with enough popsicle sticks and bubble gum 🙂. Currently, it fits my desires and has been good enough for now.

I've thought about making one less color specific and use it in some other sites, but haven't gotten around to it as of yet. Nothing prevents the current version from being applied to non-coloraide projects, but when it spots colors, it'll try and show previews 🙃.

I'm open to answering questions about it, if you want to just open a discussion over on ColorAide, when I generally have a moment, I can answer related questions.

---

As for PyScript, I have heard of it, and if I understand, it is built upon Pyiodide. It's extremely new, and to be honest, I don't mind working directly with Pyodide myself, but maybe pyscript will be useful for specific cases in the future 🤷🏻.

[apcamargo]

I just learned about markdown-exec, which adds support for code execution, including Pyodide. It's not as pretty (at least for now) as @facelessuser ColorAide documentation, but looks solid.