如果您有參考過我們的 Python 編程教學,例如 Python 如何比較 2 張列表 List?教您逐一比較項目 Element-wise 這篇,你會發現我們在教學的末端都會附上一個嵌入(Embed)的 Google Colab Notebook 完整教學範例。
嵌入後,如以下的例子般,在自己的網站可以直接瀏覽(scroll)Google Colab Notebook,並出現「Open in Colab 」的按鈕,讓讀者能夠直接複製您的 Google Colab Notebook 到自己的 Google Drive 裡使用。
還未對 Google Colab 上手?關於 Google Colab 的文章:
- 新手 1/3:5 分鐘免安裝學習 Python?Google Colab Notebook 幫緊您!
- 新手 2/3:如何用 Google Colab 製做互動表格和圖表?快來學 Import library/Jupyter
- 新手 3/3:如何用 Google Colab 讀取/輸出檔案?從 Google Drive 存取 CSV
第 1 步:註冊或登入 Github 帳戶
首先我們需要一個 Github 的帳戶。要完成我們的目標,Google Colab Notebook 最終需要上傳於 Github。
按此連結到 Github 的主頁:https://github.com/。如果您未註冊 Github 帳戶,可以在主頁「Sign up for GitHub」填寫自己的電郵地址進行登記。
![](https://pythonviz.com/wp-content/uploads/2021/07/colab-notebook-embed-github-registration.png)
完成登記後,按一下「Skip this for now」即可。
![](https://pythonviz.com/wp-content/uploads/2021/07/colab-notebook-embed-github-choose.png)
第 2 步:將 Colab Notebook 更名
如果您未登入到自己的 Google 帳戶,先按左上方的「Sign in」輸入您的 Google 用戶資料。
按此到 Google Colab Notebook:https://colab.research.google.com/
![](https://pythonviz.com/wp-content/uploads/2021/07/colab-notebook-embed-google-colab-login.png)
先為您的 Google Colab Notebook 起名。在左上方「Untitled0.ipynb」點 2 下,然後輸入一個英文和數字等組成的檔案名。
注意:由於 Github 支援問題,請不要在檔案名稱使用中文字。Colab Notebook 內使用中文字則不受此限。
![](https://pythonviz.com/wp-content/uploads/2021/07/colab-notebook-embed-google-colab-rename.png)
第 3 步:將 Colab Notebook 儲存為 GitHub Gist
完成改名後,我們按一下「Save a copy as a GitHub Gist」。
GitHub Gist 是一個在 Github 裡的文件模式,讓您可以分享一些簡短編程(excerpt)。透過把 Google Colab Notebook 儲存為 GitHub Gist,我們可以快捷地分享我們的編程成果。
![](https://pythonviz.com/wp-content/uploads/2021/07/colab-notebook-embed-google-colab-save-to-gist.png)
按了「Save a copy as a GitHub Gist」後,Google Colab Notebook 的畫面會出現「Colaboratory is waiting for authorisation from GitHub」的字句。
如果您未登入至 Github,會彈出要求您輸入帳戶資料的視窗。
![](https://pythonviz.com/wp-content/uploads/2021/07/colab-notebook-embed-google-colab-login-to-github.png)
完成後,會見到新的視窗跳出一個新的 Google Colab Notebook。留意左上方的 Google Drive 標誌變成了黑白色的 Github 標誌,代表我們成功上傳 Google Colab Notebook 成為新的 Github Gist。
![](https://pythonviz.com/wp-content/uploads/2021/07/colab-notebook-embed-google-colab-gist.png)
第 4 步:獲取嵌入 HTML 代碼
在 Github Gist 版本 的 Google Colab Notebook(左上方的標誌是黑白色的 Github,而非 Google Drive)按一下「View on GitHub」。
![](https://pythonviz.com/wp-content/uploads/2021/07/colab-notebook-embed-view-in-github.png)
新的 Github 頁面會彈出,您應該會見到如以下畫面般,有「Open in Colab」字樣的 Github Gist 模樣。
這頁是您私人的 Github Gist 上傳,文件已經從 Google Drive 轉移到 Github,可以作更進一步的版本控制(version control)等的功能。
我們特別需要使用「Embed」的功能。在紅框裡,是一行在可以直接嵌入 HTML 文件的 javascript 。
按一下紅框裡右方的複製鍵。
![](https://pythonviz.com/wp-content/uploads/2021/07/colab-notebook-embed-copy-embed-code.png)
您應該會複製到類似以下的 HTML 代碼:
<script src="https://gist.github.com/pythonviz/5fb02f1998b57f79af2e4b3135599131.js"></script>
留意這個連結是獨特(unique)於每個文件的。每一個您上傳的 Google Colab Notebook 都有不同的 src 部分。
第 5 步:在網頁嵌入 HTML 代碼
最後我們只需要非常簡單地把我們複製的 <script> 代碼貼上我們的 HTML 文件即可。就如以下簡單的 HTML 例子,當 HTML 文件被讀取時,便會同時自動把 Gist 的內容輸出成美麗和互動的元素(Element)。
<html> <p> <script src="https://gist.github.com/pythonviz/5fb02f1998b57f79af2e4b3135599131.js"></script> </p> </html>
![](https://pythonviz.com/wp-content/uploads/2021/07/colab-notebook-embed-html-example.png)
補充:在 WordPress 嵌入 HTML 代碼
不是所有人都是直接編輯 HTML 文件的。
以 WordPress 為例,加入這個代碼的方法就是在 Gutenburg Editor(即是最新版本的 WordPress Post Editor)按一下加,然後選擇「Custom HTML」並貼上上面的 <script> 代碼:
![](https://pythonviz.com/wp-content/uploads/2021/07/colab-notebook-embed-wordpress-2.png)
如何更改已上傳的 Google Colab Notebook?
有時我們上傳了 Google Colab Notebook,卻還是想稍作更改怎麼辦?
這其實不難。我們先到這個網址:https://gist.github.com/,然後按一下「View your gists」。
![](https://pythonviz.com/wp-content/uploads/2021/07/colab-notebook-embed-mygist.png)
在這裡我們會見到所有我們上傳到 Github Gist 的 Google Colab Notebook。點選您想修改的 Notebook。
![](https://pythonviz.com/wp-content/uploads/2021/07/colab-notebook-embed-allgist.png)
按一下 Open in Colab。
![](https://pythonviz.com/wp-content/uploads/2021/07/colab-notebook-embed-open-in-colab-1024x412.png)
注意:如果您仍未登入 Google 帳戶,請在這步按「Sign in」登入。
在 Notebook 的底下加入任意的更改。(以下加入了「已上傳後仍能更改」的字眼)
![](https://pythonviz.com/wp-content/uploads/2021/07/colab-notebook-embed-edit-gist.png)
按一下「Save」。
注意:不要在這步按「Save a copy as GitHub Gist」,否則會變成一個新的 Gist 而不是更改原有的 Gist。
![](https://pythonviz.com/wp-content/uploads/2021/07/colab-notebook-embed-save-edit.png)
最後回到原來的 Gist,可以見到我們儲存的修訂。
如果您到左上方「Revision」一頁,可以見到您不同時候儲存的 Gist 以及它們的差異。
![](https://pythonviz.com/wp-content/uploads/2021/07/colab-notebook-embed-updated.png)
常見問題
別人可以隨意修改我的原始的 Google Colab Notebook 嗎?
只有您的 Google 帳戶才能修改您嵌入的 Google Colab Notebook,別人只能拷貝您的 Notebook 到他們自己的 Google 帳戶。
如下圖所示,我們需要登入自己的帳戶才能儲存更改,其他帳戶則不能。
![](https://pythonviz.com/wp-content/uploads/2021/07/colab-notebook-embed-onlyusercanedit.png)
我在 Github Gist 的 Google Colab Notebook 是任何人都可以看見嗎?
對,上傳到 Github Gist 的 Notebook 是公開的,所有人都能閱讀。
更改了 Github Gist 的 Colab Notebook,需要更新所有的 <script> HTML 代碼嗎?
不用,只要您使用上面提及的方法更新 Gist 的話,原有的嵌入亦會隨之更新。