decker-edu / decker

A markdown based tool for slide deck creation.
GNU General Public License v3.0
53 stars 13 forks source link

Update thebe plugin #107

Open kno10 opened 4 months ago

kno10 commented 4 months ago

Binder, local jupyter, or jupyter-lite.

Closes #76

monofon commented 4 months ago

Thanks for updating this. Before I merge this, can you please add a test deck under test/decks? Makes it easier to quickly check if everything is working.

I will also be using Thebe again for a programming course starting in October. For that I need multiple code cells per deck using different kernels each. Plus, I cannot tolerate the scaling issue :-).

So I started experimenting with Thebe instances in iframes. You can have a look at the usage pattern on branch thebe-code-block in test/decks/thebe-iframe-deck.md.

The Thebe iframe document can be found here resource/decker/support/thebe/thebe.html.

Notable properties of this approach currently include:

Maybe this is interesting for you.

kno10 commented 4 months ago

Not sure if it is possible/easy to add this to the test decks:

I don't know where to make these changes; I would rather put a test deck into the plugin folder.

kno10 commented 4 months ago

CodeMirror 6 seems to have support for scale, and for CodeMirror 5 it appears something along this line will help:

deck.on('resize', (event) => {
let scale="scale("+(1/event.scale)+")";
document.getElementsByClassName('CodeMirror').forEach((x)=>{
  x.CodeMirror.display.cursorDiv.style.transform=scale;
  x.CodeMirror.display.cursorDiv.style.transformOrigin="0 0 0";
  x.CodeMirror.display.selectionDiv.style.transform=scale;
  x.CodeMirror.display.selectionDiv.style.transformOrigin="0 0 0";
})});

Needs a bit more testing, and multi-line selection still seems to be glitchy (as if assuming a wrong line height), but this may have become much more usable for simple code modifications in class.

kno10 commented 4 months ago

@monofon please try the new push