GitHub Gist 程式碼剪貼簿及崁入式語法框服務

GitHub Gist 崁入式語法框

大家在介紹網站或填寫部分教學文時,有可能會遇到某些需要給讀者複製語法的地方,以往我會畫一個表格或一個Blockquote區域給讀者複製語法,或透過外掛放置高亮程式碼剪貼Bar,可是這麼做對部落客而言會造成後續的維護困難,前者表格或利用語法劃一區可能會因為模板變更或瀏覽裝置不同而變得不合時宜(尤其手機瀏覽)可能造成跑版、後者外掛程式則必須配合外掛的語法操作(操作不易),而且萬一外掛程式的作者停止維護,則必須尋找替代的高亮程式碼外掛,所有文章的高亮程式碼都得重做一次,對讀者而言,用HTML劃一區語法列,功能可能不像外面複製語法框那麼方便,沒有行數的框框也比較沒有第三方外掛那麼漂亮就是了

現在GitHub這個推廣開放原始碼服務的廠商提供了GitHub Gist這個服務,部落客可以用這個服務產生Gist語法剪貼簿,並透過Gist所提供的javascript,將語法剪貼簿貼在自己的Blog,讓不懂程式碼的讀者可以直接複製這個語法框內的語法

什麼是GitHub

雖然這文章主要不是講解GitHub這服務的詳細功能,不過為了讓觀眾了解這個服務是什麼 ? 所以我還是寫了這一章節來簡單介紹GitHub,不過本次不會用到GitHub的版本控制服務,不會Git的讀者也不用傷腦經,本章節只會簡單帶到原理,不會詳細說明如何使用GitHub,這樣就不會嚇跑大家啦 ! 

 

GitHub 首頁

Github 首頁

網站名稱:GitHub
網址:https://github.com/

Github是一個推廣開放原始碼的服務,具有版本控制功能,簡單來說這個服務是提供給程式設計師上傳程式碼,同時也能追蹤程式碼的紀錄,萬一更新錯誤也能回朔到上一個版本的服務,另外因為這個服務是提供給開放原始碼用的,所以在這裡的任何程式碼都是公開的,所有人都能看到你的程式碼,如果想儲存私人的程式碼則必須付費自己蓋一個 (利用Gitlab,可以自己架設一個類似於Github的程式碼託管服務,不過我沒試過,有興趣可以自己搜尋)

 

Github 的原理

GitHub 原理

程式設計師(或工程師)將程式寫到一個段落,將程式檔儲存檔案之後,可以透過GitHub on Windows或Git指令碼工具,填寫自己這次程式編輯的功能後,按下Commit (提交) 儲存變更,並透過Sync將程式碼同步到GitHub上,每一個專案以不同的 Repositories (簡稱Repo 或倉庫) 專案倉庫來管理,程式設計師可以到 GitHub 找到自己的專案倉庫 ,專案倉庫可以下載程式碼原始碼、查詢Commit紀錄,並比對程式碼變更了什麼功能等等

因為以上這麼多複雜且功能強大的功能,所以許多程式設計師會將自己的程式作品放到GitHub上,在這個平台也有許多程式作品供大家瀏覽,GitHub是目前是全世界最大的程式碼資源存放網站

 

本次介紹的GitHub Gist是GitHub旗下的一款服務,可以提供簡易的程式碼剪貼簿服務,就算聽不懂版本控制及上面這些原理的部落客也能利用GitHub上的工具簡易的編寫並推廣程式碼相關應用,下一章將介紹GitHub Gist的使用方式,那就繼續往下看吧 ! 

 

GitHub Gist 使用說明

 

1. 進入 GitHub Gist 並申請或登入 GitHub 帳號

GitHub Gist 首頁

網址:https://gist.github.com/

注意:本服務需申請帳號,未申請帳號的使用者預設為Anonymous (匿名),所以只有基本的程式碼剪貼簿功能,無法修改程式碼,如果需要保留程式碼的使用者,可以申請GitHub帳號

