2016年3月9日 星期三

如何在Blogger插入程式碼?

好吧~我承認有點後知後覺....
這其實不是一個時麼很新穎的功能
只是做為一個學習筆記而已

沒人在看的部落格不囉嗦~
直接上教學!

我們需要再Blogger上安裝一個外掛

SyntaxHighlighter

官網:http://alexgorbatchev.com/SyntaxHighlighter/
下載頁面:http://alexgorbatchev.com/SyntaxHighlighter/download/
(不過這裡我不想下載....直接掛!)

Step 1

登入Blogger後台,進入控制版面的「範本」設定,點擊「網誌即時狀態」的「HTML編輯」。

Step 2

把以下程式碼放在<head>標籤裡,也就是</head>之前任一位置,最後點選「儲存範本」。
<!-- 程式碼高亮SyntaxHighlighter開始 -->

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
  
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true; //開啟Blogger的模式
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.defaults['toolbar']=false; //隱藏問號按鈕,建議隱藏,否則可能會產生bug。
SyntaxHighlighter.defaults['class-name']='highlightsetting'; //自定義CSS設置開放
SyntaxHighlighter.defaults['auto-links']=false; //讓超連結顯示為普通文字
SyntaxHighlighter.config.space=' '; //修復Google Chrome複製程式碼時變成空白的bug
SyntaxHighlighter.config.stripBrs=false; //忽略Blogger的標籤
SyntaxHighlighter.all();
</script>
<style>
.highlightsetting {
    overflow-y: hidden !important; /*修正右側滾動條的bug*/
     
}
.syntaxhighlighter table td.gutter .line, .syntaxhighlighter table td.code .line {
    padding: 0 13px !important; /*修正行號距離*/
}
</style>

<!-- 程式碼高亮SyntaxHighlighter結束 -->

我自己是再加上了一行,選擇了喜歡的RDark樣式

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='Stylesheet' type='text/css'/>
基本上到這裡就算裝好外掛了!

使用方式

使用<pre>標籤包覆程式碼範例如下:
<pre name="code" class="brush: html" >
程式碼
</pre>
class部分可以用brush定義程式碼種類,種類代碼可參考官網說明

PS.其實使用之後會遇到一個換行問題
所幸有人研究出解決方式:http://edi.wang/post/2012/9/12/jquery-fix-line-wrap-in-SyntaxHighlighter-v3
但....我不會用~XD

沒有留言:

張貼留言