如果您有參考過我們的 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」填寫自己的電郵地址進行登記。
完成登記後，按一下「Skip this for now」即可。
第 2 步：將 Colab Notebook 更名
如果您未登入到自己的 Google 帳戶，先按左上方的「Sign in」輸入您的 Google 用戶資料。
按此到 Google Colab Notebook：https://colab.research.google.com/
先為您的 Google Colab Notebook 起名。在左上方「Untitled0.ipynb」點 2 下，然後輸入一個英文和數字等組成的檔案名。
注意：由於 Github 支援問題，請不要在檔案名稱使用中文字。Colab Notebook 內使用中文字則不受此限。
第 3 步：將 Colab Notebook 儲存為 GitHub Gist
完成改名後，我們按一下「Save a copy as a GitHub Gist」。
GitHub Gist 是一個在 Github 裡的文件模式，讓您可以分享一些簡短編程（excerpt）。透過把 Google Colab Notebook 儲存為 GitHub Gist，我們可以快捷地分享我們的編程成果。
按了「Save a copy as a GitHub Gist」後，Google Colab Notebook 的畫面會出現「Colaboratory is waiting for authorisation from GitHub」的字句。
如果您未登入至 Github，會彈出要求您輸入帳戶資料的視窗。
完成後，會見到新的視窗跳出一個新的 Google Colab Notebook。留意左上方的 Google Drive 標誌變成了黑白色的 Github 標誌，代表我們成功上傳 Google Colab Notebook 成為新的 Github Gist。
第 4 步：獲取嵌入 HTML 代碼
在 Github Gist 版本 的 Google Colab Notebook（左上方的標誌是黑白色的 Github，而非 Google Drive）按一下「View on GitHub」。
新的 Github 頁面會彈出，您應該會見到如以下畫面般，有「Open in Colab」字樣的 Github Gist 模樣。
這頁是您私人的 Github Gist 上傳，文件已經從 Google Drive 轉移到 Github，可以作更進一步的版本控制（version control）等的功能。
我們特別需要使用「Embed」的功能。在紅框裡，是一行在可以直接嵌入 HTML 文件的 javascript 。
按一下紅框裡右方的複製鍵。
您應該會複製到類似以下的 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>
補充：在 WordPress 嵌入 HTML 代碼
不是所有人都是直接編輯 HTML 文件的。
以 WordPress 為例，加入這個代碼的方法就是在 Gutenburg Editor（即是最新版本的 WordPress Post Editor）按一下加，然後選擇「Custom HTML」並貼上上面的 <script> 代碼：
如何更改已上傳的 Google Colab Notebook？
有時我們上傳了 Google Colab Notebook，卻還是想稍作更改怎麼辦？
這其實不難。我們先到這個網址：https://gist.github.com/，然後按一下「View your gists」。
在這裡我們會見到所有我們上傳到 Github Gist 的 Google Colab Notebook。點選您想修改的 Notebook。
按一下 Open in Colab。
注意：如果您仍未登入 Google 帳戶，請在這步按「Sign in」登入。
在 Notebook 的底下加入任意的更改。（以下加入了「已上傳後仍能更改」的字眼）
按一下「Save」。
注意：不要在這步按「Save a copy as GitHub Gist」，否則會變成一個新的 Gist 而不是更改原有的 Gist。
最後回到原來的 Gist，可以見到我們儲存的修訂。
如果您到左上方「Revision」一頁，可以見到您不同時候儲存的 Gist 以及它們的差異。
常見問題
別人可以隨意修改我的原始的 Google Colab Notebook 嗎？
只有您的 Google 帳戶才能修改您嵌入的 Google Colab Notebook，別人只能拷貝您的 Notebook 到他們自己的 Google 帳戶。
如下圖所示，我們需要登入自己的帳戶才能儲存更改，其他帳戶則不能。
我在 Github Gist 的 Google Colab Notebook 是任何人都可以看見嗎？
對，上傳到 Github Gist 的 Notebook 是公開的，所有人都能閱讀。
更改了 Github Gist 的 Colab Notebook，需要更新所有的 <script> HTML 代碼嗎？
不用，只要您使用上面提及的方法更新 Gist 的話，原有的嵌入亦會隨之更新。
