Publicar cuaderno de IPython en WordPress

5 minutos de lectura

Estoy tratando de convertir mi cuaderno IPython en un archivo html para poder ponerlo en mi blog de wordpress. He usado el siguiente comando para generar un archivo html para el cuaderno

ipython nbconvert notebook.ipynb

luego copié el código html y lo pegué en la pestaña ‘texto’. La publicación de blog resultante se parece al cuaderno de ipython, sin embargo, el problema es que las ecuaciones de descuento no aparecen y los encabezados se ven extraños. ¿Alguien ha logrado mostrar un cuaderno IPython en una publicación de blog de wordpress con éxito? ¿Si es así, cómo?

avatar de usuario
Pedro H.

En este artículo de blog de noviembre de 2013 http://www.josephhardinee.com/blog/?p=46el autor pasa rápidamente por el proceso de conversión.

Menciona la necesidad de instalar el Complemento sencillo de Mathjax para hacer que la visualización de ecuaciones funcione.

Ahora, lo que he probado para trabajar en mi blog de WordPress autohospedado:

  1. Copie y pegue la salida html de nbconvert (solo lo que está dentro del <body> etiqueta) en la pestaña “Texto”.
  2. deshabilite el análisis del código html de Worpress porque, de lo contrario, las imágenes no se mostrarán (como se explica en la publicación del blog). Vea a continuación dos métodos posibles.
  3. Activar Mathjax: ya sea con un complemento o manualmente en el código postal

Mathjax con complemento

no he probado el Simple Mathjax complemento, pero tengo LaTeX for WordPress que funciona para mí.

Activación manual de Mathjax

Copie y pegue de nbconvert la salida de los dos <script> etiquetas que activan Mathjax:

1) Cargue la biblioteca:

<script src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" type="text/javascript"></script>

2) Inícielo:

<script type="text/javascript">
init_mathjax = function() {
    if (window.MathJax) {
        // MathJax loaded
        MathJax.Hub.Config({
            tex2jax: {
                inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
            },
            displayAlign: 'left', // Change this to 'center' to center equations.
            "HTML-CSS": {
                styles: {'.MathJax_Display': {"margin": 0}}
            }
        });
        MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
    }
}
init_mathjax();
</script>

Deshabilitar el análisis de código HTML

La publicación del blog sugiere activar el PS Desactivar formateo automático complemento para hacer que las imágenes del cuaderno funcionen. Lo he probado con éxito, pero tiene un inconveniente: se estropea con la representación de todas las demás publicaciones… ¡eso es un gran problema!

He probado en su lugar el HTML sin formato complemento que habilita un sintonización por publicación. He hecho que las imágenes funcionen seleccionando el Disable automatic paragraphs opción (el complemento crea un nuevo cuadro en el editor de publicaciones).

Cuestiones pendientes:

mientras que los portátiles deberían mostrarse bien con este método, todavía hay trabajo para obtener el resaltado de sintaxis de celdas de código para mostrar correctamente. Sin embargo, el código fuente de Python ya está analizado por CodeMirror, por lo que solo se trata de cargar el código CSS apropiado.

Un enfoque es incrustar el cuaderno mediante un iframe. Esta idea original surgió de la publicación del blog. http://onsnetwork.org/eimd/2014/08/08/how-to-enter-ipython-notebooks-to-wordpress/, pero he hecho varias mejoras. La forma sencilla de hacer esto es:

  1. Instala el Raw HTML Complemento para WordPress. Esto solo debe hacerse una vez.
  2. Convierte el cuaderno a HTML ipython nbconvert YOUR_NOTEBOOK.ipynb
  3. Cargue el HTML resultante en WordPress como un archivo multimedia. Tome nota de la URL donde se carga.
  4. Inserte el iframe entre raw etiquetas en tu publicación. Por ejemplo:

    [raw]
    <iframe id="ipython_notebook_frame" 
            style="height: 500px; width: 100%; padding: 0; border: none;" 
            src="https://stackoverflow.com/questions/20849988/URL_OF_NOTEBOOK">
     </iframe>
    [/raw]
    

Desafortunadamente, este enfoque sencillo no funciona muy bien ya que la altura nunca es la correcta y uno tiende a tener barras de desplazamiento horizontales molestas. Sin embargo, dado que el html cargado está alojado en el mismo dominio que la publicación del blog, esto se puede arreglar usando javascript. La siguiente receta parece funcionar razonablemente bien para obtener el ancho y la altura correctos, lo que da como resultado una publicación de blog limpia:

    [raw]

    <script type="text/javascript">
    function resizeIframe(ifrm) {       
        ifrm.style.height = ifrm.contentWindow.document.body.scrollHeight + 'px';
        // Setting the width here, or setting overflowX to "hidden"both 
        // seem to work. It may be that one turns out to be better; for
        // now I set the height.
        ifrm.style.width = ifrm.contentWindow.document.body.scrollWidth + 'px';
    }
    </script>

    <script type="text/javascript">
    function onLoad() {    
        var ifrm = document.getElementById('ipython_notebook_frame');   
        setTimeout(resizeIframe, 0, ifrm);
    }
    </script>

    <iframe id="ipython_notebook_frame" 
            style="height: 500px; width: 100%; padding: 0; border: none;" 
            src="https://stackoverflow.com/questions/20849988/URL_OF_NOTEBOOK">
     </iframe>

    <script type="text/javascript">
    // By deleting and reinstating the iframe src, and by using setTimeout
    // rather than resizing directly we convince Safari to render the
    // page. I've lost the link for where I found this trick, so 
    // can't properly credit it.
    var iframe = document.getElementById('ipython_notebook_frame');
    iframe.onload = onLoad;
    var iSrc = iframe.src;
    iframe.src="";
    iframe.src = iSrc;
    </script>

    [/raw]

Para un poco más de detalles sobre esto, así como un ejemplo, puede echar un vistazo a esta publicación: http://www.bitsofbits.com/2015/01/19/ipython-notebooks-in-wordpress

¿Ha sido útil esta solución?