如何在 nbconvert 之后将 matplotlib 图形的位置居中？

Question

我想使用 nbconvert 将我的 jupyter notebook 转换为演示文稿。是否可以将 matplotlib 图放在幻灯片的中心？

在jupyter中，我阻止了我的代码显示，然后做了一个plot。

(RawNBConvert)

<style type="text/css">
.input_prompt, .input_area, .output_prompt {
    display:none !important;
}
</style>

(python)

%matplotlib inline
import matplotlib.pyplot as plt

plt.plot([1,2,3]);

然后，使用以下命令将此笔记本转换为 html：

jupyter nbconvert mynote.ipynb --to slides

生成的 html 呈现如下。

我一直试图将此图置于幻灯片的中心。我查看了我的 reveal.css 文件，但无法确定要更改的部分。有谁知道我该如何解决这个问题？

我使用 jupyter 1.0.0 和 nbconvert 4.2.0。

Answer 1

可能有更好的解决方案，但在 RawNBConvert 单元格中添加几行可以解决此问题。我希望这不会造成副作用。

<style type="text/css">
.input_prompt, .input_area, .output_prompt {
    display:none !important;
}

div.output_png {
  display: flex;
  justify-content: center;
}

</style>

Answer 2

只是为 Taro 的解决方案添加详细信息：

"RawNBConvert" 单元格可以通过

创建

前往查看 -> 单元格工具栏 -> 原始单元格格式
正在创建一个新的单元格类型（单元格 -> 单元格类型）"Raw NBConvert"
将 "Raw NBConvert Format" 设置为 HTML

可以将本方案的样式代码添加到新建的单元格中。 NBConvert 应该会自动拾取它。

请注意，发布的解决方案禁用了输入区域的显示（即用于生成图像的脚本，以及幻灯片中的任何脚本）。这类似于将笔记本转换为幻灯片时设置 -no-input 选项。

最后，真正对我有用的是使用这个（你可能想调整一些参数）：

<style type="text/css">
.input_prompt, .input_area, .output_prompt {
    display:none !important;
}

div.output_png {
    max-width: 100%;
    width: 100%;
}

div.output_png img {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
   display: block;
}

</style>

希望对您有所帮助

如何在 nbconvert 之后将 matplotlib 图形的位置居中？

How can I center the position of a matplotlib figure after nbconvert?

python

reveal.js

jupyter

nbconvert