FC2ブログ

SyntaxHighlighter(3.0.83)を適用しました(1)

ここでは、「SyntaxHighlighter(3.0.83)を適用しました(1)」 に関する記事を紹介しています。
先週、SyntaxHighlighter 3.0.83をブログ(FC2)に取り入れました。
忘れないように何をしたかメモっておきます。

1.以下のサイトからSyntaxHighlighterをダウンロード
http://alexgorbatchev.com/SyntaxHighlighter/download/

2.以下のファイル(使いたいSyntax、Themeのファイル)をブログのサーバーにアップロード
 (1)scriptsフォルダ
  ・shCore.js
  ・shAutoloader.js
  ・shBrushBash.js
  ・shBrushCSharp.js
  ・shBrushJScript.js
  ・shBrushPowerShell.js
  ・shBrushSql.js
  ・shBrushXml.js
 (2)scriptsフォルダ
  ・shCore.css
  ・shCoreDefault.css

3.head要素の中に下記の内容を埋め込む
<script type="text/javascript" src="http://nantoka.com/scripts/shCore.js"></script>
<script type="text/javascript" src="http://nantoka.com/scripts/shAutoloader.js"></script>
 
<link href="http://nantoka.com/scripts/shCore.css" rel="stylesheet" type="text/css" />
<link href="http://nantoka.com/scripts/shCoreDefault.css" rel="stylesheet" type="text/css" />
ここではshCore.jsとshAutoloader.js以外のjsファイルは読み込んでいません。
その他のjsファイルは、shAutoloader.jsによって必要に応じて動的に読み込むようにしています。

4.body要素の最後に下記の内容を埋め込む
<script type="text/javascript"> 
function path() 
{ 
 var args = arguments, 
     result = [] 
     ; 
      
 for(var i = 0; i < args.length; i++) 
     result.push(args[i].replace('@', 'http://nantoka.com/scripts/')); 
      
 return result 
}; 

SyntaxHighlighter.autoloader.apply(null, path( 
 'bash shell             @shBrushBash.js', 
 'c# c-sharp csharp      @shBrushCSharp.js', 
 'css                    @shBrushCss.js', 
 'js jscript javascript  @shBrushJScript.js', 
 'sql                    @shBrushSql.js', 
 'ps powershell           @shBrushPowerShell.js', 
 'xml xhtml xslt html    @shBrushXml.js' 
)); 
SyntaxHighlighter.all(); 
</script>
上記のように記述することで、動的にjsファイルを読み込みます。

5.ブログの記事にソースコードを埋め込む
<pre class="brush: js;"> 
    // ここにソースコードを埋め込む
</pre>
6.その他注意点
(1)pre要素の中で以下の文字を使っているとうまく表示されません。
  <, >, &, ", '
  それぞれ&lt;, &gt;, &amp;, &quot;, &#039; と書く必要があります。
  これがとても面倒くさかったのですが、preタグ・メーカー というサイトでHTMLエンコードすることができます。
  すごくありがたいです。
(2)fc2ブログでは、「記事の設定」-「改行の扱い」を「HTMLタグのみ」に設定していないと
 ソースコードが改行されない状態で表示されてしまいます。

上記の2点で苦戦しましたが、下記のブログのおかげで解決することができました。

 Linux愛好者の独り言「SyntaxHighlighter 3.0を使いこなす

五月雨へちまさん、ありがとうございます。
関連記事
スポンサーサイト
コメント
この記事へのコメント
あんどんくん様。

参考サイトの五月雨へちまです。
以前は,BLOGにコメントをいただき有難うございました。

この度,SyntaxHighlighterについてさらに調べてみたところ,
自動改行を有効にした状態で,<や>などの置換を行うことなく綺麗にソースコードを表示できる方法を見つけました。

下記のアドレスにまとめましたので,よろしければご覧ください。
http://samidarehetima.blog9.fc2.com/blog-entry-93.html
2010/10/18(月) 19:53 | URL | 五月雨へちま #VHFlUDf2[ 編集]
コメントありがとうございます。
また、わざわざ情報提供までして頂いてありがとうございました。

bloggerMode早速試してみたいと思います。
2010/10/19(火) 23:26 | URL | あんどんくん #-[ 編集]
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://andonkun.blog15.fc2.com/tb.php/143-260cdd99
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック
SyntaxHighlighterを入れました。 私はPrettifyよりSyntaxHighlighterの方が好きです。 andonkun's noteさんの『SyntaxHighlighter(3.0.83)を適用しました』がとても参考になりました。 ダウンロー...
2011/06/29(水) | わたやみープログラマー
ブログ記事内のコードをハイライトするSyntaxHighlighterを入れました。 私はPrettifyよりSyntaxHighlighterの方が好きです。 andonkun's noteさんの『SyntaxHighlighter(3.0.83)を適用しました』がとて...
2011/06/30(木) | わたやみープログラマー