IPython in WordPress einfügen

IPython ist einer der besten Erweiterungen für Python. Schnell kann man seine Skripte als IPythonnotebook-, PDF- oder HTML-File exportieren. Die Importierung und Integration in WordPress-Post ist jedoch etwas komplizierter. Hier lernst Du, wie es reibungslos und schnell funktioniert.

Da es noch kein WordPressplugin gibt, um IPythonfiles in WordPress einzufügen, muss man etwas tiefer in WordPress einsteigen. Mehrere User haben sich bereits mit diesem Problem beschäftigt (1, 2, 3 und 4).

IPython in WordPress einfügen

Die einfachste Lösung übernommen aus 1:

  1. Installiere das Raw HTML plugin in WordPress.
  2. Wandel Dein IPythonfile in ein HTMLfile um (File-> Download as).
  3. Lade das HTMLfile mittels Medienupload in WordPress hoch, kopiere die URL für das HTML-File
  4. Füge den folgenden Code in den WordPressbeitrag im HTML-Modus ein und ersetze URL_OF_NOTEBOOK mit der URL des HTML-Files:

<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" as above both 
    // work for this page. It may be that one turns out to be better.
    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="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. See http://www.bitsofbits.com/wp-content/uploads/2015/01/custom.css
var iframe = document.getElementById('ipython_notebook_frame');
iframe.onload = onLoad;
var iSrc = iframe.src;
iframe.src = '';
iframe.src = iSrc;
</script>


 

Ein Besipiel für das Ergebnis kann hier betrachtet werden oder in dem unteren Bild:

IPython in WordPress

Please follow and like us:

Leave a Reply

Your email address will not be published. Required fields are marked *