Improving the text editor for live cells w/ CodeMirror

[choldgraf]

A nice feature of the Juniper package is that it replaces code cells with CodeMirror cells that have syntax highlighting, themeing, etc. It seems that the code they use for creating codemirror cells is here:

https://github.com/ines/juniper/blob/master/src/index.js#L135

Just flagging this in case it's in-scope and would be of value to thebelab

[nthiery]

Thanks for the pointer; I had not seen Juniper on my radar. In ines/juniper#2, I asked about a potential Juniper/Thebelab convergence.

[choldgraf]

I think a convergence would be great - my feeling w/ that project is that they liked thebelab's experience, wanted something slightly different for a specific use-case, and also wanted an excuse to learn a bit about the lab API, so perhaps they'd be open to working together a bit. It does seem like there's a lot of overlap

[minrk]

I'm a little confused. thebelab also creates CodeMirror instances for cells with syntax highlighting, etc.. Is the issue about what CodeMirror options are enabled or not?

[choldgraf]

oh interesting, I am confused as well then :-) For some reason when I launch thebelab I don't have any kind of syntax highlighting, so I assumed it wasn't using codemirror. Perhaps I am invoking it wrong?

[minrk]

It could certainly be something wrong in thebelab not setting itself up right. Where is this happening? Do you see any errors in the js console? What's the highlight language?

[choldgraf]

for an example see here: https://predictablynoisy.com/jupyter-book/features/notebooks

(click the "thebelab" button)

[Miniland1333]

Could it be that you aren't adding a data-language attribute to your code cells? This was an issue I ran into when I was using Thebelab for the first time and swapping languages for testing.
In the thebelab examples, it has a data-language attribute in order to indicate what syntax highlighter to use:
<pre data-executable="true" data-language="python">print("Hello!")</pre>

Based on the source code of that page, I would recommend adding code around line 169 of the notebooks.html file to correct this issue!

// Find all code cells, replace with Thebelab interactive code cells
const codeCells = document.querySelectorAll('.input_area pre')
codeCells.forEach((codeCell, index) => {
       const id = codeCellId(index)
       codeCell.setAttribute('data-executable', '')
       codeCell.setAttribute('data-language', 'python') //added line
});

[choldgraf]

This totally fixed my problem @Miniland1333 , thanks for letting me know :-)

[slel]

Should there be a word about that on Thebelab's homepage?

[choldgraf]

@slel I added in a short mention of this in #100 though that documentation hasn't gone live yet