在markdown单元格中添加自定义样式的段落

Question

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

例如，我想添加一个“警告框”或“备注框”，它们基本上是不同风格的段落（例如不同的背景颜色，边框，图标等......）。

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

赞赏的例子。

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

Answer 1

回答我自己的问题......

其他解决方案

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

一个自然的解决方案是使用包含该样式的自定义文件（custom.css）。但是在尝试these instructions之后 该样式不适用于笔记本（虽然可以从服务器下载）。

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

我找到了一个解决方案，将this impressive book写成了一系列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获取灵感 上面提到的那本书。

Answer 2

添加警告，注释，成功（等等）框（也称为警告或警告框）的简单方法就是使用笔记本中已包含的bootstrap classes。唯一需要注意的是，必须在框内的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，以获得不同的颜色。

Answer 3

更新：此技术不再有效在IPython 4.0 / Jupyter中，因为呈现笔记本的方式已发生变化。

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

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

请参阅Matt Davis' PyCon 2013 talk，在Q＆amp; A期间约22分钟，以获取此示例。

Answer 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>

只需将其粘贴到单元格中，然后将其更改为markdown type。

查看this示例和ipython in depth了解ipython的最新功能。

Answer 5

另一个意思是简单地创建一个样式链并在代码单元中用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>