2013-08-02 112 views
13

我要添加不是由Markdown synthaxIPython Notebook提供了更多的格式元素添加自定義樣式的段落。在降價細胞

例如,我想添加一個「警告框」或「便箋盒」是基本款不同樣式(例如不同的背景顏色,邊框,圖標,等...)。

我想我可以在細胞與內嵌樣式添加HTML代碼,例如<div>。但是,做到這一點的「正確」方式是什麼,我的意思是ipython開發人員提倡的方法是什麼?

示例讚賞。

注:我使用的是git master當前的1.0dev版本。

回答

5

的一種簡單方法添加警告,注意,成功(等等)框(也稱爲警告或警告框)僅僅使用已經包括在筆記本中的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> 

將導致在這個輸出:

enter image description here

可以更改alert-warningalert-successalert-infoalert-danger得到盒子的不同顏色。

7

更新:這種技術不再起作用在IPython的4.0/Jupyter因爲被渲染的筆記本已經改變了。

我認爲做這樣的造型最好的方法是創建在文檔的頂部的降價項,並有收集您的風格。由於降價細胞可以包含任何有效的HTML代碼,它可以包含(例如)

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

參見Matt Davis' PyCon 2013 talk,在約22分鐘將q &一種用於在使用中的的該示例中。

17

回答我自己的問題......

其他解決方案

吉姆提議增加一些自定義的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/> 

要呈現這樣的:

enter image description here

對於更一般的筆記本造型可以從custom.css 靈感上面提到的這本書。

+0

非常感謝。一個問題。最後,通過「

" you meant "
」對不對? –

3

這些自定義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的最新功能。

1

另一個平均值由簡單地創建一個樣式鏈,並在碼單元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>