我要添加不是由Markdown synthax在IPython Notebook提供了更多的格式元素添加自定義樣式的段落。在降價細胞
例如,我想添加一個「警告框」或「便箋盒」是基本款不同樣式(例如不同的背景顏色,邊框,圖標,等...)。
我想我可以在細胞與內嵌樣式添加HTML代碼,例如<div>
。但是,做到這一點的「正確」方式是什麼,我的意思是ipython開發人員提倡的方法是什麼?
示例讚賞。
注:我使用的是git master當前的1.0dev版本。
我要添加不是由Markdown synthax在IPython Notebook提供了更多的格式元素添加自定義樣式的段落。在降價細胞
例如,我想添加一個「警告框」或「便箋盒」是基本款不同樣式(例如不同的背景顏色,邊框,圖標,等...)。
我想我可以在細胞與內嵌樣式添加HTML代碼,例如<div>
。但是,做到這一點的「正確」方式是什麼,我的意思是ipython開發人員提倡的方法是什麼?
示例讚賞。
注:我使用的是git master當前的1.0dev版本。
的一種簡單方法添加警告,注意,成功(等等)框(也稱爲警告或警告框)僅僅使用已經包括在筆記本中的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
得到盒子的不同顏色。
更新:這種技術不再起作用在IPython的4.0/Jupyter因爲被渲染的筆記本已經改變了。
我認爲做這樣的造型最好的方法是創建在文檔的頂部的降價項,並有收集您的風格。由於降價細胞可以包含任何有效的HTML代碼,它可以包含(例如)
<style>
.warning { color: red; }
</style>
參見Matt Davis' PyCon 2013 talk,在約22分鐘將q &一種用於在使用中的的該示例中。
回答我自己的問題......
吉姆提議增加一些自定義的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樣式答案:
<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
靈感上面提到的這本書。
這些自定義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>
只要貼上這種在細胞並將其更改爲降價的類型。
查看this的示例,ipython in depth查看ipython的最新功能。
另一個平均值由簡單地創建一個樣式鏈,並在碼單元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>
非常感謝。一個問題。最後,通過「
" you meant "