Gist的程式碼內嵌到Google的Blogger

以往要Blogger分享程式碼,一種是自己寫一些taglib或是css,不然就是到某些線上服務的網站進行一次性轉碼。

第一種方式往往比較不能根據不同語言呈現語法的效果,第二種則是程式碼維護不方便。GitHub上提供了一個不錯的線上服務Gist,一個針對程式碼所設計的平台,不但能夠在貼上程式碼後立即產生分享鏈結,還能依照不同的程式語言來加入高亮(Highlight)效果,讓使用者更易閱讀。

Gist也有提供程式碼內嵌的服務,讓你可以把程式碼嵌在你的網頁中,它提供的內嵌語法如下:

<script src="https://gist.github.com/become/4978229.js"></script>

但是這段程式碼貼到Blogger卻無法顯示,查了一下,可以這樣做

在編輯文章時透過HTML編輯器,在文章內加上以下語法

<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>

然後再你要放程式碼的地方加上

<div class="gistLoad" data-id="GistID" id="gist-GistID">Loading ....</div>

然後把GistID換成你程式碼的ID即可

發表迴響

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