吐槽改进日志

jupyter notebook嵌入Hexo

字数统计: 661字   |   阅读时长: 2分

摘要: 如何在 Hexo 文章中插入 Jupyter Notebook 中的 Cells

【对算法，数学，计算机感兴趣的同学，欢迎关注我哈，阅读更多原创文章】
我的网站：潮汐朝夕的生活实验室
我的公众号：算法题刷刷
我的知乎：潮汐朝夕
我的github：FennelDumplings
我的leetcode：FennelDumplings

jupyter notebook 是算法工程师进行数据分析和单机的离线实验时经常使用的工具。除了代码管理以外，还可以方便地展示中间结果。并且支持 markdown，可以将代码和笔记放在一起。此外它的外观也很简洁，适合直接放在网站中展示。

目前有两种主流方案，第一种基于 hexo-jupyter-notebook 插件，第二种基于 html 页面嵌入。我使用的是第二种方案。

第一种方案

首先需要插件 hexo-jupyter-notebook

1
npm install hexo-jupyter-notebook --save

安装依赖 co

1
npm install co --save

安装依赖 pandoc。Pandoc 是一个命令行工具，用于将文件从一种标记语言转换为另一种标记语言。

1
sudo apt install pandoc

在当前的 python 环境下安装 nbconvert，nbconvert 用于将 notebook 转换为其它格式。

1
pip install nbconvert

修改配置 _config.yml，将 post_asset_folder 设为 true。

文章依然在 _posts/ 目录下，此外需要一个 notebook/ 目录管理文章中插入的 .ipynb 文件。目录结构如下：

1
2
3
4
5
source
| ---- _posts
       | ---- article.md
| ---- notebook
       | ---- notebook.ipynb

在需要嵌入 .ipynb 的文章中，在 .md 中的对应位置写入以下内容

1
2
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
{% asset_jupyter /path/to/python /path/to/ipynb %}

其中 /path/to/python 为 .ipynb 文件中使用的 python 环境；/path/to/ipynb 是 .ipynb 文件与当前文章的相对路径。

第二种方案

将浏览器中打开的 notebook 文件下载为 HTML 文件，HTML 文件会默认的引用当前目录下的 custom.css 的样式，在 HTML 文件所在的目录下新建空的 custom.css 文件，后续需要修改样式的化就改这个文件就可以了。

在 gitee 上开一个仓库，初始化一个 index.html，和 custom.css，并部署 Page 服务，用于承载 HTML 文件。之后就可以以 url 的方式访问该 HTML 文件了。

也可以在自己的网站上开一个目录存放 html 文件。

例如: https://chengzhaoxi.xyz/fc68d983.html ，其中 html 的 url 为 https://chengzhaoxi.xyz/jupyter_html/decision_tree_classifier.html，嵌入的写法

1
<iframe src="https://chengzhaoxi.xyz/jupyter_html/decision_tree_classifier.html" width="100%" height="600"></iframe>

嵌入的 iframe 有滚动条，如果希望去掉，可以调整嵌入的 height 参数，直到合适。

Share