GitHub Gist 在部落格、網頁中內嵌入高亮程式碼

發表時間：

如果部落格或是網頁主要是在寫程式碼教學，那你肯定需要一個可以嵌入原始碼的外掛，不過哪一套比較穩又比較方便使用呢？在此跟大家推薦由GitHub推出的「Gist」服務，這個服務可以讓您輸入程式碼片段或是完整程式碼，透過Javascript嵌入到網頁中，除了可以有漂亮編排外，還可以有程式碼高亮功能，讓程式碼、原始碼的教學網頁可以變得更讚。

不論是一般網站或者是Blogger、WordPress等部落格系統，只要你的網站有支援Javascript語法張貼，肯定可以使用「Gist」服務，但如果網站不支援Javascript的話，那很抱歉您就無法享用這個服務了。雖然直接貼程式碼在文章中，透過視覺編輯器把種點文字標顏色也可以，不過對於維護者來說這樣十分的辛苦，如果可以直接透過外掛實現，不是更棒嗎？

雖然網路上有很多程式碼高亮(Highlight)的第三方服務，不過有些服務可能只能第一次貼上程式碼，往後並無法修改，或者是服務比較小怕哪邊突然收攤，這些程式碼也會全都不見，不過若是由GitHub提供，我想我們可以放心點，畢竟這個服務目前是眾多人喜歡將自己創作的程式碼丟上去的版本控管系統，有一定的穩定性以及可信度，就連jQuery官方都把所有的專案程式碼丟到上面了，這可是為這個服務打入了一針強心劑。

Gist的好處除了可提供程式碼嵌入外，每一個gist內可以有多個檔案，也就是如果你的教學文章可能有多段的程式碼，可以分成多個檔案在同一個gist，管理上也比較方便，此外也有提供revisions版本控管功能，如果哪天改壞了，還可以看先前的版本還原回去，註冊成為GitHub會員，還可以對程式碼進行討論以及後續維護，若非會員就不能討論留言，而程式碼也沒有revisions功能，只能第一次加入，而且是以匿名使用者儲存這個gist。

第1步  首先來到GitHub Gist網站(如果沒有帳戶，記得申請一個)，接著在頭像旁邊可以輸入中文說明這整個gist程式碼用途。下方可以輸入您的程式碼並點選﹝Create Public Gist﹞即可建立。

GitHub Gist 在部落格、網頁中內嵌入高亮程式碼

第2步  建立完成後，可以看到您的程式碼，左方有個「Embed」的語法，把那個script貼到網站上就可以了。

GitHub Gist 在部落格、網頁中內嵌入高亮程式碼

第3步 嵌入到網站後，就會像這樣囉！

GitHub Gist 在部落格、網頁中內嵌入高亮程式碼

 

Gist 嵌入小技巧

如果你的gist內有多個檔案，想要分開嵌入的話，就是在.js後方加上問號參數，就可以引入gist內的其中一隻檔案，例如我的gist是這隻，其中有「step1.html」和「step2.html」。我想要嵌入第1個檔案，我就使用以下語法就可以囉！