1.閱讀不易
2.排版不美觀
感覺就像程式碼直接貼在記事本一樣.
為了讓網頁呈現較易閱讀且美觀的程式碼
我找了SyntaxHighlighter這個小工具來輔助部落格.
使用方式
1.下載程式包:http://alexgorbatchev.com/SyntaxHighlighter/download/
2. 開啟 Blogger進入管理介面→設計→修改HTML，在<head>...</head>中間
插入您所需要的brushes(參考來源第2點)：
<link href="https://官方網址or個人存放空間/shCore.css" rel="stylesheet" type="text/css"></link> <link href="https://官方網址or個人存放空間/shThemeDefault.css" rel="stylesheet" type="text/css"></link> <script src="https://官方網址or個人存放空間/shCore.js" type="text/javascript"></script> <script src="https://官方網址or個人存放空間/shBrushCpp.js" type="text/javascript"></script> <script src="https://官方網址or個人存放空間/shBrushCSharp.js" type="text/javascript"></script> <script src="https://官方網址or個人存放空間/shBrushCss.js" type="text/javascript"></script> <script src="https://官方網址or個人存放空間/shBrushJava.js" type="text/javascript"></script> <script src="https://官方網址or個人存放空間/shBrushJScript.js" type="text/javascript"></script> <script src="https://官方網址or個人存放空間/shBrushSql.js" type="text/javascript"></script> <script src="https://官方網址or個人存放空間/shBrushVb.js" type="text/javascript"></script> <script src="https://官方網址or個人存放空間/shBrushXml.js" type="text/javascript"></script> <script language="javascript"> SyntaxHighlighter.config.bloggerMode=true; SyntaxHighlighter.all(); </script>3.使用<pre></pre>標籤及依您所需的Brushes指定相關class.
<pre class="brush:Brush aliases"><!--code--></pre> EX:javascript <pre class="brush: js"><!--code--></pre> C# <pre class="brush: csharp"><!--code--></pre>
參考來源
2.程式語言對照表:
SyntaxHighlighter uses separate syntax files called brushes to define its highlighting functionality.
SyntaxHighlighter uses separate syntax files called brushes to define its highlighting functionality.
Brush name
|
Brush aliases
|
File name
|
as3, actionscript3
|
shBrushAS3.js
| |
bash, shell
|
shBrushBash.js
| |
cf, coldfusion
|
shBrushColdFusion.js
| |
c-sharp, csharp
|
shBrushCSharp.js
| |
cpp, c
|
shBrushCpp.js
| |
css
|
shBrushCss.js
| |
delphi, pas, pascal
|
shBrushDelphi.js
| |
diff, patch
|
shBrushDiff.js
| |
erl, erlang
|
shBrushErlang.js
| |
groovy
|
shBrushGroovy.js
| |
js, jscript, javascript
|
shBrushJScript.js
| |
java
|
shBrushJava.js
| |
jfx, javafx
|
shBrushJavaFX.js
| |
perl, pl
|
shBrushPerl.js
| |
php
|
shBrushPhp.js
| |
plain, text
|
shBrushPlain.js
| |
ps, powershell
|
shBrushPowerShell.js
| |
py, python
|
shBrushPython.js
| |
rails, ror, ruby
|
shBrushRuby.js
| |
scala
|
shBrushScala.js
| |
sql
|
shBrushSql.js
| |
vb, vbnet
|
shBrushVb.js
| |
xml, xhtml, xslt, html, xhtml
|
shBrushXml.js
|
