splitcell does not print with split cells #943

LivInTheLookingGlass · 2017-04-04T19:06:08Z

Hi,

I don't know if this was intended functionality, but the splitcell extension only seems to work in the browser view. When trying to convert to any other view (print, HTML, PDF, etc) it seems to go away entirely.

Is there an easy way to correct this?

jcb91 · 2017-04-08T22:43:14Z

Hi, I'm afraid this is the case with lots of nbextensions, that they don't make it through the nbconvert process (which is used by the notebooks server to output other formats) without special handling. It would (presumably) be possible to implement an html exporter for split cells, but I don't think it's been done yet. see #847 for some more on nbconvert issues...

LivInTheLookingGlass · 2017-04-08T23:43:50Z

Okay, thank you for pointing this out. It feels like with this one it wouldn't be too hard to get it into the exported HTML, so I think I'll start by trying to figure out if there's an easy way there.

In the meantime, I truly hope that this has progress made on other fronts. I don't think it will happen in time to help me, but I would like it if it helps others.

jcb91 · 2017-04-11T16:25:56Z

Okay, thank you for pointing this out.

no problem, happy to help 👍

It feels like with this one it wouldn't be too hard to get it into the exported HTML, so I think I'll start by trying to figure out if there's an easy way there.

Yes, it should be reasonably simple. I'd recommend the nbextensions template as a good place to start investigating, since it uses similar html alterations to the base nbconvert full.tpl template to hide inputs.

Also, for the record, this is pretty much a duplicate of #873, so worth linking the two together with this note.

JeremyBYU · 2019-01-23T03:10:33Z

I fixed this by doing creating a custom template for exporting notebooks.
Here is the shell command I am using to convert jupyter notebook to the slide format.

jupyter nbconvert --to slides presentation/mdp_presentation_1.ipynb --template presentation/assets/slides_reveal_custom.tpl --post serve

I pass in a custom template which is copied for completeness at the end of the post. The basic idea is as such.

In the header create or reuse an existing style tag to make a new class:

.split_cell {
  float: left !important;
  width: 50%  !important;
}

In the template there will be some Jinja2 code that is inspecting the cells and then outputting their html representation. A bunch of Jinja2 if statements are there to inspect cell meta data and output different HTML elements as well. I did the following:

{%- if cell.metadata.slide_type == 'notes' -%}
<aside class="notes">
{{ super() }}
</aside>
#### MY CODE HERE, Checking cell_style metadata
#### super() gives a string, index 13 starts the beginning of style class declarations
{%- elif 'split' in cell.metadata.get('cell_style', '') -%}
  {{ super()[0:13] + "split_cell " + super()[13:] }}
{%- elif cell.metadata.slide_type == 'skip' -%}
{%- else -%}
{{ super() }}
{%- endif -%}

I believe something like this could be added to the contrib template file.

Full file for slides_reveal_custiom.tpl

{%- extends 'basic.tpl' -%}
{% from 'mathjax.tpl' import mathjax %}

{%- block any_cell scoped -%}


{%- if cell.metadata.get('slide_start', False) -%}
<section>
{%- endif -%}
{%- if cell.metadata.get('subslide_start', False) -%}
<section>
{%- endif -%}
{%- if cell.metadata.get('fragment_start', False) -%}
<div class="fragment">
{%- endif -%}

{%- if cell.metadata.slide_type == 'notes' -%}
<aside class="notes">
{{ super() }}
</aside>
{%- elif 'split' in cell.metadata.get('cell_style', '') -%}
  {{ super()[0:13] + "split_cell " + super()[13:] }}
{%- elif cell.metadata.slide_type == 'skip' -%}
{%- else -%}
{{ super() }}
{%- endif -%}

{%- if cell.metadata.get('fragment_end', False) -%}
</div>
{%- endif -%}
{%- if cell.metadata.get('subslide_end', False) -%}
</section>
{%- endif -%}
{%- if cell.metadata.get('slide_end', False) -%}
</section>
{%- endif -%}

