在 Wordpress 中发布 IPython Notebook答案

【问题标题】：Posting IPython Notebook in Wordpress在 Wordpress 中发布 IPython Notebook
【发布时间】：2013-12-31 00:46:14
【问题描述】：

我正在尝试将我的 IPython 笔记本转换为 html 文件，以便可以将其放在我的 wordpress 博客上。我已经使用以下命令为 notebook 生成了一个 html 文件

ipython nbconvert notebook.ipynb

然后我复制了 html 代码并将其粘贴到“文本”选项卡中。生成的博客文章有点像 ipython 笔记本，但问题是降价方程不显示并且标题看起来很奇怪。有没有人成功地在 wordpress 博客文章中显示 IPython 笔记本？如果有，怎么做？

【问题讨论】：

标签： wordpress blogs ipython-notebook

【解决方案1】：

在这篇 2013 年 11 月的博客文章 http://www.josephhardinee.com/blog/?p=46 中，作者快速完成了转换过程。

他提到需要安装Simple Mathjax plugin 才能使方程式显示工作。

现在，我在自托管的 Wordpress 博客上进行了测试：

将 nbconvert 的 html 输出（仅限 <body> 标记内的内容）复制粘贴到“文本”选项卡中。
禁用 Worpress html 代码解析，否则图像不会显示（如博文中所述）。请参阅下文了解两种可能的方法。
激活 Mathjax：使用插件或手动在邮政编码中

Mathjax 带插件

我没有测试过Simple Mathjax 插件，但我有LaTeX for WordPress 适合我。

手动 Mathjax 激活

从 nbconvert 复制粘贴输出激活 Mathjax 的两个 <script> 标签：

1) 加载库：

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

2) 启动它：

<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>

禁用代码 HTML 解析

博客文章建议激活PS Disable Auto Formatting 插件以使笔记本图像正常工作。我已经成功测试过它，但它有一个缺点：它会影响所有其他帖子的渲染......这是一个相当大的问题！

我已经测试了Raw HTML 插件，它启用了per-post 调整。我通过选择 Disable automatic paragraphs 选项使图像工作（插件在帖子编辑器中创建一个新框）。

剩余问题：

虽然使用此方法笔记本应该可以正常显示，但要使代码单元的 语法高亮 正常显示，仍有工作要做。但是 Python 源代码已经被 CodeMirror 解析了，所以应该只是加载适当的 CSS 代码。

【讨论】：

【解决方案2】：

一种方法是使用 iframe 嵌入笔记本。这个最初的想法来自博客文章http://onsnetwork.org/eimd/2014/08/08/how-to-enter-ipython-notebooks-to-wordpress/，但我做了一些改进。直接的方法是：

将Raw HTML 插件安装到Wordpress。只需执行一次。
将笔记本转换为 HTML ipython nbconvert YOUR_NOTEBOOK.ipynb
将生成的 HTML 作为媒体文件上传到 Wordpress。记下上传到的 URL。

在帖子中的 raw 标记之间插入 iframe。例如：

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

不幸的是，这种直截了当的方法效果不佳，因为高度永远不会正确，而且往往会出现令人讨厌的水平滚动条。但是，由于上传的 html 与博客文章托管在同一个域中，因此可以使用一些 javascript 来解决此问题。以下配方似乎可以很好地获得正确的宽度和高度，从而产生干净的博客文章：

    [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="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]

有关这方面的更多详细信息以及示例，您可以查看此帖子：http://www.bitsofbits.com/2015/01/19/ipython-notebooks-in-wordpress

【讨论】：