2017年08月 / 07月≪ 12345678910111213141516171819202122232425262728293031≫09月

--'--.-- (--)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--:--  |  スポンサー広告  |  EDIT  |  Top↑

2010'01.31 (Sun)

SyntaxHighlighterというのを入れてみた

なんとなくソースコードを表示するのにいい方法はないかな,と調べてたところ,SyntaxHighlighterというツールを使うとなかなかいいぐあいに表示してくれるようなので入れてみました.

<導入方法>
SyntaxHighlighter - Alex Gorbatchev
ここの「Links」-「Download」からEnglishを選んでげっと.
ダウンロードしたのを解凍.

FC2ブログの管理画面から「ツール」-「ファイルアップロード」を選択して,解凍されたファイルから
・scripts/clipboard.swf
・scripts/shCore.js
・styles/help.png
・styles/magnifier.png
・styles/page_white_code.png
・styles/page_white_copy.png
・styles/printer.png
・styles/shCore.css
・styles 配下にあるshCore.css以外のcssを1つ
をアップロードする.
アップロードしたらURLをメモしておく(この後使うよ!).
残りは「Scripts」フォルダにあるファイルの中から,自分が使いそうなものを選んでアップロード.

アップロードが終わったら,今度は管理画面の「環境設定」-「テンプレートの設定」から使用中のテンプレートの編集をします.
<HEAD>タグの最後のほうにこんな感じで貼り付けます.


<head>
...
<!--SyntaxHighlighter ここから-->
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/u/n/y/unyorle/shCore.js"></script>
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/u/n/y/unyorle/shBrushCpp.js"></script>
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/u/n/y/unyorle/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/u/n/y/unyorle/shBrushSql.js"></script>
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/u/n/y/unyorle/shBrushCss.js"></script>
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/u/n/y/unyorle/shBrushJava.js"></script>
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/u/n/y/unyorle/shBrushJScript.js"></script>
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/u/n/y/unyorle/shBrushPhp.js"></script>
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/u/n/y/unyorle/shBrushRuby.js"></script>
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/u/n/y/unyorle/shBrushVb.js"></script>
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/u/n/y/unyorle/shBrushXml.js"></script>

<link href="http://blog-imgs-30.fc2.com/u/n/y/unyorle/shCore.css" type="text/css" rel="stylesheet" />
<link href="http://blog-imgs-30.fc2.com/u/n/y/unyorle/shThemeEclipse.css" type="text/css" rel="stylesheet" />

<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://blog-imgs-30.fc2.com/u/n/y/unyorle/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SyntaxHighlighter ここまで-->
</head>


最初の「<script type=~」のところはアップした「sh*.js」を羅列します(shCore.jsは必ず書く).
「<link heref=~」のところは「shCore.css」ともう1つアップしたCSSを記述.
あたしは「shThemeEclipse.css」にしてます.好みです.
最後の「<script type=~」のところはお約束.
カスタマイズするときはここにあれこれ書くらしいですがとりあえずは何もしなくても大丈夫.


<使い方>
使うには<PRE>タグを使います.
実際にはこんな感じ.

<pre class="brush:html;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SyntaxHighlighter Build Test Page</title>
<script type="text/javascript" src="scripts/shCore.js"></script>
...
</pre>


brush:のあとにつける文字(言語の指定)はSyntaxHighlighter:Brushes - Alex Gorbatchevにあるのでここをみて表示する言語にあわせればOK.

これでソースコードをきれいに表示できるかな.
でも,自動改行をOFFにしないといけないのが難点だね,このツール.
それともFC2が<PRE>タグの中まで改行タグをつけるのがいけないのか・・・.

って思ったら「SyntaxHighlighter.config.bloggerMode = true;」をつけると自動改行ONにしてあってもちゃんと表示できるっぽい(上のサンプルは記述済みです).
公式サイトはblogger.comがうんたら~って書いてあるけどFC2もtrueにしたほうがよさそう.
FC2は自動改行ONにしてると改行コードを取っ払って改行タグをつけるんだね・・・.
ソースコードは覗いてみるもんだ.

自動改行ONの振る舞いが「改行コード+改行」ってなってる場合は
「SyntaxHighlighter.config.stripBrs = true;」ってやれば改行コードだけをとっぱらってくれるんじゃないかな,って思います.

スポンサーサイト
23:20  |  ぷろぐらみんぐ→その他  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑

Comment

コメントを投稿する


管理者だけに表示

▲TOP

Trackback

この記事のトラックバックURL

この記事へのトラックバック

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