Jupyter Notebook est un environnement d'exécution pour les programmes Python (qui semble être disponible dans d'autres langages tels que R de nos jours), et vous permet de combiner des programmes, leurs résultats d'exécution et des documents en un seul. Surtout lors de la représentation graphique de données à l'aide de matplotlib, il est très pratique de pouvoir gérer le graphique du programme et son résultat d'exécution et les commentaires pour eux collectivement. Pour plus d'informations sur Jupyter Notebook, reportez-vous à la page suivante.
Vous pouvez publier la documentation Jupyter Notebook sur Gist, mais vous pouvez toujours la coller sur votre blog ou votre propre site. J'ai étudié comment coller des documents Jupyter Notebook lorsqu'un blog ou un site est géré par Wordpress, je vais donc le résumer.
J'ai cherché sur le Web et il semble qu'il existe plusieurs méthodes.
Méthode 1. Convertissez le fichier .ipynb en fichier html avec nbconvert et entrez dans Wordpress Méthode 2. Collez ce que vous avez publié sur Gist dans Wordpress Méthode 3. Sortez le fichier html avec Jupyter Notebook et collez-le avec iframe
Le moyen le plus simple est de coller celui publié dans Method 2 Gist. Puisqu'il est collé dans le cadre, il n'y a aucun problème avec les programmes courts, mais il se sent à l'étroit lors du collage d'un document d'une certaine longueur écrit dans Jupyter Notebook. La méthode 3 est également collée dans le cadre, c'est donc la même chose.
La méthode 1 est introduite, par exemple, dans "WordPress Blogging with Jupyter Notebook in Five Simple Steps". Je suis. Cela demande beaucoup de travail, mais c'est bien de pouvoir afficher la page sur laquelle le cahier Jupyter est collé et la page créée directement avec Wordpress dans le même style.
C'est une méthode concrète.
Créez du contenu avec Jupyter Notebook et enregistrez Vous aurez un fichier .ipynb.
Convertissez en fichier html avec nbconvert
$ jupyter nbconvert --to html --modèle de base Fichier créé.ipynb
Collez le fichier html créé dans l'écran de texte Wordpress
Ajoutez le dernier CSS affiché au fichier CSS Wordpress
Ce CSS peut être trouvé dans le ["WordPress Blogging with Jupyter Notebook in Five Simple Steps"] susmentionné (http://www.mianchen.com/wordpress-blogging-with-jupyter-notebook-in-five-simple-steps/). C'est une chose. Dans l'original, j'avais l'habitude de spécifier des couleurs pour .s et .s1, mais comme .s1 était utilisé ailleurs dans mon environnement, j'ai décidé de ne pas le spécifier ici.
L'une des pages créées par la méthode présentée ici est la page suivante.
J'ai écrit un programme Python, un graphique de matplotlib et un document d'explication dans Jupyter Notebook et je l'ai collé dans Wordpress, mais j'ai pu l'écrire dans le même style que les autres pages du document.
/************** Jupyter Notebook CSS ************************/
.input_prompt {
color: #0066cc;
}
.output_prompt{
color:#cc0000;
}
.prompt{
font-family: monospace;
font-size: 14px;
}
.c, c1 {
color: #408080;
font-style: italic;
}
.k {
color: #338822;
font-weight: bold;
}
.kn {
color: #338822;
font-weight: bold;
}
.mi {
color: #008800;
}
.mf {
color: #008800;
}
.o {
color: #9966ff;
}
.ow {
color: #BA22FF;
font-weight: bold;
}
.nb {
color: #338822;
}
.n {
color: #000000;
}
.s {
color: #cc2222;
}
.se {
color: #cc2222;
font-weight: bold;
}
.si {
color: #C06688;
font-weight: bold;
}
.nn {
color: #4D00FF;
font-weight: bold;
}
.output_area pre {
background-color: #FFFFFF;
padding-left: 5%;
}
.code_cell {
padding-left: 1%;
}
.cell {
margin-top: 10px;
margin-bottom: 10px;
}
br {
line-height: 2;
}
.cell h1, h2, h3, h4 {
margin-top: 30px;
margin-bottom: 10px;
}
/************** Jupyter Notebook CSS ************************/
Recommended Posts