Cómo convertir Jupyter Notebook a HTML compatible con WordPress

5 minutos de lectura

Esta semana hice un cuaderno Jupyter que sería una excelente publicación para mi blog. Ya descubrí que puede exportar este cuaderno a un formato HTML simplificado que se puede incrustar en una página web con este comando:

jupyter nbconvert mynotebook.ipynb --to html --template basic

Sin embargo, me gustaría cambiar algunas cosas simples. Por ejemplo: todos los títulos ahora terminan con el “carácter de fin de línea”, y no hay una diferencia clara entre la entrada y la salida.

En la página de documentación de NBConvert de Jupyter, no puedo encontrar nada sobre cómo cambiar las plantillas (https://ipython.org/ipython-doc/3/notebook/nbconvert.html). solo dicen

“IPython proporciona algunas plantillas para algunos formatos de salida, y estos se pueden especificar a través de un argumento –template adicional”.

¿Es posible especificar su propia plantilla? ¿Y dónde puedo encontrar la plantilla “básica” que quiero ajustar?

  • ¿Has probado el método descrito aquí?pythonandr.com/2016/07/18/…

    – Miguel

    22 mayo 2017 a las 21:52

  • Si pega el HTML como se describe en ese método, se rompen muchos formatos, incluidas todas las imágenes. WordPress no puede simplemente dejar HTML como está.

    – rspeer

    29 de junio de 2017 a las 22:47


Debe instalar el siguiente complemento en wordpress: “oEmbed Gist”

Entonces simplemente tienes que completar estos pasos:

1/Pegue su cuaderno en su esencia en github (no olvide agregar la extensión .ipynb).

2/Simplemente pegue el enlace a su esencia y wordpress hará todo el trabajo correctamente por usted

  • ¿Cómo haría esto para datos privados (git privado); nuestro wordpress ya es privado

    – n3

    8 de enero de 2019 a las 15:32


  • ¿Por qué es esto mejor o peor que usar nbconvert y un enlace a github?

    – Jwan622

    7 de abril de 2020 a las 13:48

El complemento oEmbed Gist solo se puede instalar si es un miembro premium de wordpress. Sin embargo, insertando

[gist linkToYouGist]

en la publicación de wordpress, ¡hará el trabajo!

  • aunque aparece como en una ventana de desplazamiento, ¿qué hago para que sea una ventana completa?

    – Piyush Divyanakar

    30 de octubre de 2017 a las 14:03

Para aquellos que buscan cargar el HTML en WordPress (en lugar de incrustarlo a través de Gist), pueden usar nb2wp herramienta para convertir el cuaderno a HTML simple que no requiere complementos, CSS ni scripts. Las imágenes se extraerán y las directivas Latex se convertirán en directivas WP latex.

Lo que hace la utilidad es lo siguiente:

  • convertir .ipynb a HTML usando nbconvert usando la plantilla seleccionada (completa, básica o personalizada)
  • convierta el CSS al estilo en línea usando pynliner para que WordPress respete el estilo. De forma predeterminada, reemplaza el CSS proporcionado por nbconvert con un estilo personalizado y más simple.css que pynliner puede incorporar.
  • extraiga imágenes incrustadas (como las producidas por Matplotlib) e imágenes locales en el directorio img. Debe cargar este directorio img en algún lugar y proporcionar un prefijo de URL para las imágenes.
  • convertir directivas Latex a directivas Latex de WordPress.com.

Entonces necesitas hacer algunos trabajos manuales:

  • copie y pegue el HTML dentro del editor HTML de WordPress
  • sube el directorio de imágenes.

Está lejos de ser ideal y el resultado no es muy bueno, pero supongo que es un comienzo y una alternativa. (descargo de responsabilidad: soy el autor)

  • ¡Parece una gran herramienta! ¡Gracias por hacerlo!

    – rmeertens

    25 de septiembre de 2019 a las 5:20

También puede usar nbconvert: un complemento de wordpress para portátiles Jupyter. Siga este blog detallado (https://www.andrewchallis.co.uk/portfolio/php-nbconvert-a-wordpress-plugin-for-jupyter-notebooks/ ) donde el autor explica los pasos a seguir, pros y contras.

avatar de usuario
andy challis

¡He creado un complemento de WordPress para portátiles que funcionará para cualquier URL donde esté alojado el portátil! Lo agregaré públicamente a WordPress pronto.

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

Se usa de la misma manera que el complemento Gist, excepto que se llama nbconvert

[nbconvert url=“Www.example.co.uk/path/to/some/notebook.ipynb”

  • Please don’t just post some tool or library as an answer. At least demonstrate how it solves the problem in the answer itself.

    – LW001

    Nov 17, 2017 at 13:30

  • I’ve updated to show the example but the reason I hadn’t put a fill solution is that the plugin isn’t public yet.

    – Andy Challis

    Nov 17, 2017 at 14:07

  • As of at least 2018-05-22 the URL in the post goes to a 404 Not Found page.

    – Sean

    May 22, 2018 at 14:39

  • Updated the link!

    – Andy Challis

    Apr 1, 2019 at 1:37

  • Link’s unfortunately dead 🙁

    – schneiderfelipe

    Jun 25, 2019 at 13:06

user avatar
Eduardo

Here’s the source code for the basic template. Note that it’s loading from the “classic” one, which you can also find there.

Now, let’s see how to customize it.

Editing nbconvert’s basic template

The quick dirty way is to install nbconvert in editable mode and then edit the basic template:

git clone https://github.com/jupyter/nbconvert
cd nbconvert
# install in editable mode
pip install -e .

Creating your own template

The clean one is to create a new template and then integrate it with nbconvert so you can do:

jupyter nbconvert --to html --template {your-template-name}

Here’s a project that does that. It’ll help you see how it’s done.

non-nbconvert solution

A final solution is not to use nbconvert. First, you need to convert the notebook into markdown:

pip install jupytext
jupytext notebook.ipynb --to md

Then, you can use jupyblog to execute that markdown (it’ll create a new markdown file with code snippets with the outputs). If your blog engine supports markdown files, you’re done; if not, you can easily convert that markdown to HTML.

  • Please don’t just post some tool or library as an answer. At least demonstrate how it solves the problem in the answer itself.

    – LW001

    Nov 17, 2017 at 13:30

  • I’ve updated to show the example but the reason I hadn’t put a fill solution is that the plugin isn’t public yet.

    – Andy Challis

    Nov 17, 2017 at 14:07

  • As of at least 2018-05-22 the URL in the post goes to a 404 Not Found page.

    – Sean

    May 22, 2018 at 14:39

  • Updated the link!

    – Andy Challis

    Apr 1, 2019 at 1:37

  • Link’s unfortunately dead 🙁

    – schneiderfelipe

    Jun 25, 2019 at 13:06

¿Ha sido útil esta solución?