TU的雜七雜八筆記本: SyntaxHighlighter - 在blog上將程式碼加上行號和亮高

SyntaxHighlighter用途就是能夠在blog顯示程式碼，效果如下

SyntaxHighlighter官方網站
'http://alexgorbatchev.com/SyntaxHighlighter'

首先打開範本->編輯HTML

加入：

<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' id='shTheme' 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/shLegacy.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/shBrushCpp.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/shBrushCSS.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/shBrushJScript.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/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/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 type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.ClipboardSwf = 'http://http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

如下：

使用方法如下：

<pre class="brush: 程式語言">
你的程式碼
</pre>
例如
<pre class="brush: cpp">
for ( int i = 1 , m = 0 ; i <= n ; i++ ) {
    x = rand() / (float)RAND_MAX;
    y = rand() / (float)RAND_MAX;
    if ( x*x + y*y <= 1 )
        ++m;
 }//end for

</pre>

效果：

for ( int i = 1 , m = 0 ; i <= n ; i++ ) {
    x = rand() / (float)RAND_MAX;
    y = rand() / (float)RAND_MAX;
    if ( x*x + y*y <= 1 )
        ++m;
 }//end for

需要注意<>要修改成html字元，分別為「<」「>」，其他常用如下：

'http://www.pt.ntu.edu.tw/hmchai/ptcomputer/hHTML/HTMLcontent/HTMLsymbol.htm'

這裏有個網站可以方便轉換（中文字無法轉換，應該是不支援unicode）

'http://www.elliotswan.com/postable'

而程式語言對應的brush在這～

'http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes'

另外可以在範本->自訂->進階->新增CSS，自訂自己想要的樣式，我是使用

body .syntaxhighlighter div{  
    height: 20px !important;
    line-height: 20px !important;
    font-size: 16px !important;
}

其他可以用的選項請上官網查詢

'http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/'

以下是Objective-C的事～

在這裡並沒有Objective-C的brush，所以必須手動新增

首先到這裡下載
Scott Densmore的Objective C Syntax Highlighter Reboot的github中的scripts/shBrushObjc.js

因為javascript需要將javascript寫好的腳本放到網路上，所以使用Google提供的協作平台「Google site」（Google的頁面時常改版，所以可能會有點不同）

左邊「建立」，簡單建立一個平台

建立完成後，上方點選「建立頁面」

範本選擇「檔案櫃」，然後建立

點選上傳檔案，將「shBrushObjc.js」上傳

取得連結後應該為

'https://sites.google.com/site/blogsportqa/js/shBrushObjC.js?attredirects=0&d=1'

請把https修改成http，問號後的參數全部拿掉，修改好後應該如下

'http://sites.google.com/site/blogsportqa/js/shBrushObjC.js'

然後回到範本->編輯HTML

加入

<script src="剛剛取得的網址" type="text/javascript">

應該為

<script src="http://sites.google.com/site/blogsportqa/js/shBrushObjC.js" type="text/javascript">

儲存好後brush為objc，範例

//
//  ijtARP.h
//  Injector
//
//  Created by Qbsuran Alang on 2014/12/7.
//  Copyright (c) 2014年 Qbsuran Alang. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface ijtARP : NSObject

/**
 * 取得所有ARP物件
 * @return ARP地址陣列, 失敗傳回nil
 */
+(NSArray *) getAllARPobject;

/**
 * 增加一筆ARP物件
 * @param IPaddress 要增加的IP地址
 * @param macAddress 要增加的MAC地址
 * @param isStatic 是否要靜態
 * @param isPubished
 * @param isOnly
 * @return 成功傳回0, 失敗時傳回-1
 */
+(int) addARPobject :(NSString *)IPaddress
         macAddress :(NSString *)macAddress
           isStatic :(BOOL) isStatic
        isPublished :(BOOL) isPublished
             isOnly :(BOOL) isOnly;

/**
 * 刪除一筆ARP物件
 * @param IPaddress 要刪除的IP地址
 * @return 成功傳回0, 失敗時傳回-1
 */
+(int) deleteARPobject :(NSString *)IPaddress;

/**
 * 從ARP cahce中搜尋對應IP的MAC地址
 * @param IPaddress 要搜尋的IP地址
 * @return 成功傳回該MAC地址, 失敗或找不到傳回nil
 */
+(NSString *) getMacAddress :(NSString *)IPaddress;

/**
 * 從ARP cahce中搜尋對應MAC的IP地址
 * @param macAddress 要搜尋的MAC地址
 * @return 成功傳回該IP地址, 失敗或找不到傳回nil
 */
+(NSString *) getIPAddress :(NSString *)macAddress;

@end

參考

SyntaxHighlighter: 'http://alexgorbatchev.com/SyntaxHighlighter/'
postable: 'http://www.elliotswan.com/postable/'
特殊字元: 'http://www.pt.ntu.edu.tw/hmchai/ptcomputer/hHTML/HTMLcontent/HTMLsymbol.htm'
使用 SyntaxHighlighter: 'http://yuanfarn.blogspot.tw/2009/10/syntaxhighlighter.html'
美觀 blog 裡的程式碼 (行數 + 語法顏色): 'http://jex.logdown.com/posts/92833-beautiful-blog-code-number-of-lines-syntax-coloring'
在 Blogspot 上安裝 Objective-C 的 Syntax Highlighting: 'http://itouchs.blogspot.tw/2011/11/blogspot-objective-c-syntax.html'
Scott Densmore - Objective C Syntax Highlighter Reboot: 'http://scottdensmore.typepad.com/blog/2011/04/objective-c-syntax-highlighter-reboot.html'

TU的雜七雜八筆記本

2015年1月24日星期六

SyntaxHighlighter - 在blog上將程式碼加上行號和亮高

沒有留言:

張貼留言

2015年1月24日 星期六

SyntaxHighlighter - 在blog上將程式碼加上行號和亮高

沒有留言:

張貼留言

2015年1月24日星期六