Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

nbconvert Template for generating ThebeLab Enhanced HTML #163

Open
psychemedia opened this issue Sep 2, 2019 · 6 comments

Comments

@psychemedia
Copy link

@psychemedia psychemedia commented Sep 2, 2019

Is there an example of an nbconvert template for generating "ThebeLab enhanced" HTML?

I guessed at:

{% extends 'full.tpl'%}

{% block header %}

{{ super() }}

<script type="text/x-thebe-config">
  {
    requestKernel: true,
    binderOptions: {
      repo: "binder-examples/requirements",
    },
  }
</script>

<script src="https://unpkg.com/thebelab@0.4.0/lib/index.js"></script>
{% endblock header %}


{%- block body %}
<button id="activateButton"  style="width: 150px; height: 75px; font-size: 1.5em;">Activate</button>
<script>
var bootstrapThebe = function() {
    thebelab.bootstrap();
}

document.querySelector("#activateButton").addEventListener('click', bootstrapThebe)
</script>

{{ super() }}
{%- endblock body %}

run via jupyter nbconvert --to html 'my notebook.ipynb' --template=thebelab.tpl but the <pre> tagged code cells are not appropriately defined and the Jinja syntax to fix that and rewrite the tags as <pre data-executable="true" data-language="python"> and omit any styling <span> tags escapes me!

In the more general case, it would probably also be useful to be able to specify the Binder repo via a command-line switch somehow?

@akhmerov

This comment has been minimized.

Copy link
Contributor

@akhmerov akhmerov commented Sep 2, 2019

Great idea!

@choldgraf

This comment has been minimized.

Copy link
Collaborator

@choldgraf choldgraf commented Sep 2, 2019

Just a note that I couldn't figure out this one either for Jupyter Book, and ended up just writing Javascript to add the data-executable bits:

https://github.com/jupyter/jupyter-book/blob/master/jupyter_book/book_template/_includes/js/thebelab.html#L44

one idea could be that thebelab looks for anything with data-executable=true in it, and if it finds it, looks for the next child pre element and makes that executable w/ thebelab. Then you could template it more easily...

(maybe this is what thebelab does already? I'm not sure...)

@SylvainCorlay

This comment has been minimized.

Copy link
Collaborator

@SylvainCorlay SylvainCorlay commented Sep 2, 2019

@psychemedia this sounds a lot like voila templates, except that code is not pre-executed.

In fact, it may be interesting to reuse the infrastructure we put in place for voila in terms of extensible themes...

cc @maartenbreddels @martinRenou

@psychemedia

This comment has been minimized.

Copy link
Author

@psychemedia psychemedia commented Sep 2, 2019

@SylvainCorlay As ever, my ad hoc understanding is at its usual limits! I'm just trying to think through possible workflows. If there is a handy templating tool that could be teased out of voila, that would certainly be interesting to me in terms of what it might then make possible in terms of small pieces/tools loosely joined into toolchains.

@choldgraf I think the <pre> tagged content you get generated from the md is also much cleaner than the <span> styled, code highlighted HTML that the default nbconvert template produces?

It seems to me that if might be useful to "just" be able to convert a notebook to a Thebelab enabled HTML page and that an nbconvert would appear at first glance to be an appropriate way of doing that.

Another route might be to convert an ipynb doc to markdown using Jupytext and then perhaps use an md2html mapping, perhaps reusing using the trick @choldgraf uses in Jupyter Book to annotate the <pre> tags, but that feels quite a bit more hacky!

@choldgraf

This comment has been minimized.

Copy link
Collaborator

@choldgraf choldgraf commented Sep 2, 2019

just a note on that point that the medium-term goal for Jupyter Book is to also implement a "jupyter-book page path/to/notebook.ipynb function. This will output a single HTML file that has many of the bells and whistles of jupyter book, but that runs as a standalone page instead of a full "book" website. Thoughts welcome here! jupyter/jupyter-book#236

@sergeyepimakhov

This comment has been minimized.

Copy link
Contributor

@sergeyepimakhov sergeyepimakhov commented Oct 28, 2019

Typically a notebook in HTML format marks all code cells with a class 'hightlight' and then just a pre tag. So in principle if we add in the thebe configuration justselector: ".highlight > pre", it will be able to select all 'In' cells und run it by default. I guess you don't need to call the bootstrap function. One thing might be useful in future, that every notebook generated with nbconvert has already some output cells. Thebelab should be able during run remove and replace them with the output widget.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.