[工具]Blogger如何用Syntaxhighlighter來將程式碼著色
相信是程式設計師在寫有關coding分享文章時會為了程式碼的著色感到相當困擾
因為我們都知道，程式碼在閱讀的時候，最希望的就是將程式碼上色，讓程式碼的可讀性可以更高，所以網路上就有提供一個開發工具，可以讓我們在寫文章的時候，
也能將程式碼方便著色!
這項開發工具是 Syntaxhighlighter 3.0.83 官方網站連結
在網路上有許多人分享過此類的文章
但我搜尋找了好久才找到成功安裝的範例~相當苦惱呢
我的主要參考資料是這位部落客寫的 --> 參考資料按此連結
寫得很完整，我也來分享我這兩天找尋資料的一些心得
只要跟著步驟做，你也能安裝成功!
執行流程:
下載Syntaxhighlighter所提供的js檔案跟css檔，用上傳檔案的方式來連結路徑
或是直接用網站提供的官方路徑(不須下載檔案)
來編輯到自己部落格的HTML，編輯成功後即可使用
這邊主要介紹的是用官方路徑的設定方式
<Step 1>
進入官網-->點選右邊最下角有個"Hosting"
進入Hosting網頁，會看到最下面的有一個 "So what do you need to do"
這邊就是教你要在編輯HTML時輸入些甚麼
以google的blogger為例
點選"範本"-->"編輯HTML"
<Step 4>
在<body></body>標頭檔之外
插入在<Step 2>所提供的程式碼
在寫的時候，如果需要其他程式語言的套用格式，可以再去官網頁面查詢替換
載入相對應的js檔案
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/想要插入的語言.js" type="text/javascript"></script>
儲存成功後，基本上已經設定完成
<Step 5>
撰寫程式的時候 (以javascript為例)
範例: 例如要show一個Hello World
在編輯文章點選"HTML"來編輯
記得用<pre class="brush: 程式語言">張貼的程式語言程式碼</pre>
System.out.println("Hello World");
寫進去後，當別人在閱覽你的文章
就會呈現這樣
System.out.println("Hello World");
所以你們說，Syntaxhighlighter是不是一個很方便的工具呢!!
<附件>
官方brushes連結
| Brush name | Brush aliases | File name |
| ActionScript3 | as3, actionscript3 | shBrushAS3.js |
| Bash/shell | bash, shell | shBrushBash.js |
| ColdFusion | cf, coldfusion | shBrushColdFusion.js |
| C# | c-sharp, csharp | shBrushCSharp.js |
| C++ | cpp, c | shBrushCpp.js |
| CSS | css | shBrushCss.js |
| Delphi | delphi, pas, pascal | shBrushDiff.js |
| Diff | diff, patch | shBrushBash.js |
| Groovy | groovy | shBrushGroovy.js |
| JavaScript | js, jscript,javascript | shBrushJScript.js |
| Java | java | shBrushJavaFX.js |
| Perl | perl, pl | shBrushPerl.js |
| PHP | php | shBrushPhp.js |
| Plain | Text plain,text | shBrushPlain.js |
| PowerShell | ps, powershell | shBrushPowerShell.js |
| Python | py, python | shBrushPython.js |
| Ruby | rails, ror, ruby | shBrushRuby.js |
| Scala | scala | shBrushScala.js |
| SQL | sql | shBrushSql.js |
| Visual Basic | vb, vbnet | shBrushVb.js |
| XML | xml, xhtml, xslt, html, xhtml | shBrushXml.js |
0 意見:
張貼留言