- 嵌入Gist介紹
整體介紹請看<github-gist-可以做什麼> (譯自原文連結)，其中這裡要談的是，可以把 gist 所代管的程式碼直接嵌進網頁裡，該程式源碼會自動被 Javascript 包覆成 js 檔，網頁裡除了能看到程式碼之外，還包含行號和 SyntaxHighlight 亮麗上彩等效果，就像GitHub網頁裡所看到的一樣，很是如意。
<script src="https://gist.github.com/username/gist-id.js"></script>
- <在 gist 被js包覆的程式碼> 但是上到作者的網頁裡卻找不到這程式碼，如直接輸入該檔完整的URL卻能看到該js文檔，被GitHub Gist處理後的js包覆(含行號等)如下:
<script src="https://gist.github.com/pinglunliao/9cad0ca23f5df0ef5aee8869444de8a5.js"></script>
已經處理.
使用Gadget: https://cdn.rawgit.com/azam/2e35a393ee2425f40c6d04de4ce5926b/raw/5389dc5ce442eca1c517cfe12132a0b90553e965/gist4sites.xml
其XML文檔內容列表如下：
Embed Gist Gadget gist4sites.xml圖一：內嵌Gist源碼之小工具(Gadget)XML文檔(如何做到的？請見後文見分曉)
以下是新的Gadget有新的兩段式URL輸入法，就以前述<Arduino 藍芽自走車>為例，其Gist之URL，除了最後的 .js 不考略外，前一段是https://gist.github.com，後一段則是pinglunliao/9cad0ca23f5df0ef5aee8869444de8a5，我們在新的Gadget設定內容之Gist#空白欄位處填入後一段字串就行了，但引用Gadget的XML檔其URL過長，當思改進法子。
圖二：在小工具裡Gist#欄位填入Gist之<username/gist-id>
改善：直接進入【管理協作平台】>【附件】，接著點擊上面的【上傳】鈕就可以能上傳gist4sites.xml檔案到Google Sites
回到剛才已經上傳Gadget其XML的載點位置，網址的部分我們要透過複製連結網址來取得，移動一下你的滑鼠到檔案下載的箭頭上然後按右鍵【複製連結網址】，這個時候應該會得到下列一串URL。
https://sites.google.com/a/alepapa.org/digit100/gist4sites.xml?attredirects=0&d=1
後面多出了?attredirects=0&d=1的部分千萬要拿掉，所以正確要引用的Gadget>網址應該是要長這樣
https://sites.google.com/a/alepapa.org/digit100/gist4sites.xml
經實際測試，十分成功
把Gist的程式碼鑲嵌在Google Sites網頁中的操作流程(以如何建立如圖一為目標)：
- 首先要在編輯頁面上點選【插入】→ 選擇【更多小工具】
aa
- 於新出現如下列畫面裡點擊【依據網址新增小工具】
aa
- 於新出現如下列畫面上點擊【依據網址新增小工具】，接著將小工具網址貼在如新畫面裡網址欄位並點選【新增】
aa
- 至此請於Gist:https://gist.github.com/azam/2e35a393ee2425f40c6d04de4ce5926 畫面，並複製要Share(分享)的引用碼片段的 <username/gist-id> 編號
aa
- 回到Google Site將先前取得的引用碼片段編號填入
將圖二：在小工具裡Gist#欄位填入Gist之<username/gist-id>， 本範例為： azam/2e35a393ee2425f40c6d04de4ce5926b
- 適度調整大小，並斟酌勾選必要時為小工具加上捲軸
aa
- 完成後按【確定】鈕，即可在畫面上看到Google 小工具
此時 Gadget小工具處於編輯狀態其畫面會呈空白
- 將此編輯頁面儲存，即可完成作業，即可看到網頁裡此Gadget畫面有如前面圖一所示。
- 然而經常是該Gadget畫面展現的效果並不如人意，這又要再次進入編輯模式，並點擊此Gadget空白畫面，則會在該Gadget底下出現一排工作列(如下圖所示)，如只是畫面大小再調整，那就點擊如下圖工作列最左邊的內容按鈕，也就會看到如前面圖二畫面，這時又回到步驟 6，並適度調整大小，作業流程再往下走，如此循環直到合意為止。
aa
|
|
