ブログ中でソースコードを記述するとき,EclipseなどのIDEやvimのように色分けして表示してあるサイトをよく見かけます。それと同じことをやろうとして調べてみると,SyntaxHighlighterというのがきれいに表示できるし便利そうだったので使ってみました。
確かに便利ですし,きれいなソース表示になります。ところがこれ,FCKEditorと相性が悪く,入力が非常に面倒になってしまいます。そこで,この相性の悪さをなんとかする方法がないかを調べてみました。
http://fckeditor.biz/viewtopic.php?p=2555&sid=571686dc6c64965fab5dd3bd2670d8bb
上記のページにTigrouMeowという人が,FCKEditorとSyntaxHighlighterの共存について質問を書き,レスポンスが得られないので,自己レスとして他の方法を紹介しています。つまりこの二つはどうにも相性が悪く,組み合わせて使うべきではないということです。
代替手段 - Geshi for FCKeditor
代替手段とはいってもこれはなかなかによい解決方法であるように思います。Geshi for FCKeditorはFCKEditorのプラグインで,こいつをインストールするとFCKEditorのツールバーにInsert Syntax Highlighted Codeというボタンがつきます。そのボタンをクリックするとソースコード入力用のダイアログが表示されるので,そこにコードをペーストして,言語を選択してOKをクリックするだけで,色つきになったソースコードがカーソル位置に挿入されます。
Geshi for FCKeditorのインストール方法
ファイルのダウンロードと配置
- こちらから,Geshi for FCKeditorをダウンロードして解凍します。
- 出てきたgeshighlighterフォルダをまるごとFCKEditorのプラグインフォルダにコピーします。MTFCKEditorプラグインを使用している場合は,mt-static/MTFCKeditor/editor/pluginsがその場所です。
fckconfig.jsの編集
fckconfig.jsはmt-static/MTFCKeditorにあります。
- 次の行を見つけます。
FCKConfig.Plugins.Add( 'autogrow' ) ;
- それをコメントアウトして1行加えます。
//FCKConfig.AutoGrowMax = 400 ;
FCKConfig.Plugins.Add( 'geshighlighter', 'en,nl' ) ;
- ToolbarSetsの定義に'RtHighlight'を加えます。僕の場合はWYSIWYGエディタを入れるで説明したように,独自のツールバーセッティングをしているので次のように書きました。
FCKConfig.ToolbarSets["Blog"] = [
['PasteText','PasteWord'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','RtHighlight'],
['Image','Table','Rule'],
['FontFormat','FontSize', 'TextColor','BGColor'],['Source', 'FitWindow','About']
] ;
以上で完了です。
投票数:0
平均点:0.00
|
SpamLookupのセッティング |
Movable Type |
