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

Question

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

例如,我想添加一个"警告框"或"备注框",它们基本上是具有不同样式的段落(例如,不同的背景颜色,边框,图标等......).

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

举例赞赏.

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

Answer 1

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

其他方案

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 上面提到的书中获取灵感.

Answer 2

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

例

包含此代码的markdown单元格:

# 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演讲,在Q&A期间大约22分钟,以此为例.

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

然后在 Markdown 单元格中使用它：

<div class="warn">Warning!</div>