在Hexo博文中嵌入Jupyter notebook
嵌入Jupyter notebook (.ipynb
)以展示Python代码 (从入门到入土).
前提准备
安装hexo-jupyter-notebook
和co
两个npm包, 后者为前者的依赖
npm install hexo-jupyter-notebook --save |
像在Hexo博文中嵌入视频一文中的视频画面一样, 为了将嵌入帧尺寸做成响应式的, 修改node_modules/hexo-jupyter-notebook/main.py
中的template
变量, 加入auto-resizable-iframe
容器
template = """ |
有这一部分后, 我就没有像参考链接里那样用jQuery来控制尺寸.
再准备好要嵌入的ipynb文件, 准备工作就做好了. 我这里用的是之前练习matplotlib时写的meshgrid_plot.ipynb
嵌入ipynb
做好上述准备后, 进行下面三步操作
在
_config.yml
中打开post_asset_folder
post_asset_folder: true
在
source/assets
中新建codes
文件夹, 将准备好的ipynb放入其中.Markdown文本中, 在要嵌入ipynb的位置加入
{% asset_jupyter /usr/local/bin/python3 ../../assets/codes/meshgrid_plot.ipynb %}
嵌入效果如图所示.
结论
成功利用hexo-jupyter-notebook
包, 在Hexo博文中嵌入了Jupyter notebook. 然而自己对这个效果不是很满意, 主要是两个原因
- 嵌入的ipynb代码有滚动条. 修改
iframe
的大小(试到3000px)或修改JS里+100
为更大数值, 也不能解决. - 更关键的,
hexo s
渲染时间显著增加, 从600 ms左右增加到1.34 s. 且持续一段时间后系统明显卡顿, 调试变得更麻烦了.
遂最终放弃了嵌入ipynb的想法 _(xз」∠)_
参考
Blogging Jupyter Notebooks (.ipynb) with Hexo on GitHub - Medium