Integrar Jupyter notebook en WordPress

Utilizando PHP: nbconvert: podemos crear un plugin de WordPress para Jupyter notebooks. El plugin puede encontrarse aquí. Consiste en un poco de PHP y CSS personalizado para WordPress con el que se obtiene un sencillo plugin de shortcode para WordPress que permite usar Jupyter Nbviewer y de esta forma poder crear cualquier ipynb de Jupyter y agregarlo a nuestro blog. Las posibilidades de insertar código de Jupyer Notebook en combinación con WordPress son infinitas.

Antes de nada.

¿Qué es Jupyter Notebook?

Un documento de Jupyter Notebook es un documento JSON, que sigue un esquema versionado y que contiene una lista ordenada de celdas de entrada/salida que pueden contener código, texto (usando Markdown), matemáticas, gráficos y texto enriquecidos, generalmente terminado con la extensión «.ipynb».

Puedes ver en marcha a Jupyter Notebook aquí. Jupyter Notebook era conocido anteriormente como IPython Notebooks. Se trata de un entorno informático interactivo basado en la web para crear documentos de Jupyter notebook. El término «notebook» puede hacer referencia coloquialmente a muchas entidades diferentes, principalmente la aplicación web Jupyter, el servidor web Jupyter Python o el formato de documento Jupyter según el contexto.

Un Jupyter Notebook se puede convertir a varios formatos de salida estándar abierto (HTML, diapositiva de presentación, LaTeX, PDF, ReStructuredText , Markdown, Python) a través de «descargar como» en la interfaz web, a través de la biblioteca nbconvert o el comando «jupyter nbconvert» en un shell.

Ahora también podremos insertar y presentar Jupyter Notebook en nuestro WordPress

Ventajas y desventajas de utilizar Shortcode en Jupyter Notebook

Muy fácil de usar
Su código puede ser controlado por versión y actualizado sin tener que iniciar sesión en su blog y editar el código HTML sin procesar.
Otras personas pueden trabajar en el código, por ejemplo, colaboradores de su página de GitHub
Muy fácil de crear una página de documentación fácil de navegar usando WordPress y nbconvert
¡Sin iframes! Que mucha gente ha sugerido…

–

Otros usuarios pueden cambiar nuestros notebooks cuadernos (¡Es una bendición y una maldición!). Es importante tener claro lo que deseamos mostrar y ejecutar en nuestro WordPress.
Dependemos de los servidores de nbviewer (aunque siempre podemos alojarlo en nuestro propio servidor)
Podría ser potencialmente más lento de procesar, ya que cada vez que un usuario solicita o carga nuestra página, tendrá que enviar solicitudes a nbviewer.
El CSS que se incluye en Notebook puede sobrescribir el CSS de las páginas del blog (intente usar esta URL https://github.com/plotly/python-user-guide/blob/master/s3_bubble-charts/s3_bubble-charts.ipynb )

Cómo usar el shortcode o código abreviado

Paso 1:

Agregar el siguiente CSS personalizado (ver haciendo clic en el botón a continuación) en Apariencia -> Personalizar -> CSS adicional

************** Jupyter Notebook CSS ************************/
div .dataframe {
border:none;
margin: 0 auto;
}
div.output_stdout pre {
max-height:300px;
}

div.output_stderr pre
{
background: #fdd;
margin:0;
max-height:300px;
}
div.hl-ipython3 pre {
margin:0
}
.dataframe thead tr:only-child th {
text-align: right;
text-transform: capitalize;
}
.dataframe thead th {
text-align: left;
}
.dataframe tbody tr th {
vertical-align: top;
}

.rendered_html tbody tr:nth-child(odd),
.rendered_html tbody tr:nth-child(odd) td {
background: #f5f5f5;
}
.rendered_html tr, .rendered_html th, .rendered_html td {
text-align: right;
vertical-align: middle;
padding: 0.5em 0.5em;
line-height: normal;
white-space: normal;
max-width: none;
border: none;
}
div.highlight .kn, .n, .k, .nn, .s1, .ow, .p, .mi, .c, .mf, .nb, .kc, .sd, .nf {
font-family: monospace;
font-size:14px;
}
.input_prompt {
color: #303F9F;
font-weight: bold;
float: left;
margin-right: 5px;
margin-top: 3px;
}
.input_area pre {
border: 1px solid #cfcfcf;
border-radius: 2px;
background: #f7f7f7;
line-height: 1.21429em;
padding: 6px 3px 6px 6px;
}
.output_prompt{
color:#cc0000;
font-weight: bold;
}
.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, .s1, .sd, .s2 {
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;
}
blockquote {
font-size: 1em;
text-align: left;
font-weight: normal;
}
code {
border: none;
box-shadow: none;
font-family: monospace;
}
div.rendered_html h1, h2, h3, h4 {
margin-top: 30px;
margin-bottom: 10px;
}
div.rendered_html p a {
color: #4D00FF;
}

Paso 2:

En el editor de publicaciones de WordPress, simplemente introduce el shortcode o código abreviado con la URL donde está alojado el archivo ipynb.

Por ejemplo, veamos el Ejemplo 1 donde renderizamos un cuaderno que está almacenado en la página de GitHub de Folium .

Check it out on github Last updated: 10/10/2022 15:03:40

también podemos ver otro ejemplo

Check it out on github Last updated: 04/11/2024 16:31:39

Fuente: https://andrewchallis.co.uk/articles/php-nbconvert-a-wordpress-plugin-for-jupyter-notebooks/

Integrar Jupyter notebook en WordPress

¿Qué es Jupyter Notebook?

Ventajas y desventajas de utilizar Shortcode en Jupyter Notebook

Cómo usar el shortcode o código abreviado

Deja una respuesta Cancelar la respuesta