2013年11月27日 星期三

GitHub Gist 嵌入高亮程式碼在網頁中

GitHub Gist 可以讓你輸入程式碼片段或完整程式碼,透過 JavaScript 嵌入到網頁中,除了有漂亮的編排外,還可以有程式碼高亮的功能,可讓程式碼、原始碼教學網變的更好展示。

Gist 的好處除了提供嵌入網頁外,每個 Gist 還可有多個檔案,如果教學文章有多段程式碼,可管理在同一個 Gist ,也有提供版本控管功能(針對已註冊會員)可做修訂。


 Gist 操作 
Step 1:先到 GitHub Gist ,在頭像旁輸入說明程式碼用途,在下方輸入你的程式碼後,點選 Create Public Gist建立檔案。


Step 2:建立檔案後可看到你的程式碼,左方有個「Embed」的語法,可複製到網站上。

Step 3:嵌入結果。 



 Gist 嵌入小技巧 
如果你的Gist內有多個檔案,想要分別嵌入檔案,可以在.js後面加上問號參數及檔名,就可以使用那一隻檔案,例如gist範例中有「HelloWorld.py」和「HelloWorld.html」。要嵌入「HelloWorld.py」的檔案請參考以下語法!