Nbconvert: How to change theme ?

[codeAshu]

I have been struggling for few days just to change themes. I am able to do it by having custom.css at the same folder.

But when I follow this , It does not work. Also all of these blog post are old and used ipython nbconvert Is there any single document I can follow or create?

Also I follow this , I am not able to change the theme by specifying it in the cell.

[takluyver]

I think the main gist of @damianavila's blog post is still correct, but the details of where files need to go and things might be out of date.

[codeAshu]

I have both the files default_transition.tpl and slides_config.py at the same location where slides are. Also reveal.js in the same repository. I am using python -m SimpleHTTPServer 8000 to start the server.

[codeAshu]

when I use the http:localhost:8000/slideshow.slides.html?theme=sky?transition=concave I can change the transition but can not change the theme.

I get following error at terminal

code 404, message File not found

"GET /custom.css HTTP/1.1" 404 -

Is it necessary to have custom.css?

[takluyver]

http:localhost:8000/slideshow.slides.html?theme=sky?transition=concave

The end of that URL should probably be ?theme=sky&transition=concave. You can't really put multiple ? in a URL, as far as I know.

The 404 error just means it's looking for custom.css; it doesn't necessarily mean you need to have one.

[damianavila]

The end of that URL should probably be ?theme=sky&transition=concave. You can't really put multiple ? in a URL, as far as I know.

That's correct, AFAIK...

The 404 error just means it's looking for custom.css; it doesn't necessarily mean you need to have one.

Yep, you don't need a custom css, it is just a quick and dirty entry point for customization...

[codeAshu]

?theme=sky&transition=concave also does not solve the problem.

[codeAshu]

@damianavila What should be the best way to customize? I really liked this functionality and appreciate your work. But I am not getting a hold of it. Too much confusion.

[Carreau]

This might be of interest. It's not in the TOC, (Pr in progress) and is for now not release yet, so you would need master.

[henrikstroem]

Run this command from your notebook, or from terminal without the !:
!cat Presentation.slides.html | sed s/simple.css/sky.css/g > Presentation.slides.sky.html

[NicolasHug]

Hi,
I am having the same issue as @codeAshu: using a custom template file does not work for me. I am also unable to find up-to-date documentation related to this. Any help would be greatly appreciated!

Nicolas

EDIT: I found out that I have the following JS error on the line corresponding to Reveal.initialize({ in the template:

ReferenceError: Reveal is not defined

[NicolasHug]

I think I found a workaround.

Apparently the theme configuration or Reveal.js has changed, and needs to be done by adding something like

<link rel="stylesheet" href="css/theme/black.css" id="theme">

So in the template, replacing the whole script by the above line (with the theme you want) should do the work. Also, as I wanted to tune more initialization parameters, I had to change the script a bit.

In the end my template file looks like this:

{%- extends 'slides_reveal.tpl' -%}


{% block body %}

{{ super() }}

<link rel="stylesheet" href="reveal.js/css/theme/sky.css" id="theme">

<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
    },
    [
      "reveal.js/lib/js/head.min.js",
      "reveal.js/js/reveal.js"
    ],

    function(head, Reveal){

        // Full list of configuration options available here: https://github.com/hakimel/reveal.js#configuration
        Reveal.initialize({
            controls: false,
            progress: false,
            history: true,

            theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
            transition: Reveal.getQueryHash().transition || 'linear', // default/cube/page/concave/zoom/linear/none

            // Optional libraries used to extend on reveal.js
            dependencies: [
                { src: "reveal.js/lib/js/classList.js",
                  condition: function() { return !document.body.classList; } },
                { src: "reveal.js/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);

        var update_scroll = function(event){
          $(".reveal").scrollTop(0);
        };

        Reveal.addEventListener('slidechanged', update_scroll);

    }
);
</script>

{% endblock body %}

I have absolutely no idea of what I'm doing, but it seems to work.

Nicolas

[damianavila]

@NicolasHug, yep, some things changed... you can use the approach you show above, but in master we have a new option to pass the reveal.js theme that will help you in the future: https://github.com/jupyter/nbconvert/blob/master/nbconvert/exporters/slides.py#L95

[NicolasHug]

This is great news, thanks!

[damianavila]

This was released with the latest nbconvert 5.2.1, you can use different themes with just adding the config option at the command line:

jupyter nbconvert my_slide.ipynb --to slides --post serve --SlidesExporter.reveal_theme=sky

Closing now.