div 隐藏_导出Jupyter notebook 为slider 并隐藏代码

500cdbbff18421ccea2404ba07ca80e7.png

基于 RISE [1]的jupyter notebook[2] 可以很方便的导出为html 格式的slider, 在一些场合更好的为presentation服务。然而,原生的notebook (ipynb文件)在导出为slider 的html格式时是带input 代码块的(如下图1[3]

而我们往往只想展示数据、图片或者仅仅为Markdow文字部分(如图2):

78f219b710d702c00e628ef36a1cd5d3.png
图2

在这样的情况下,隐藏代码就少不了了。当然在本地,也就是说,用你自己的电脑的时候,很容易就可以使用Jupyter notebook 的 nbextensions 中的 Hide inputHide input all达到目的,但是这仅限于当前正在工作的Ipynb文件的演示操作,不能脱离当前的工作环境。

那么怎么操作才可以呢?

  1. 在notebook中对需要隐藏的cell 用Hide input进行 hide 操作,对有结果的cell 在其上或下插入Markdown cell,并编辑需要演示的文字、公式或者图片。并设置在 notebook中点击View ----->Cell Toobar ----->Slider, 这样对于每个cell都可以设置成为如下图所示的几种形式

4ce7bf4f954a3fdb0a4e9c0dc0f99fab.png
图3

2.点击RISE 插件的按钮,在本地检查,该形式的slider是否是你想要的形式,如有显示错误则 修改,如果没有则进入第3步。

93bbfb42a29581b0c1b7abd4ac7dc5b0.png

3.修改导出slider的tpl文件,强制那些用Hide input隐藏的Cell(代码块)不在导出的html中出现。

3.1 首先是找到本机中tpl文件的位置,如在本人电脑的位置路径为:

C:UsersliangchAppDataLocalContinuumanaconda3Libsite-packagesjupyter_contrib_nbextensionstemplates

3.2 在templates文件夹下新建一个Text文件,并将下面代码复制进去[4]

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

{% block input_group -%}
<div class="input_hidden">
{{ super() }}
</div>
{% endblock input_group %}

{%- block header -%}
{{ super() }}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<style type="text/css">
//div.output_wrapper {
//  margin-top: 0px;
//}
.input_hidden {
  display: none;
//  margin-top: 5px;
}
</style>


{%- endblock header -%}

3.3 保存后退出,并重命名(比如,本人吧该文件重命名为slider_output.tpl)

4 win+R 并 open cmd, 利用 cd 命令进入你 ipynb文件文件夹,并运行

jupyter nbconvert your_slides.ipynb --to slides --template slider_output --post serve

比如:

2ff7ba29dae06818d04a05d8a4838150.png

然后和你ipynb文件同一文件夹内会出现一个html格式的文件,那就是可以脱离本机,并隐藏相关代码的演示文件了。

最后,你就可以用Markdown +latex+html css+ pyecharts/plotly/bokeh组合拳,来做PPT了。

PS:图片来自[5]

参考

  1. ^[1] https://rise.readthedocs.io/en/maint-5.5/
  2. ^[2] https://jupyter.org/
  3. ^[3] https://pyecharts.org/#/zh-cn/basic_charts
  4. ^[4] http://damianavila.github.io/blog/posts/hide-the-input-cells-from-your-ipython-slides.html
  5. ^[5] https://github.com/jupyter/jupyter.github.io/blob/master/assets/main-logo.svg,BSD,https://commons.wikimedia.org/w/index.php?curid=68763478
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值