2016年6月15日

[技術分享] 寫給會在部落格中撰寫程式碼的你 ─ 在網頁中嵌入高亮程式碼上色 (syntax highlighting)


在先前的一篇文章中,我們提到如何[教學] 如何在網頁blogger中插入程式碼,通常我在文章的最後所附上程式範例,就是用利用前一篇文章所說明的方法。

最近,在逛MDN網站的時候,發現他們內嵌程式碼的方式很好看,後來發現其他知名網站像是CSS-TRICKS和Sitepoints也都是套用這一款程式碼高亮的外掛,而且這款外掛有很多不同的樣式可以選擇,還可以加上行號,結果就像下面這樣子:

var person = {
    firstname: 'Jeremy',
    lastname: 'Lin',
    getFullName: function(){
  
        var fullname = this.firstname + ' ' + this.lastname;
        return fullname;

    }
}

這款為網頁程式碼上色的外掛名稱為Prism。使用方式非常簡單,讓我們趕快來看一下吧!

前往Prism看喜歡哪種佈景主題


首先,前往Prism檢視看看你喜歡哪種的佈景主題,點選右邊的佈景主題,目前一共有7種,

挑選你所喜歡的主題

接著將網頁往下拉,你會發現下面範例的程式碼就會產生對應該主題的變化。

網頁下方的範例會根據所選擇的主題產生變化

下載你所喜歡的主題、需要的程式語言與外掛


接著Prism的Download頁面,在網頁的最右上方,這裡你就可以開始客製化你所需要的Prism了。

在這裡我們選擇Minified version讓下載下來的檔案比較精簡,接著選擇你想要的主題:

選擇想要的佈景主題

接著選擇你需要支援或會使用到的程式語言

支援相當多種不同的程式語言

最後選擇你要添加的外掛。在這裡我選擇Line Highlight(可以標註某幾行程式碼)和Line Numbers(可以在程式碼最前面加上行號),其他外掛如果不清楚的話,點進去就有說明了。

提供相當多種不同類型的外掛

最後點選下方的Download JS和Download CSS。


載入下載的CSS和JS檔


一般網站

如果你是自己架設的網站,使用起來非常簡單,只需要把這兩個檔案上傳到你的網站,然後如同第7行和13行把該檔案匯入就可以了。

<!DOCTYPE html>
<html>
<head>
 ...
 
<link href="themes/prism.css" rel="stylesheet" />

</head>
<body>
 ...
 
<script src="prism.js"></script>

</body>
</html>

google blogger

如果你是使用google blogger的話,會稍微麻煩一點點。

JavaScript部分

首先,進入blogger控制區後,選擇左邊的"版面配置",並點選插入小工具:


接著,選擇"HTML/JavaScript"


然後,打開剛剛下載好的JS檔(不是CSS檔喔),可以透過記事本將該檔案打開,接著,全選複製貼上到"內容"中,在來有一個很重要很重要的步驟,在這段程式碼的最上面插入 <script> ,然後在程式碼的最後面插入 </script> ,之後按儲存就可以了。


CSS部分

在來我們要匯入CSS的部分,首先選擇Blogger左邊的"範本",接著點選"編輯HTML"(如果擔心會改錯誤的話,可以先點選右上角的備份鈕進行備份)。


接著看看你的程式碼裡面能不能找到<style type='text/css'>這段,如果有的話,一樣可以利用記事本把剛剛下載的css檔打開,全選,貼在<style type='text/css'>後面,或者貼在</style>的前面(真的找不到的話可以在留言跟我說,因為每一個blogger所套用的佈景主題可能會有些微不同)。最後按下儲存。

到此blogger就匯入剛剛下載的CSS檔和JS檔了。

使用Prism幫程式碼上色


使用的方法很簡單,假設我現在使用的是JavaScript的語言,只需要寫成如下:

<pre><code class='language-javascript line-numbers'>
...
填入程式碼
...
</code></pre>

重點在於使用 <pre><code>標籤把你想要撰寫的程式碼貼在裡面,然後在<code>這個標籤裡面加上相對應的css,如果我使用的是JavaScript語言,那我的css就加上"language-javascript";如果我想要加上行數,那就在css的地方加上"line-numbers",這是很彈性使用的,至於不同的語言或不同的外掛要加上什麼css,可以參考Prism官網最下面Supported Languages和Plugins的地方。

附帶一提的是,如果你的程式碼中包含角括弧<>或其他特殊符號,記得要先透過HTML Encoder進行轉碼再貼上,才不會被編輯器認為你貼上的程式碼是要在網頁裡面執行的內容喔!(關於HTML Encoder的使用,可以參考[教學] 如何在網頁blogger中插入程式碼中的STEP 6)。

0 意見:

張貼留言