首先先進入GitHub Gist這個網站,這裡的介面有點類似 Plurk paste ,你可以以匿名的方式貼上程式碼,不過如果你希望日後能夠修改編輯這些程式碼,則必須申請或登入GitHub帳號,按下右上角的 Sign up for a GitHub account 就能申請帳號了,如果你曾經用過GitHub的話,也能直接按下Sign in來登入帳號,登入後,所有在這裡張貼的程式碼都會保留到你的GitHub帳號當中

 

2. 找到你想貼的程式碼並複製下來

Blog語法範例 - 複製對應的原始碼

我以我的Blog常出現的”軟體小檔案”作為示範,這一個段落是用HTML及CSS畫出來的,而我如果要提供HTML的話,必須找到這篇文章出現”軟體小檔案”片段的區域,再進入文章編輯介面,開啟”原始碼”,用瀏覽器的搜尋功能(通常是快速鍵Ctrl+F),搜尋到對應的HTML原始碼並複製下來,建議可以另外貼到記事本或Notepad++,可以預防程式碼消失不見

這一段雖然是HTML,不過如果你今天想提供的是CSS修改片段也是一樣的方法,找到CSS中對應的Class標籤,再將那一個段落的CSS標籤複製出來,javascript小工具或其他語言也是一樣的做法,在這裡就不用一一說明了

總之請將程式碼複製下來,並進入下一步建立程式碼剪貼簿

 

3. 將語法貼到 GitHub Gist 並建立 gist

GitHub Gist 建立程式碼剪貼框

登入後再進來GitHub Gist,就可以看到這個畫面:

  1. 這一欄可以填寫程式碼用途說明,如同專案一樣可以放置好幾個gist程式碼,如果你每篇教學有好幾個程式碼bar需要展示,會方便一些
  2. 檔案名稱,輸入檔案名稱,讓GitHub可以辨識你的程式是哪一種程式語言(例如XXXXX.html或OOO.css),如果空白則以 .txt 純文字方式儲存
  3. 縮排設定,為了讓你展示出來的程式更容易被看懂,建議設定縮排,如果你將來想修改程式碼,縮排之後會方便一些(維護方便性)
  4. 將你剛才從第三步複製而來的程式碼貼上來,建議做一些簡單的排版,類似上面這樣
  5. 建立gist,你可以選擇按下Create secret gist建立私人gist或按下Create public gist建立公共展示框,Secret gist只有你看得到程式碼、Public gist 則是大家都能看得到這個程式碼
  6. 建立之後,透過gist所建立的程式碼會儲存到你的帳號當中,並供你後續修改或轉貼

 

4. 開啟你剛才建立的Gist頁面,並複製此gist的崁入語法

GitHub Gist 軟體小檔案

你可以在第一個紅框編輯這個gist的程式碼,如果不滿意也能按下Delete刪除此gist,不過整個gist就得重做就是了,要複製這個gist可以複製第二個紅框,Embed這個欄位,這個javascript包含了左邊這一整個gist語法剪貼簿

 

5. 貼上你的Gist程式碼崁入框

效果就像上面這個一樣,具有行數的Gist程式崁入框,可以讓讀者複製這個程式碼,如果指定是程式語言的話,程式碼的部分字元也會顯示顏色,讀程式碼可以更方便 ! 

 

6. 如果你想找到你的gist的話?

GitHub Gist 你的gist頁面

GitHub gist個人頁面網址:https://gist.github.com/<你的GitHub帳號>

如果你想找到你其他的gist或將來想要修改你的gist,可以在登入GitHub帳號並進入GitHub Gist,從主畫面選擇See all of your gists,或者複製上面gist個人頁面網址,只要把將<>取代成你的GitHub就能進到畫面中這個頁面,點選其中一個gist後,按照上一步(第四步)去修改程式碼

 

感想

這個服務我之前有看過,可是一直沒有時間及機會介紹這個服務,現在因為要配合Blog即將變更模板的因素,所以乘著這個機會介紹GitHub Gist這個服務,雖然是簡單的服務,不過這個服務不需要綁外掛,操作及貼上也算簡單,這個剪貼簿的效果也算漂亮且功能齊全,值得推薦給大家使用

今天這篇文章就介紹到這裡為止囉 ! 謝謝大家閱讀本文張,我們下次再見 ! 

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料