开发人员提高技术演示的 3 个技巧：使用开源 Jupyter Notebook

我最近观看了 Erin McKean 的 Hooray for Arrays! 演示文稿，介绍了 JavaScript 数组的功能。 在半小时内，我学到的 JavaScript 数组知识比过去 2 个月还要多。 这应该归功于 Erin，因为演示文稿的结构开始时缓慢而清晰，但很快深入到有关在 ES6 中处理数组的具体、有用的细节和示例。

但我特别感兴趣的是她在幻灯片中如何展示实时代码。 作为一种教学工具，我印象深刻。 在本教程中，我将快速介绍如何使用 Jupyter Notebook 自己完成此操作。

1. 将实时代码嵌入演示文稿

Erin 使用开源的 Jupyter Notebooks 在她的演示文稿中显示实时代码。 这意味着她展示的每个代码片段，她都会在那里为你运行，你可以看到输出。 你甚至可以自己获取演示文稿，编辑代码，并查看会发生什么。

这是学习代码交互性的一大进步。 而且它比幻灯片要好得多。 根据具体情况，它甚至可能比现场演示更好。

2. 向 Jupyter 添加 JavaScript 支持

要使用 Erin 的演示文稿，你需要 Jupyter Notebook 和 Jupyter NodeJS，它是 Jupyter 的 NodeJS 内核。 与 Jupyter NodeJS 类似的项目是 iJavaScript。

在我的系统 Red Hat Linux 中，我从 GitHub 存储库安装了 Jupyter NodeJS。 我遇到的唯一障碍是我最初没有安装 ZeroMQ。 我使用 apt-get 从 ZeroMQ 网站安装了它。 在使用 NodeJS 内核设置 Jupyter 后，我从 GitHub 下载了 Erin 的 NI-Hooray-For-Arrays 演示文稿。

启动 Jupyter Notebook。

$ jupyter notebook
[I 16:45:51.044 NotebookApp] Writing notebook server cookie secret to 
/run/user/1000/jupyter/notebook_cookie_secret
[I 16:45:51.465 NotebookApp] Serving notebooks from local directory:
[I 16:45:51.466 NotebookApp] 0 active kernels
[I 16:45:51.466 NotebookApp] The Jupyter Notebook is running at:

命令行 jupyter notebook 命令将打开一个带有本地目录结构的 Web 浏览器。 因为我是从 Erin 的存储库克隆启动笔记本的，所以我立即看到了该笔记本。

打开她的笔记本时，你可以看到 Erin 的演示文稿。

一些笔记本单元格是幻灯片，一些是代码。

代码段令人兴奋，因为你可以运行它们。

按 Run 将在笔记本中执行代码。 太棒了！

运行该单元格后，你可以看到该数组是一个对象。

你还可以使用各种键盘快捷键。

通过遵循这种交互式方法来演示 Erin 的演示文稿，你可以浏览她的代码段。 请注意，变量 iAmAnArray 是在前面的单元格中定义的。

你还可以编辑单元格，并在 Erin 的代码旁边尝试你自己的代码段。 请注意匹配的括号的颜色突出显示。 你可以按 Enter 键来开始一行新的代码。 使用 shift-enter 运行代码。

你可以在下面看到 console.log 输出。

3. 将 Jupyter 与 Reveal.js 集成以进行演示

Jupyter Notebook 在我的 Red Hat Linux 工作站上本地运行看起来很酷，但演示文稿看起来如何？ 它看起来像一个普通的演示文稿。

我不确定 Erin 使用的是什么包，但我确实找到了几个可以用来将 Jupyter Notebook 显示为演示文稿的包。 Jupyter 项目提供了 nbconvert，用于将笔记本转换为其他格式，包括 Reveal JS、HTML、PDF、Markdown。

jupyter2slides 基于 Reveal.js，看起来非常棒。 幻灯片也可以输出为 PDF，用于 decktape。 另一个包是 nbpresent。

我决定查看 nbconvert。 它没有安装在我的系统上，但使用 pip 安装它很容易。

$ pip install nbconvert

Collecting nbconvert

 Downloading nbconvert-5.3.1-py2.py3-none-any.whl (387kB)

   100% |████████████████████████████████| 389kB 1.2MB/s

Collecting entrypoints>=0.2.2 (from nbconvert)

 Downloading entrypoints-0.2.3-py2.py3-none-any.whl

Collecting jinja2 (from nbconvert)

 Downloading Jinja2-2.10-py2.py3-none-any.whl (126kB)

   100% |████████████████████████████████| 133kB 2.1MB/s

安装 nbconvert 后，我将其转换为幻灯片。

$ jupyter nbconvert --to slides HoorayForArrays.ipynb
[NbConvertApp] Converting notebook HoorayForArrays.ipynb to slides
[NbConvertApp] Writing 324270 bytes to HoorayForArrays.slides.html

输出选项为：'asciidoc'、'custom'、'html'、'latex'、'markdown'、'notebook'、'pdf'、'python'、'rst'、'script'、'slides'。

为了使幻灯片正确显示，我还需要安装 reveal.js。

$ git clone https://github.com/hakimel/reveal.js.git
Cloning into 'reveal.js'...
remote: Counting objects: 10104, done.
remote: Total 10104 (delta 0), reused 0 (delta 0), pack-reused 10103
Receiving objects: 100% (10104/10104), 7.52 MiB | 130.00 KiB/s, done.
Resolving deltas: 100% (5559/5559), done.

作为测试，我创建了自己的笔记本，并尝试使用图片。

摘要

Jupyter Notebook 是协作和共享信息的好方法。 借助一些额外的工具，它们也非常适合教学和演示。 Jupyter Notebook 的交互式代码功能使你的演示文稿或报告对其他开发人员更有价值。 它是免费的、开源的并且很有趣。 试试看吧。

Erin 将于旧金山 Index SF (2 月 20 日至 22 日) 作为 Open API Initiative 社区日活动的一部分进行演示。