{%- endblock any_cell -%}

{% block header %}
<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<title>{{resources['metadata']['name']}} slides</title>

<script src="{{resources.reveal.require_js_url}}"></script>
<script src="{{resources.reveal.jquery_url}}"></script>

<!-- General and theme style sheets -->
<link rel="stylesheet" href="{{resources.reveal.url_prefix}}/css/reveal.css">
<link rel="stylesheet" href="{{resources.reveal.url_prefix}}/css/theme/{{resources.reveal.theme}}.css" id="theme">

<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
        var link = document.createElement( 'link' );
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = '{{resources.reveal.url_prefix}}/css/print/pdf.css';
        document.getElementsByTagName( 'head' )[0].appendChild( link );
}

</script>

<!--[if lt IE 9]>
<script src="{{resources.reveal.url_prefix}}/lib/js/html5shiv.js"></script>
<![endif]-->

<!-- Loading the mathjax macro -->
{{ mathjax() }}

<!-- Get Font-awesome from cdn -->
<link rel="stylesheet" href="{{resources.reveal.font_awesome_url}}">

{% for css in resources.inlining.css -%}
    <style type="text/css">
    {{ css }}
    </style>
{% endfor %}

<style type="text/css">
/* Overrides of notebook CSS for static HTML export */
.reveal {
  font-size: 160%;
}
.reveal pre {
  width: inherit;
  padding: 0.4em;
  margin: 0px;
  font-family: monospace, sans-serif;
  font-size: 80%;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}
