如何在ipython/jupyter笔记本中修改reveal.js幻灯片设置

Question

我正在reveal.js使用jupyter/iPython笔记本编写幻灯片.我想改变一些默认设置是一种简单的方法.我已经管理过的事情(以防有人帮助)

1.更改主题

通过添加包含的原始单元格来更改主题

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

2.改变 reveal.js配置

问题nbconvert是它reveal.js在所有单元格语法之后加载,所以只是<script>Reveal.configure(...)</script>以相同的方式添加不起作用(Reveal仍然是未知的).解决方案是确保在加载文档后执行代码:

<script type="text/javascript">

$(document).ready(function(){

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

3.改变其他事情

这是我失败的地方:

如何设置片段的行为或特定幻灯片的背景？

Answer 1

也许这有点晚了:

虽然其中一些不起作用,但我发现上面提到的同一篇博客中的另一篇文章:自定义你的IPython幻灯片,可能就是你要求的.

custom.css仍适用于我(使用Jupyter 4和Revealjs 3.0.0).只需将custom.css文件放在.html所在的目录中.

更改字体(记住'.reveal'):

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

添加背景(但主题中的背景颜色将消失,可能需要更多的css调整):

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

要添加到特定幻灯片的东西,我会使用自定义div,例如:

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

然后将其添加到jupyter单元格:

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

希望这有助于〜