スポンサーサイト

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

ソース記述に便利なSyntaxHighlighterを導入してみた。

ソースコードをブログに書くのってめんどいな と。
でも、なんかツールあるはずっと思って検索したらSyntaxHighlighterってのがよさそうだったので導入してみました。

とりあえず、このFC2での導入方法をメモがてら書いておきます。


まずSyntaxHighlighterをダウンロード

SyntaxHighlighter - Alex Gorbatchev
ここから落とせます。
2.0.296が最新みたいです。(2009/04/02現在)

そんなわけで解凍。
test.htmlってのをブラウザで開くとどんな感じにかけるかわかります。
うん。いい感じ。


FC2にアップロード

FTPでどんとフォルダごとアップしたいところですが、FC2ブログはそんなことできないのでちまちまと送ります。
最近、複数アップロードに対応したみたいなのでちょっとだけ楽になったのかな?

まずは必須項目。

scripts/shCore.js
scripts/clipboard.swf
styles/*.png(画像ファイル全部)
styles/shCore.css

で、次にスタイルシートなんですが、何種類か用意されています。
test.htmlのstyles/shThemeDefault.cssを書き換えて確認してみてください。
もちろん自分であたらしく書いても大丈夫です。
私は
shThemeDefault.css
にしてみました。

次にscriptsフォルダ内の必要な言語用ファイルをアップしていきます。
とりあえず私は

shBrushCpp.js
shBrushCss.js
shBrushJScript.js
shBrushXml.js

をアップしました。


テンプレートの編集

アップが完了したら次は
テンプレートでスクリプトを読み込ませないといけません。
test.htmlを参考にこんな感じ










さっそく使ってみたw
これをヘッダーに書き込んで完了。

コードを書く場合はこんな感じ。

ここにソースを書く

brushの設定はこちらを参照のこと SyntaxHighlighter:Brushes - Alex Gorbatchev
これで完了。

あと設定がいろいろできるみたいです。
それはこちらを参照してくださいな。SyntaxHighlighter:Configuration - Alex Gorbatchev

でも自動改行にしてるとおかしくなるね。まあ、あたりまえなんだけど。
どうにかできないものか・・・。

追記:ちょっと強引に解決してみました。
GAZOZ FACTORY  自動改行を部分的に解除
関連記事

tag : JavaScript SyntaxHighlighter


comment

Secret

 

宿・ホテル予約ならじゃらんnet
Ads
プロフィール

はち

はち

最新記事
最新コメント
最新トラックバック
カテゴリ
気になる商品
検索フォーム
RSSリンクの表示
リンク
タグクラウド
QRコード
QRコード
月別アーカイブ
カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。