Aggiunta di paragrafi in stile personalizzati nelle celle di markdown

Question

Desidero aggiungere più elementi di formattazione di quelli forniti dallo Markdown synthax in un IPython Notebook.

Ad esempio, desidero aggiungere un "riquadro di avviso" o un "riquadro memo" che sono fondamentalmente paragrafi con stili diversi (ad esempio colore di sfondo, bordo, icona, ecc.).

Suppongo di poter aggiungere codice HTML nella cella, ad esempio uno <div> con uno stile in linea. Ma qual è il modo "corretto" per farlo, intendo quello che lo sviluppatore di ipython promuove?

Esempi apprezzati.

NB: Sto utilizzando la versione 1.0dev corrente da git master.

Answer 1

Un modo semplice per aggiungere avvisi, note, caselle di successo (ecc.) (chiamate anche ammonizioni o caselle di avviso) si utilizza semplicemente lo bootstrap classes già incluso nel notebook. L'unica avvertenza è che i link e altri stili (ad esempio grassetto) devono essere specificati in HTML all'interno della casella.

Esempio

Una cella Markdown che contiene questo codice:

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

si tradurrà in questo output:

È possibile modificare alert-warning con alert-success, alert-info o alert-danger per ottenere colori diversi per la scatola.

Answer 2

Aggiornamento: Questa tecnica non funziona più in IPython 4.0/Jupyter in quanto il modo in cui il notebook è reso è cambiato.

Credo che il modo migliore per fare questo stile sia creare una voce di markdown nella parte superiore del documento e raccogliere lì i propri stili. Poiché una cella markdown può contenere qualsiasi codice HTML valido, potrebbe contenere (per esempio)

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

Vedi Matt Davis' PyCon 2013 talk, circa 22 minuti durante il Q & A per un esempio di questo in uso.

Answer 3

Rispondendo alla mia domanda ...

Altre soluzioni

Jim proposto di aggiungere un po 'di stile CSS personalizzato in una cella Markdown di ogni notebook. Questa soluzione funziona, ma non è comoda in quanto è necessario incorporare lo stile su ogni notebook. Nel mio caso voglio uno stile globale e non voglio modificare tutti i taccuini dopo ogni modifica dello stile.

Una soluzione naturale sarebbe utilizzare un file personalizzato (custom.css) contenente lo stile. Tuttavia, dopo aver provato these instructions , lo stile non viene applicato al notebook (tuttavia può essere scaricato dal server).

soluzione migliore (finora)

ho trovato una soluzione guardando this impressive book scritto come una collezione di quaderni ipython. L'autore aggiunge al termine di ogni notebook cella seguente codice:

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

Mettere un file custom.css nella cartella notebook (nella sottocartella styles), lo stile verrà caricato dopo la prima esecuzione cellulare. Inoltre lo stile sarà caricato magicamente ogni volta che il notebook viene aperto, senza la necessità di eseguire nuovamente la cella!

Questo trucco magico funziona perché lo stile viene salvato nella cella di output la prima volta che viene eseguito e, sebbene sia invisibile, verrà salvato come qualsiasi altro output. Quindi quando cariciamo il notebook e conseguentemente le celle di output, verrà applicato lo stile.

Esempio CSS

Per completare la risposta vi posto uno stile CSS che ho usato per creare una "scatola Warning":

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

Salva questo stile e caricarlo utilizzando il cellulare il codice mostrato in precedenza. Ora, per inserire una casella di avvertimento nel vostro uso notebook questa sintassi:

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

che verranno resi in questo modo:

Per notebook più generale styling si può prendere ispirazione dal custom.css del libro di cui sopra.

Answer 4

Questi stili di css personalizzati sono già stati aggiunti in ipython versione 2 e successive.

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

semplicemente incollare questo nella cella e modificarlo tipo Markdown.

Controllare this per gli esempi e ipython in depth per le funzionalità all'avanguardia di ipython.

Answer 5

un altro mezzo consiste semplicemente creare una catena di stile e aprirlo con oggetto ipython HTML in una cella di codice:

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) 

Quindi utilizzare in una cella Markdown:

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