WP——在博客(wordpress)中嵌入jupyter notebook

安装raw-html插件,通过iframe标签,嵌入jupyter notebook

步骤:

1.在wordpress中安装raw_html插件,并在设置中启用(raw可防止wordpress干扰代码)。

2.1将jupyter notebook 下载为html格式的文件。

2.2 上传到服务器中,要求能用域名直接访问。(最好放在wordpress相同区域的文件件夹中)

3.1 在wordpress页面中,插入Html标签,并写入如下代码:

将URL_OF_NOTEBOOK替换为2.2的网址https://www.dotomui.com/***.html

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

[/raw]

4.最后效果如下所示:

发表评论

电子邮件地址不会被公开。 必填项已用*标注