スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

SyntaxHighlighter2.1.364:ソースコードを綺麗に表示するJS 個人的な設定メモ

SyntaxHighlighter2.1.364:ソースコードを綺麗に表示するJS 個人的な設定メモ
環境:FC2ブログ(ここ)
先日書いたSyntaxHighlighter1.5.1の記事の続き。

SyntaxHighlighter:Download - Alex Gorbatchev」を確認したところ、2010年6月2日時点でEnglish版のVer:2.1.364があったので入れ替えてみる。

「syntaxhighlighter_2.1.364.zip」をDLした後、解凍。
展開後のファイル一覧


メモ
・shLegacy.js:1.5互換用スクリプト。SyntaxHighlighter.HighlightAll を使用する場合も必要。

今回、使用するファイル

※ shBrushXXX.jsは必要なものだけでよいが、とりあえず全部入れる。

昔のSyntaxHighlighterのファイルを削除。
削除方法はファイルアップロードを行った画面から①か②で実施。
ファイル削除

使用するファイルを全てアップロード。
アップロード方法は前回の記事参照。

○アップロードされたファイルのURL
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/clipboard.swf
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushAS3.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushBash.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushCSharp.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushColdFusion.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushCpp.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushCss.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushDelphi.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushDiff.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushErlang.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushGroovy.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushJScript.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushJava.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushJavaFX.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushPerl.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushPhp.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushPlain.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushPowerShell.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushPython.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushRuby.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushScala.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushSql.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushVb.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushXml.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shCore.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shLegacy.js
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/help.png
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/magnifier.png
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/page_white_code.png
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/page_white_copy.png
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/printer.png
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shCore.css
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shThemeDefault.css
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shThemeDjango.css
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shThemeEclipse.css
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shThemeEmacs.css
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shThemeFadeToGrey.css
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shThemeMidnight.css
  • http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shThemeRDark.css


次にテンプレートの修正。
テンプレート方法は前回の記事参照。

前回追記した部分を削除し、新たな記述を行う。
今回は、<%topentry_more> の直後に記述することにした。

shBrushXXX.jsの読み込み
<script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shCore.js"></script>  
<script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shLegacy.js"></script>  
<!-- shBrushXXX.jsは必要に応じてコメントアウトを解除すること。 -->
<script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushCSharp.js"></script>  
<script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushCpp.js"></script>  
<script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushCss.js"></script>  
<script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushJScript.js"></script>  
<script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushJava.js"></script>  
<script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushJavaFX.js"></script>  
<script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushPhp.js"></script>  
<script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushSql.js"></script>  
<script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushVb.js"></script>  
<script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushXml.js"></script>  
<!-- <script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushAS3.js"></script>        -->
<!-- <script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushBash.js"></script>       -->
<!-- <script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushColdFusion.js"></script> --> 
<!-- <script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushDelphi.js"></script>     -->
<!-- <script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushDiff.js"></script>       -->
<!-- <script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushErlang.js"></script>     -->
<!-- <script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushGroovy.js"></script>     -->
<!-- <script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushPerl.js"></script>       -->
<!-- <script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushPlain.js"></script>      -->
<!-- <script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushPowerShell.js"></script> --> 
<!-- <script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushPython.js"></script>     -->
<!-- <script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushRuby.js"></script>       -->
<!-- <script type="text/javascript" src="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shBrushScala.js"></script>      -->
shThemeXXX.cssの読み込み
<!-- shThemeXXX.cssは必要に応じてコメントアウトを解除すること。 -->
<link type="text/css" rel="stylesheet" href="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shThemeDefault.css"/>
<!-- <link type="text/css" rel="stylesheet" href="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shThemeDjango.css"/>     -->
<!-- <link type="text/css" rel="stylesheet" href="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shThemeEclipse.css"/>    -->
<!-- <link type="text/css" rel="stylesheet" href="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shThemeEmacs.css"/>      -->
<!-- <link type="text/css" rel="stylesheet" href="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shThemeFadeToGrey.css"/> -->
<!-- <link type="text/css" rel="stylesheet" href="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shThemeMidnight.css"/>   -->
<!-- <link type="text/css" rel="stylesheet" href="http://blog-imgs-45.fc2.com/y/a/s/yasu0120/shThemeRDark.css"/>      -->
SyntaxHighlighterの定義
<script type="text/javascript">  
// クリップボードにコピーするために設定する。設定しないとクリップボードにコピーができない。
SyntaxHighlighter.config.clipboardSwf = 'http://blog-imgs-45.fc2.com/y/a/s/yasu0120/clipboard.swf';  

// ToolTipメッセージ編集 
SyntaxHighlighter.config.strings.viewSource = 
 '\u30D7\u30EC\u30FC\u30F3\u30C6\u30AD\u30B9\u30C8\u3067\u8868\u793A';  //プレーンテキストで表示
SyntaxHighlighter.config.strings.copyToClipboard = 
 '\u30AF\u30EA\u30C3\u30D7\u30DC\u30FC\u30C9\u306B\u30B3\u30D4\u30FC';  //クリップボードにコピー  
SyntaxHighlighter.config.strings.copyToClipboardConfirmation =  
 '\u5185\u5BB9\u3092\u30AF\u30EA\u30C3\u30D7\u30DC\u30FC\u30C9\u306B\u30B3\u30D4\u30FC\u3057\u307E\u3057\u305F';  //内容をクリップボードにコピーしました
SyntaxHighlighter.config.strings.expandSource = 
 '+ \u30BD\u30FC\u30B9\u3092\u5C55\u958B';   //+ ソースを展開
SyntaxHighlighter.config.strings.print = 
 '\u5370\u5237';   //印刷
SyntaxHighlighter.config.strings.help = 
 '\u30D0\u30FC\u30B8\u30E7\u30F3\u60C5\u5831';  //バージョン情報 
 
//ソースコード中にリンクがあってもクリックできないようにする。
SyntaxHighlighter.defaults['auto-links'] = false;  
</script>  
CSSの定義
<!-- monospaceで等幅フォントにし、!importantを用いてスタイルを優先させる。 -->
<style type="text/css">  
.syntaxhighlighter div,.syntaxhighlighter span,.syntaxhighlighter code {  
    font-size:12px!important;   
    font-family: "MS ゴシック", monospace!important;  
}  
  
実行
<!-- SyntaxHighlighter.all()はhead部に記述するだけですべての対象部分を変換するが、
 ページをすべて読み込みが終わるまでは表示されないというタイムラグが発生する。
 それを解消するために SyntaxHighlighter.HighlightAll を使用する。            -->
<script class="brush:javascript;gutter:false">  
  dp.SyntaxHighlighter.HighlightAll('code');  
</script> 


とりあえずここまでを導入部分としておく。
使用方法等については別途記述予定。

コメントの投稿

非公開コメント

Flashカレンダー
FC2カウンター
最新記事
カテゴリ
ユーザータグ

設定 文字コード HTML 用語 JavaScript 特殊文字 SyntaxHighlighter MySQL Add-ons CSS Firefox Wordpress 

検索フォーム
RSSリンクの表示
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。