Fork me on GitHub

Programming Design Notes

Blogger Install Syntax Highlighter

| Comments

如果你是一位程式員
想在 Blogger  分享自己的作品時連同程式碼一起發佈到 Blogger 上
但程式碼發佈到 Blog 上時發覺可讀性太低
亂成一片
那現在介紹的工貝一定會令你滿意

SyntaxHighlighter

接下來教教大家怎樣在 Blogger 上使用

首先請考慮自己會發佈那種程式語言到 Blog 上
官方包已經包含數十種常見的語言


Brush nameBrush aliasesFile name
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js


如果找不到自己要用的語言?
不用擔心
這裡還有: http://www.undermyhat.org/blog/2009/09/list-of-brushes-syntaxhighligher/


首先我們先加入 SyntaxHighlighter 的核心元件
請到 Layout -> Edit HTML 找出以下標籤

</head>

然後將以下的 HTML 貼在標籤之前

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>

現在在上面的表格選擇你要使用的語言
例如: 你需要使用 C++ 就加上以下的標籤

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script>

Java 則加入以下的 Code

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script>

如果不想太麻煩
可以一次加入所有語言

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script>

選擇 Theme (主題)
只能選擇以下一種

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/> 

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/> 

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/> 

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/> 

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/> 

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/> 

最後加入下的程式碼便完成了

<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

測試方法:
在網誌內輸入
<pre class="brush: js">
alert("Hello World");
</pre>

如果出現以下效果便成功了
alert("Hello World");

相關書籍: Google Blogger For Dummies (For Dummies (Computer/Tech)) Blogger: Beyond the Basics: Customize and promote your blog with original templates, analytics, advertising, and SEO (From Technologies to Solutions) Publishing a Blog with Blogger: Visual QuickProject Guide (2nd Edition)