【Blogger】在 Blogger 文章中顯示程式碼 - SyntaxHighlighter

  因為要開始把自己練習的程式碼用Blogger的方式呈現出來,所以要程式碼分享給大家,GitHub雖然很方便,但是若只有短短的幾行程式碼,發布到GitHub似乎有點勞師動眾,如果只是將程式碼複製貼上Blogger,好像也不怎麼美觀,之前常常在別人的文章中看到,特別將程式碼用一個框架包起來,裡面還很貼心的有行數,這樣程式碼看起來就方便易懂,而且也美觀多了。
  在找尋如何顯示程式碼的方法中,很多人都推薦使用SyntaxHighlighter來顯示程式碼,
下列就開始教學如何設定顯示:
1.進入Blogger後台>選擇"範本"頁面>點選"編輯HTML"
2.然後將下列程式碼,放到<head> …… </head>之中

     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    

如果程式碼出現錯誤,在<link>標籤裡的最後面補上"/",如下:
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"/>
3.然後點選"儲存範本"後離開
4.在編輯文章時以下列二種方式(擇一)插入程式碼即可 
(4-1) 使用 Script 標籤
<script type="syntaxhighlighter" class="brush: csharp">
<![CDATA[
要顯示的程式碼
]]></script>
(4-2) 使用 Pre 標籤
<pre class="brush: csharp">
要顯示的程式碼
</pre>

1 則留言:

  1. 看完您的文章設定成功
    感謝您,說明的簡單又詳細^^

    回覆刪除