Hexo with the Jupyter notebook

作為一個程序員,一定會用到Jupyter Notebook的,非常好用,但是之前已經想很久要把檔案放上來可以展示,與blog結合。

Steps

主要步驟簡單:

第一步 安裝 hexo-jupyter-notebook

進入根目錄

1
npm install hexo-jupyter-notebook --save

第二步 安裝兩個 pandoc 和 nbconvert

不過如果有安裝Anaconda的話基本上都有

第三步 打開配置裡面的選項

根目錄下的 _config.yml
把裡面的 post_asset_folder改為true

第四步 創建檔案夾,存放ipybn用的檔案夾

在_posts該目錄下創新的檔案夾 取名為jupyter-demo文件夾,專門放ipynb檔案的

第五步 插入語法

在需要展示的地方插入語法

1
2
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
{% asset_jupyter /Users/chiehpower/anaconda3/bin/python3.7 ../jupyter-demo/Lasso.ipynb %}

意義是

1
{% asset_jupyter python_path jupyter_file_name %}

注意:jupyter_file_name不可以用絕對路徑。

我因為有安裝過anaconda3所以直接使用裡面的python
路徑是

1
/Users/chiehpower/anaconda3/lib/python3.7

(chiehpower是我的使用者名稱)

Frame

雖然在hexo s時,可以完整呈現整個檔案,但如果deploy之後,卻會被限制住。
找到位置:/Users/chiehpower/blog/blog_MacBackup/node_modules/hexo-jupyter-notebook/main.py
裡面更改高度為:

1
2
<iframe id='ipynb'   marginheight="0" frameborder="0" width='924px' height='680px' srcdoc="%s"  style="scrolling:no;">
</iframe>

展示

以下只是隨意找一個檔案來做範例XD
請別管內容 😉


Reference