.reveal pre code {
  padding: 0px;
}
.reveal section img {
  border: 0px solid black;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0);
}
.reveal i {
  font-style: normal;
  font-family: FontAwesome;
  font-size: 2em;
}
.reveal .slides {
  text-align: left;
}
.reveal.fade {
  opacity: 1;
}
.reveal .progress {
  position: static;
}
.reveal .controls .navigate-left,
.reveal .controls .navigate-left.enabled {
  border-right-color: #727272;
}
.reveal .controls .navigate-left.enabled:hover,
.reveal .controls .navigate-left.enabled.enabled:hover {
  border-right-color: #dfdfdf;
}
.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
  border-left-color: #727272;
}
.reveal .controls .navigate-right.enabled:hover,
.reveal .controls .navigate-right.enabled.enabled:hover {
  border-left-color: #dfdfdf;
}
.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
  border-bottom-color: #727272;
}
.reveal .controls .navigate-up.enabled:hover,
.reveal .controls .navigate-up.enabled.enabled:hover {
  border-bottom-color: #dfdfdf;
}
.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
  border-top-color: #727272;
}
.reveal .controls .navigate-down.enabled:hover,
.reveal .controls .navigate-down.enabled.enabled:hover {
  border-top-color: #dfdfdf;
}
.reveal .progress span {
  background: #727272;
}
div.input_area {
  padding: 0.06em;
}
div.code_cell {
  background-color: transparent;
}
div.prompt {
  width: 11ex;
  padding: 0.4em;
  margin: 0px;
  font-family: monospace, sans-serif;
  font-size: 80%;
  text-align: right;
}
div.output_area pre {
  font-family: monospace, sans-serif;
  font-size: 80%;
}
div.output_prompt {
  /* 5px right shift to account for margin in parent container */
  margin: 5px 5px 0 0;
}
div.text_cell.rendered .rendered_html {
  /* The H1 height seems miscalculated, we are just hidding the scrollbar */
  overflow-y: hidden;
}
a.anchor-link {
  /* There is still an anchor, we are only hidding it */
  display: none;
}
.rendered_html p {
  text-align: inherit;
}
::-webkit-scrollbar
{
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar *
{
  background:transparent;
}
::-webkit-scrollbar-thumb
{
  background: #727272 !important;
}

.split_cell {
  float: left !important;
  width: 50%  !important;
}
</style>

<!-- Custom stylesheet, it must be in the same directory as the html file -->
<link rel="stylesheet" href="custom.css">

</head>
{% endblock header%}


{% block body %}
{% block pre_slides %}
<body>
{% endblock pre_slides %}

<div class="reveal">
<div class="slides">
{{ super() }}
</div>
</div>
{% block post_slides %}
<script>

require(
    {
      // it makes sense to wait a little bit when you are loading
      // reveal from a cdn in a slow connection environment
      waitSeconds: 15
    },
    [
      "{{resources.reveal.url_prefix}}/lib/js/head.min.js",
      "{{resources.reveal.url_prefix}}/js/reveal.js"
    ],

    function(head, Reveal){

        // Full list of configuration options available here: https://github.com/hakimel/reveal.js#configuration
        Reveal.initialize({
            controls: true,
            progress: true,
            history: true,
            width: '80%',
            height: '100%',
            transition: "{{resources.reveal.transition}}",

            // Optional libraries used to extend on reveal.js
            dependencies: [
                { src: "{{resources.reveal.url_prefix}}/lib/js/classList.js",
                  condition: function() { return !document.body.classList; } },
                { src: "{{resources.reveal.url_prefix}}/plugin/notes/notes.js",
                  async: true,
                  condition: function() { return !!document.body.classList; } }
            ]
        });

        var update = function(event){
          if(MathJax.Hub.getAllJax(Reveal.getCurrentSlide())){
            MathJax.Hub.Rerender(Reveal.getCurrentSlide());
          }
        };

        Reveal.addEventListener('slidechanged', update);

        function setScrollingSlide() {
            var scroll = {{ resources.reveal.scroll | json_dumps }}
            if (scroll === true) {
              var h = $('.reveal').height() * 0.95;
              $('section.present').find('section')
                .filter(function() {
                  return $(this).height() > h;
                })
                .css('height', 'calc(95vh)')
                .css('overflow-y', 'scroll')
                .css('margin-top', '20px');
            }
        }

        // check and set the scrolling slide every time the slide change
        Reveal.addEventListener('slidechanged', setScrollingSlide);

    }

);
</script>

</body>
{% endblock post_slides %}
{% endblock body %}

{% block footer %}
</html>
{% endblock footer %}

armsp · 2020-10-29T09:20:23Z

@JeremyBYU I am trying to use your solution, but when I use your template I get the following error -

jinja2.exceptions.TemplateNotFound: mathjax.tpl

That probably comes from the first 2 lines of your template -

{%- extends 'basic.tpl' -%}
{% from 'mathjax.tpl' import mathjax %}

Because when I comment the second line I then get the error -

jinja2.exceptions.TemplateNotFound: base.html.j2

Any idea why this would happen? Googling didn't lead anywhere.

JeremyBYU · 2020-10-29T13:34:33Z

Sorry no idea! My guess is that there have been signifant changes to these repos and my template code is no longer valid. I would say to start off with a "clean" template and then add the functionality as I describe in my issue reply.

jcb91 added the nbconvert label Apr 11, 2017

FSpanhel mentioned this issue Mar 31, 2020

export the revealjs presentation that RISE renders damianavila/RISE#336

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

splitcell does not print with split cells #943

splitcell does not print with split cells #943

LivInTheLookingGlass commented Apr 4, 2017

jcb91 commented Apr 8, 2017

LivInTheLookingGlass commented Apr 8, 2017

jcb91 commented Apr 11, 2017

JeremyBYU commented Jan 23, 2019

armsp commented Oct 29, 2020

JeremyBYU commented Oct 29, 2020

splitcell does not print with split cells #943

splitcell does not print with split cells #943

Comments

LivInTheLookingGlass commented Apr 4, 2017

jcb91 commented Apr 8, 2017

LivInTheLookingGlass commented Apr 8, 2017

jcb91 commented Apr 11, 2017

JeremyBYU commented Jan 23, 2019

armsp commented Oct 29, 2020

JeremyBYU commented Oct 29, 2020