FC2ブログ

SyntaxHighlighterを使ったソース表示

SyntaxHighlighterを使ってソースをきれに表示する方法をやってみました。
直前の記事はこれを使って表示してみました。

これは備忘録です。

まず
http://alexgorbatchev.com/SyntaxHighlighter/
から最新版をダウンロードして、解凍する。
この記事を書いた時点ではバージョンは3.0.83なので
今後バージョンがかわると、方法も変わるかもしれないので注意。

FC2の管理画面の、ツールのファイルアップロードで
styles/shCore.css
をアップロードする。

つづいて
scripts/shCore.js
と、使いそうな言語のscript/shBrushXXX.js
をいくつかアップロードする。

次にテンプレートの設定画面からHTMLを編集する。
HTMLはheadの中に
<link href="http://blog-imgs-56.fc2.com/c/h/a/chattera/shCoreDefault.css" type="text/css" rel="stylesheet">

を記述し
bodyの中に
<script type="text/javascript" src="http://blog-imgs-56.fc2.com/c/h/a/chattera/shCore.js"></script>
<script type="text/javascript" src="http://blog-imgs-56.fc2.com/c/h/a/chattera/shBrushPhp.js"></script>
<script type="text/javascript" src="http://blog-imgs-56.fc2.com/c/h/a/chattera/shBrushXml.js"></script>
<script type="text/javascript" src="http://blog-imgs-56.fc2.com/c/h/a/chattera/shBrushSql.js"></script>
<script type="text/javascript" src="http://blog-imgs-56.fc2.com/c/h/a/chattera/shBrushPerl.js"></script>
<script type="text/javascript" src="http://blog-imgs-56.fc2.com/c/h/a/chattera/shBrushJScript.js"></script>
<script type="text/javascript" src="http://blog-imgs-56.fc2.com/c/h/a/chattera/shBrushJava.js"></script>
<script type="text/javascript" src="http://blog-imgs-56.fc2.com/c/h/a/chattera/shBrushCss.js"></script>
<script type="text/javascript" src="http://blog-imgs-56.fc2.com/c/h/a/chattera/shBrushCpp.js"></script>
<script type="text/javascript" src="http://blog-imgs-56.fc2.com/c/h/a/chattera/shBrushBash.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();SyntaxHighlighter.config.bloggerMode = true;</script>

をいくつか記述する。
パス中の「blog-imgs-56.fc2.com/c/h/a/chattera」ここのブログのパスなので各自にあわせて修正する。
最後の行の、SyntaxHighlighter.config.bloggerMode = true;がないと一行になってしまい、
BRもつくのでみにくくなってしまう。

記事を書く際には

<pre class="brush: java;">
javaコード
</pre>

のようにclassで言語を指定する。指定できるものは大体言語名を小文字にしたものであるが
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
に細かくのっている。

またpreの中はエスケープしないといけないが、個別にかきかえるのは面倒なので
http://www.mapee.jp/tools/pretagmaker/
というような便利なサイトを使うとよい。

スポンサーサイト

コメントの投稿

非公開コメント

プロフィール

chattera.net

Author:chattera.net
フリーでソフト開発の仕事をしています。
自作したこのチャットシステムは、何か世の中に役に立つこともあるかと思いますので、お呼びがかかるとうれしいですね。

連絡先は chatteranet@gmail.com です。

また、ソフト開発関連のお誘いもうけたまわっております。

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR