2012/05/07

20120507-置頂-Blogger插入程式碼之寫法

加入Blogger 插入程式碼之syntaxhighlighter 工具，
讓我的Blogger 寫程式時有 顏色標記。


參考文：
官網：http://alexgorbatchev.com/SyntaxHighlighter/
http://www.inote.tw/2009/02/blogger.html
http://dnowba.blogspot.com/2010/05/blogger.html



【HTML Encode】--若有 "<>"此類符號轉換工具
http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx
& lt;
& gt;

【程式碼區塊建立】
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
[JS]：<pre class="brush:js;">程式碼區塊</pre>
[CSS]：<pre class="brush:css">程式碼區塊</pre>
[HTML/XML]：<pre class="brush:html">程式碼區塊</pre>
[C#]：<pre class="brush:csharp">程式碼區塊</pre>



=====================================
建立歷程：
=====================================
1. 於Blogger樣版區加入：
<link type="text/css" rel="stylesheet" href="yoursite/shCore.css"/>
<link type="text/css" rel="stylesheet" href="yoursite/shThemeDefault.css" id="shTheme"/>
<link href='yoursite/shCoreDefault.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="yoursite/shBrushBash.js"></script>
<script type="text/javascript" src="yoursite/shCore.js"></script>
<script type="text/javascript" src="yoursite/shBrushBash.js"></script>
<script type="text/javascript" src="yoursite/shBrushCpp.js"></script>
<script type="text/javascript" src="yoursite/shBrushCSharp.js"></script>
<script type="text/javascript" src="yoursite/shBrushCss.js"></script>
<script type="text/javascript" src="yoursite/shBrushDelphi.js"></script>
<script type="text/javascript" src="yoursite/shBrushDiff.js"></script>
<script type="text/javascript" src="yoursite/shBrushGroovy.js"></script>
<script type="text/javascript" src="yoursite/shBrushJava.js"></script>
<script type="text/javascript" src="yoursite/shBrushJScript.js"></script>
<script type="text/javascript" src="yoursite/shBrushPhp.js"></script>
<script type="text/javascript" src="yoursite/shBrushPlain.js"></script>
<script type="text/javascript" src="yoursite/shBrushPython.js"></script>
<script type="text/javascript" src="yoursite/shBrushRuby.js"></script>
<script type="text/javascript" src="yoursite/shBrushScala.js"></script>
<script type="text/javascript" src="yoursite/shBrushSql.js"></script>
<script type="text/javascript" src="yoursite/shBrushVb.js"></script>
<script type="text/javascript" src="yoursite/shBrushXml.js"></script>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

註1：樣式shThemeDefault.css 參考：http://alexgorbatchev.com/SyntaxHighlighter/manual/themes
有各式樣式。
此網站選用：shThemeEmacs.css
註2：yoursite
檔案空間：官網空間介紹：http://alexgorbatchev.com/SyntaxHighlighter/hosting.html
css空間用官網的：http://alexgorbatchev.com/pub/sh/current/styles/shCore.css
JS空間用自已的空間。
註3：官網的版本用current代表目前
http://alexgorbatchev.com/pub/sh/2.1.382/
http://alexgorbatchev.com/pub/sh/current/
/styles
/scripts


2. 於Blogger寫，將程式包於<pre class="brush:XXX;">程式碼區塊</pre>
(有 < > 標記的 都要做轉換編碼的動作)


範例：JavaScript
function helloSyntaxHighlighter()
{
 return "hi!";
}
範例：CSS 
html, body { width: 100%; height: 100%; padding: 0px; margin: 0px; text-align: center; background-color: #ebebeb !important; color: #666; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background: url(../images/bg_top.jpg) top center no-repeat; }
#calc1Val, #invSlide1Val { color: #799a22; }
#calc2Val, #invSlide2Val { color: #1d7acb; }
#calc3Val, #invSlide3Val { color: #ff8d30; }
範例：HTML 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Hello SyntaxHighlighter</title>

</head>

<body style="background: white; font-family: Helvetica">

</body>
</html>
張貼者： hougii 於 中午12:41
標籤： ,

0 意見 :

張貼留言

訂閱： 張貼留言 ( Atom )