Project

General

Profile

Actions

Support #13016

closed

possible to run code examples, like in Jupyter Notebooks?

Added by Marilyn Weber over 3 years ago. Updated over 3 years ago.

Status:
Resolved
Priority name:
Normal
Assignee:
-
Category name:
Shortcodes and embeds
Target version:
Start date:
2020-07-06
Due date:
% Done:

0%

Estimated time:
Deployment actions:

Description

Via Zendesk
"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:
https://repl.it/languages/python3#main.py

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?"


Related issues

Related to CUNY Academic Commons - Feature #13048: Jupyter Notebooks supportNew2020-07-14

Actions
Actions #1

Updated by Matt Gold over 3 years ago

this is a great question -- I think many people would love to be able to do something like this

Actions #2

Updated by Boone Gorges over 3 years 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?

Actions #3

Updated by Matt Gold over 3 years ago

Hi Lisa -- I've added you as a watcher here -- could you chime in when you have a chance? Robin, please, you too. And Marilyn, if you could touch base with the original poster, please do. thanks

Actions #4

Updated by Marilyn Weber over 3 years ago

Yes, I've written to Chris McCarthy (), the OP on ZD

Actions #5

Updated by Marilyn Weber over 3 years ago

He replies: "The Jupyter notebook thing is not that important. What is important is if I can have students run python or r inside my webpage.
Please let me know. Thanks."

Actions #6

Updated by Matt Gold over 3 years 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!

Actions #7

Updated by Marilyn Weber over 3 years ago

A gentle bump, i don't know how to reply. Thanks!

Actions #8

Updated by Boone Gorges over 3 years ago

I'm still figuring out how to move forward and should have more info this week.

Actions #9

Updated by Boone Gorges over 3 years 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.

Actions #10

Updated by Boone Gorges over 3 years ago

Actions #11

Updated by Boone Gorges over 3 years ago

  • Category name set to Shortcodes and embeds
Actions #12

Updated by Lisa Rhody over 3 years 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.

Actions #13

Updated by Boone Gorges over 3 years ago

  • Status changed from Staged for Production Release to Resolved
Actions #14

Updated by Marilyn Weber over 3 years ago

Not sure if I should put this here, but here goes:

He replies:
Thank you very much!!
Please dont worry about Jupyter.
I wasnt able to try the code yet since the commons was down last night.

Three questions.

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?

Actions #15

Updated by Boone Gorges over 3 years 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.

Actions #16

Updated by Marilyn Weber over 3 years ago

Thanks Boone! I've passed this along.

Actions

Also available in: Atom PDF