32

我想在IPython Notebook中添加比Markdown 合成器提供的更多格式元素。

例如，我想添加一个“警告框”或“备忘录框”，它们基本上是具有不同样式的段落（例如不同的背景颜色、边框、图标等）。

我想我可以在单元格中添加 HTML 代码，例如<div>带有内联样式的。但是什么是“正确”的方式来做到这一点，我的意思是 ipython 开发人员推广的方式？

例子赞赏。

注意：我正在使用 git master 的当前 1.0dev 版本。

4

5 回答 5

38

回答我自己的问题...

其他解决方案

Jim 建议在每个笔记本的 markdown 单元格中添加一些自定义 CSS 样式。此解决方案有效，但不方便，因为您需要在每个笔记本上嵌入样式。就我而言，我想要一个全局样式，并且我不想在每次修改样式后都修改所有笔记本。

一个自然的解决方案是使用custom.css包含样式的自定义文件 ( )。但是，在尝试了这些说明之后 ，该样式并未应用于笔记本（尽管可以从服务器下载）。

最佳解决方案（到目前为止）

我找到了一个解决方案，查看这本令人印象深刻的书，它是 IPython 笔记本的集合。作者在每个笔记本的末尾添加了以下代码单元：

from IPython.core.display import HTML
def css_styling():
    styles = open("./styles/custom.css", "r").read()
    return HTML(styles)
css_styling()

将文件custom.css放入您的笔记本文件夹（在styles子文件夹中），样式将在第一个单元格执行后加载。而且每次打开笔记本都会神奇地加载样式，无需再次执行单元格！

这个魔术之所以有效，是因为样式在我们第一次执行时保存在输出单元格中，虽然不可见，但将像任何其他输出一样保存。因此，当我们加载笔记本时，以及随之而来的输出单元格，样式将被应用。

示例 CSS

为了完成答案，我发布了一个我用来创建“警告框”的 CSS 样式：

<style>
div.warn {    
    background-color: #fcf2f2;
    border-color: #dFb5b4;
    border-left: 5px solid #dfb5b4;
    padding: 0.5em;
    }
 </style>

保存此样式并使用前面显示的代码单元加载它。现在，要在笔记本中插入警告框，请使用以下语法：

<div class=warn>
**Warning:** remember to do bookeping  
</div>

这将呈现如下：

在此处输入图像描述

对于更一般的笔记本样式，您可以从custom.css 上面提到的书中获取灵感。

于 2013-08-13T01:19:59.263 回答
20

添加警告、注释、成功（等）框（也称为警告或警报框）的简单方法是使用笔记本中已包含的引导类。唯一需要注意的是，链接和其他样式（例如粗体）必须在框内的 HTML 中指定。

例子

包含此代码的降价单元格：

# Upload data files
<p class="lead">This <a href="https://jupyter.org/">Jupyter notebook</a>
shows how to upload data files to be converted
to [Photon-HDF5](http://photon-hdf5.org) format. </p>

<i>Please send feedback and report any problems to the 
[Photon-HDF5 google group](https://groups.google.com/forum/#!forum/photon-hdf5).</i>

<br>
<div class="alert alert-warning">
<b>NOTE</b> Uploading data files is only necessary when running the notebook online.
</div>

将导致此输出：

在此处输入图像描述

您可以alert-warning使用alert-success或更改该框alert-info的alert-danger不同颜色。

于 2016-04-23T18:16:20.943 回答
7

更新：此技术不再适用于 IPython 4.0 / Jupyter，因为笔记本的呈现方式已经改变。

我相信进行此类样式设置的最佳方法是在文档顶部创建一个降价条目并在那里收集您的样式。由于 Markdown 单元格可以包含任何有效的 HTML 代码，因此它可以包含（例如）

<style>
    .warning { color: red; }
</style>

请参阅Matt Davis 的 PyCon 2013 演讲，在问答环节中大约 22 分钟，以获取使用中的示例。

于 2013-08-03T00:27:46.643 回答
4

这些自定义 css 样式已经添加到 ipython 版本 2 和更高版本中。

<div class="alert">
As of IPython 2.0, the user interface has changed significantly
</div>

<div class="alert alert-success">
Enter edit mode by pressing `Enter`
</div>

<div class="alert alert-error">
Don't try to type into a cell in command mode
</div>

只需将其粘贴到单元格中并将其更改为降价类型。

检查此示例和ipython 深入了解 ipython 的前沿特性。

于 2015-01-30T11:52:42.840 回答
4

另一种方法是简单地创建一个样式链并在代码单元中使用 iPython HTML 对象打开它：

from IPython.display import HTML
style = "<style>div.warn { background-color: #fcf2f2;border-color: #dFb5b4; border-left: 5px solid #dfb5b4; padding: 0.5em;}</style>"
HTML(style)

然后在降价单元格中使用它：

<div class="warn">Warning!</div>
于 2016-04-20T05:42:54.263 回答