How to modify reveal.js slide settings in a ipython/jupyter notebook

Question

I'm writing reveal.js slides using the jupyter/iPython notebook. I would like to change some of the default settings is an easy way. Things I already managed (in case it helps someone)

1. Change the theme

Change the theme by adding a raw cell containing

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

2. Changing the reveal.js configuration

The problem with nbconvert is that it loads reveal.js after all the cell syntax, so just adding the <script>Reveal.configure(...)</script> in the same way doesn't work (Reveal will still be unknown). The solution is to make sure the code is executed after the document has loaded:

<script type="text/javascript">

$(document).ready(function(){

    Reveal.configure({
        transition: 'convex' // none/fade/slide/convex/concave/zoom
    })
});    
</script>

3. Changing other things

This is where I fail:

How can I set the behavior of fragments, or the background of a specific slide?

Bogor

where are you adding the script(which change the transition) mentioned in the second ? – Armpit

You paste it in a cell and make it of type "Raw NBConvert". But step 2 does not work with new Jupyter version 4.2.1 for me. – Susysuter

In 2022 1 and 2 no longer work (and it was impressively hard to find a modern answer, so I'm posting this note here -- this answer still ranks high in search). Instead, you probably want the SlidesExporter.reveal_transition and SlidesExporter.reveal_theme settings. Example: to remove the default fade, edit ~/.jupyter/jupyter_lab_config.py to add the following line: c.SlidesExporter.reveal_transition = 'none'. – Huggermugger

Answer 1

Maybe this is a little bit late:

Although some of them do not work, but I found another post from the same blog mention above: "Customizing your IPython slides", might be what you are asking for .

the custom.css still works for me (with Jupyter 4 and Revealjs 3.0.0). just put the custom.css file in the same directory where your .html is in.

to change font (remember the '.reveal'):

.reveal p {
font-family: 'Raleway', sans-serif;
color: #2d28cc;
}

to add a background (but the background colors from the theme will disappear, maybe need more css tweak):

body {
  background: url(logo.png)
  no-repeat
  left center;
padding: 5px 0 5px 25px;
}

to add things to specific slides, I would use a custom div, e.g.:

div.footer {
font-size:14pt;
font-style: italic;
color: #4aaeee;
text-align: center
}

then add this to the jupyter cell:

<div id="footer">...</div>

Nicolettenicoli

That link doesn't work any more. Can you find any other link? Or was there a typo? – Faustena

Answer 2

You can change the general theme or the transitions.

The basic idea is to create a config file slides_config.py somewhere (i.e. in the same folder as your slides):

c = get_config()
c.Exporter.template_file = 'default_transition'

Then, you create another template file default_transition.tpl:

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


{% block body %}

{{ super() }}

<script>

Reveal.initialize({

    // Display controls in the bottom right corner
    //controls: true,

    // Display a presentation progress bar
    //progress: true,

    // Push each slide change to the browser history
    //history: false,

    // Enable keyboard shortcuts for navigation
    //keyboard: true,

    // Enable touch events for navigation
    //touch: true,

    // Enable the slide overview mode
    //overview: true,

    // Vertical centering of slides
    //center: true,

    // Loop the presentation
    //loop: false,

    // Change the presentation direction to be RTL
    //rtl: false,

    // Number of milliseconds between automatically proceeding to the
    // next slide, disabled when set to 0, this value can be overwritten
    // by using a data-autoslide attribute on your slides
    //autoSlide: 0,

    // Enable slide navigation via mouse wheel
    //mouseWheel: false,

    // Transition style
    transition: 'concave', // default/cube/page/concave/zoom/linear/fade/none

    // Transition speed
    //transitionSpeed: 'default', // default/fast/slow

    // Transition style for full page backgrounds
    //backgroundTransition: 'default', // default/linear/none

    // Theme
    theme: 'sky' // available themes are in /css/theme

});

</script>

{% endblock body %}

Additionally, when you want to change some CSS details, you can create a custom CSS file custom.css and add your desired content in there.

The custom CSS file gets loaded automatically.

Thoroughwort

The blog you have referenced is very old. Now it convert using the command Jupyter nbconvert slideshow.ipynb --to slides --post serve I still do not know how to put logo on each slide. – Armpit

indeed, the solution given in the blog does not work anymore and it is difficult to find another solution to change the presentation's default parameters – Wellman