possible to run code examples, like in Jupyter Notebooks?
"I use the commons a lot. I have a number of pages for research and teaching. I am a math prof.
Is it possible to run code examples, like in Jupyter Notebooks, or something similar on the commons?
E.g. Some websites let you run code online, like R, C, Python, etc:
It would be great if we could do that on the commons. Is there a plug in for that? Or ither way to do it?"
#2 Updated by Boone Gorges about 1 year ago
- Status changed from New to Reporter Feedback
I've been reading about Jupyter Notebooks a little, and I would like some help getting a handle on use cases, because I think there's potentially a couple of overlapping requests here.
1. Rendered Jupyter Notebook output
From my understanding, Jupyter Notebooks is a set of tools for generating certain output formats based on sets of static Python code and shared data sets. HTML is one of the possible output formats, and Jupyter has a first-party tool called
nbconvert to generate this kind of input. But
nbconvert creates HTML files that then need to be copied (along with CSS and HTML) into WP posts, in a way that's impractical; and in any case, these files are static, in the sense that they're created at a single moment in time and need to be regenerated if the code and/or data changes. So one goal here might be to adopt a pipeline that allows the embedding of a Notebook output into a WP post in a way that is easy to manage, and is truly dynamic (if the source code or data changes, so too does the output). There's some prior art here, though the devil is in the details. Some examples:
- http://www.andrewchallis.co.uk/portfolio/php-nbconvert-a-wordpress-plugin-for-jupyter-notebooks/ uses the https://nbviewer.jupyter.org/ application and embeds it
- https://reflectivedata.com/jupyter-notebooks-in-wordpress/ has a proof-of-concept that puts the Notebook output directly into the post content (no embedding) but they don't share the code. It also depends on the Notebook being hosted on Google Colaborator
- https://wordpress.org/plugins/documents-from-git/ appears to take a GitHub/GitLab URL, send it to nbviewer, get the rendered HTML from nbviewer, and then output it via shortcode
The last option seems like the most straightforward, but it requires that the code is hosted on a public Git platform.
2. Code examples more generally
Tools like https://repl.it/languages/python3#main.py and https://codepen.io are online editors where you can write/edit code in a web browser, and have the application render the output at the very same time. The use case here is a bit different, since the focus is not just on the script output, but also on an in-browser editable version of the script itself. The Block Editor has native support for Codepen embeds, and we could install a plugin to add Classic support for it. https://blog.codepen.io/documentation/wordpress-plugin/ It's not clear to me whether or how this kind of dynamic setup is possible for Jupyter Notebooks specifically, but it looks like it should be possible to add oEmbed support for Repl.it https://docs.repl.it/repls/embed.
Could I get more background from users interested in this feature in exactly what they're trying to accomplish?
#6 Updated by Matt Gold about 1 year ago
From Connor French, a digital fellow:
Here is a great use case for a data visualization course: https://datavizm20.classes.andrewheiss.com/lesson/04-lesson/
I don’t know how you would be able to implement this on a WordPress site, but they use code chunks to test student’s knowledge as the students progress through the lesson. I used the embedded code chunks for one of my workshops and it was pretty effective!
#9 Updated by Boone Gorges about 1 year ago
- Status changed from Reporter Feedback to Staged for Production Release
- Target version set to 1.16.15
Thanks to all for the feedback.
As I suspected, there are a couple of parallel requests in this thread. The request for repl.it embedding is pretty straightforward, so I've taken care of it here. https://github.com/cuny-academic-commons/cac/commit/b6642eb3add519027254a2fc231730e590a61330 Paste a repl.it URL on its own line and it will embed. If you need more control over the iframe size, use the shortcode:
[replit url="https://repl.it/@Mr_RR1/Examples#main.py" width="50%" height="600px"] This will be available after today's release.
Jupyter integration is more complex. I'll start a new ticket to track it.
#12 Updated by Lisa Rhody about 1 year ago
Sorry to be late to the party but this is fantastic news. We're looking into using repl.it in the DHRI curriculum site, and having it on the Commons would be useful for GCDI workshop development for August. Jupyter notebook integration would be helpful for the class that I'm teaching in the fall, and I'd be happy to follow up when you open a new issue, Boone.
#14 Updated by Marilyn Weber about 1 year ago
Not sure if I should put this here, but here goes:
Thank you very much!!
Please dont worry about Jupyter.
I wasnt able to try the code yet since the commons was down last night.
1. If I want the embedded compiler to have code in it, e.g. Hello World, how would I do that.
2. If instead of Python, I want to use R, how would I do that? Can I just change the short code? Replit can compile R also.
3. If I want to embed a different compiler than replit can I do that on my own, or do I need to put in a request?
#15 Updated by Boone Gorges about 1 year ago
Repl.it integration on the Commons is nothing more than embedding. When you want to create a new example - with Hello World code, or with a different language, or whatever - you must go to https://repl.it/ and create it within their interface. Once saved, you'll have a unique URL, specific to that Replit, that you can use to embed on the Commons.
The Commons supports CodePen embedding, as long as you're using the Block Editor. Search your blocks for 'CodePen'. If there are other services you'd like the ability to embed, you'll need to put in a separate request.