如何在WordPress上呈現Jupyter Notebook？
6 min readMar 10, 2019
1.先將檔案(.ipynb)上傳至GitHub
請記下此檔案的連結，將於後續呈現Notebook時使用(第5步驟)2.安裝WP Pusher外掛
至官方網站，將檔案(ZIP壓縮檔)下載回電腦當中到WordPress後台→外掛→安裝外掛→上傳外掛，將壓縮檔上傳至WordPress並進行安裝
3.安裝nbconvert外掛(將ipynb呈現於WordPress的部落格頁面)
進入WP Pusher外掛頁面→Install a plugin→Repository host選擇GitHub→Plugin repository輸入 ghandic/nbconvert，並且進行Install
4.調整CSS
外觀→自訂→附加的CSS加入以下CSS程式碼/************** Jupyter Notebook CSS ************************/div .dataframe {border:none;margin: 0 auto;}div.output_stdout pre {max-height:300px;}div.output_stderr pre{background: #fdd;margin:0;max-height:300px;}div.hl-ipython3 pre {margin:0}.dataframe thead tr:only-child th {text-align: right;text-transform: capitalize;}.dataframe thead th {text-align: left;}.dataframe tbody tr th {vertical-align: top;}.rendered_html tbody tr:nth-child(odd),.rendered_html tbody tr:nth-child(odd) td {background: #f5f5f5;}.rendered_html tr, .rendered_html th, .rendered_html td {text-align: right;vertical-align: middle;padding: 0.5em 0.5em;line-height: normal;white-space: normal;max-width: none;border: none;}div.highlight .kn, .n, .k, .nn, .s1, .ow, .p, .mi, .c, .mf, .nb, .kc, .sd, .nf {font-family: monospace;font-size:14px;}.input_prompt {color: #303F9F;font-weight: bold;float: left;margin-right: 5px;margin-top: 3px;}.input_area pre {border: 1px solid #cfcfcf;border-radius: 2px;background: #f7f7f7;line-height: 1.21429em;padding: 6px 3px 6px 6px;}.output_prompt{color:#cc0000;font-weight: bold;}.prompt{font-family: monospace;font-size: 14px;}.c, c1 {color: #408080;font-style: italic;}.k {color: #338822;font-weight: bold;}.kn {color: #338822;font-weight: bold;}.mi {color: #008800;}.mf {color: #008800;}.o {color: #9966ff;}.ow {color: #BA22FF;font-weight: bold;}.nb {color: #338822;}.n {color: #000000;}.s, .s1, .sd, .s2 {color: #cc2222;}.se {color: #cc2222;font-weight: bold;}.si {color: #C06688;font-weight: bold;}.nn {color: #4D00FF;font-weight: bold;}.output_area pre {background-color: #FFFFFF;padding-left: 5%;}.code_cell {padding-left: 1%;}.cell {margin-top: 10px;margin-bottom: 10px;}br {line-height: 2;}blockquote {font-size: 1em;text-align: left;font-weight: normal;}code {border: none;box-shadow: none;font-family: monospace;}div.rendered_html h1, h2, h3, h4 {margin-top: 30px;margin-bottom: 10px;}div.rendered_html p a {color: #4D00FF;}
5.進行貼文
[nbconvert url="https://github.com/python-visualization/folium/blob/master/examples/CheckZorder.ipynb"]#請注意，雙引號裡面的網址是第1步驟的檔案連結(以.ipynb結尾之連結)
6.範例如下