スポンサーサイト

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

前後の記事

最近の記事

管理者にだけ表示を許可する

ソースコードを飾る::syntaxhighlighter FC2ブログでの導入メモ

ソースコード表示の体裁を整えるJavaScript、syntaxhighlighter。1年も前に話題になったものですが、なかなか良かったのでFC2ブログでの導入メモを公開。

syntaxhighlighterを適用すると、ソースコードがこのように表示されます。

CSSはこんな感じ。

ソースコードをダウンロード

上記のページからファイルをダウンロード、解凍すると、

+Scripts
- shBrushCSharp.js
- shBrushCpp.js
- shBrushCss.js
- shBrushDelphi.js
- shBrushJScript.js
- shBrushJava.js
- shBrushPhp.js
- shBrushPython.js
- shBrushRuby.js
- shBrushSql.js
- shBrushVb.js
- shBrushXml.js
- shBrushCore.js
- shBrushCSharp.js
+ Styles
- SyntaxHighliter.css
+ Uncompressed
- shBrushCSharp.js
- shBrushCpp.js
- shBrushCss.js
.....

と展開されます。まずはScriptsフォルダの中から、ブログで書きそうなソースコード用ファイルをファイルアップロードからアップロードします。

ファイルアップロード

たとえば私の場合、JavaScriptとXml(html含)、CSS用のファイルをアップロードしました。

アップロード to fc2ブログ:
- shBrushCss.js
- shBrushJScript.js
- shBrushXml.js

続けて、共通して必要なshBrushCore.js、表示用のCSSファイルもアップロード。

アップロード to fc2ブログ:
- shBrushCore.js
- SyntaxHighliter.css

テンプレートの設定

次にテンプレートを修正。適用中のテンプレートhead部分に

を入力。次に

さきほどアップロードしたファイルを<%topentry_more>の下に記述します。たとえば[shBrushPhp.js]もアップロードした場合は、

<script type="text/javascript" src="file/shBrushPhp.js"></script>

も記述しておきます。

記事での書きかた

改行の扱いを「HTMLタグのみ」にして、記事を保存するとソースコードの表示の変化が分かります。

CSSコードを記述したい場合は

class="css"とします。

なお、テンプレートCSSエリアでpre要素が定義されている場合は、定義を削除したり、編集する必要があります。

-------追記
あれ?IEだとソースコードの横スクロールができない!?どうしてだろう...
FC2変数ハイライト用スクリプト、あったら便利そうですね。

参考

便利なソースコード表示用JavaScript (dp.SyntaxHighlighter)
dp.SyntaxHighlighter-コード表示に役立つJavaScript

前後の記事

最近の記事

トラックバック

この記事へのトラックバックURL:
http://fc2blogshop.blog13.fc2.com/tb.php/896-fd006816

SyntaxHighlighter を利用してWebページ上のソースコードを飾る
ども、ご無沙汰してます。スィンです。 10時ぐらいに寝ようと布団に入ったのですが、咳が出だして寝付けず。 せっかくなので、以前から導...

コメント

BY ドム AT 2008/08/19 edit this comment
JUGEMでSyntaxHighLighterを利用したいのですが、いまいちやり方がわからないので、もしよろしければアドバイスをいただきたいです。

「<%topentry_more>の下に記述します。」
これはどこに記述するかで異なりますか?JUGEMに同じような独自タグがないものでよくわかりませんでした。
コードを書く部分よりも前に書いておけば(body直下とか)よろしいのでしょうか。

また、JUGEMはアップロードした時点でファイル名が「年月日-番号.拡張子」に変更されてしまいます。「file/shCore.js」のようにファイル名をそのまま利用することができないのですが、これは問題ありませんか?

よろしくお願いします。
BY ドム AT 2008/08/19 edit this comment
bodyの閉じタグの直前に<script></script>を書いたところ実装できました。どうもすみませんでした。
管理者にだけ表示を許可する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。