2016年3月9日 星期三

如何在Blogger插入程式碼？

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

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

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

SyntaxHighlighter

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

好像有更新：
http://sharedderrick.blogspot.com/2010/10/google-blogger-syntaxhighlighter-3083.html

我自己使用的代碼為：
<!-- 設定載入 shCore.css 與  shThemeDefault.css -->
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet">
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='Stylesheet' type='text/css'/><!--帥氣的RDark樣式-->

<!-- 設定需要載入的核心檔案 shCore.js -->
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>

<!-- 設定需要載入的程式語言檔案  -->
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
    SyntaxHighlighter.all();
// ]]></script>

<!-- 設定 highlighter -->
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;<!-- 啟用Blogger模式 -->
SyntaxHighlighter.defaults['smart-tabs'] = false;<!-- 工具列，只是個問號還是關了吧！ -->
SyntaxHighlighter.defaults['html-script'] = true;<!-- html&script混合模式 -->

SyntaxHighlighter.all()
</script>
另外可能需要用到的語法轉換工具：http://accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php

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
張貼者： 於
標籤： , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)