コードを見やすく表示させる – iG:Syntax Hiliter
Posted on 2009年02月4日 | 5 Comments
WordPressでコードを見やすく表示させたい。
行番号が必要なときは番号も付けたいし、
ずらずら長いコードは色分け（ハイライト）して表示された方がいいし、
面倒なときは言語指定なしで簡単に表示させられたら便利だし、
プラグイン独自のタグを忘れちゃったりするからボタン一つで入力したいし、
複数行のコードは見やすく行ごとに色を変えて表示できたらいい。
というわがままを叶えてくれるプラグインを発見。
素敵なことに「MMRT daily life」さんのところで日本語版が配布されている。
説明に書いてあるようにダウンロードしたファイルをプラグインディレクトリにアップロードして有効化。
管理画面の設定から、どんな風に表示させるか設定できる。
- コードBOX内の”コード”を別ウィンドウで開くリンクをつける
- コードの原文の表示方法を新しいウインドウで開くか
- コード言語を表示させるか
- コード内のコメントを強調表示するか
- 行番号を表示するか
- 行番号の色を交互に変えるか
- 行番号の色を２つ。カラーピッカー付き。
という設定項目がある。
タグを手入力したくないあたしのような人のために、クイックタグも設定できる。
マニュアルは英語なので簡単に説明すると、
- wp-includes\jsにあるquicktags.jsを開く。
- プラグインに付いていたMANUAL.htmlの「6. QUICKTAGS」の部分を開く。
- 「add the following lines」の下にあるボックス内のコードをコピー。
- quicktags.jsの136行目辺り（moreタグの設定が終わったところ）を探して、);の後に改行してペースト。
- 保存してアップロード。
これで投稿画面のボタン群にActionScript、 ASP、 C、 C++、 C#、 CSS、 DELPHI、 HTML、 JAVA、 JavaScript、 MySQL、 PERL、 PHP、 PYTHON、 RUBY、 SMARTY、 SQL、 Visual Basic、 VB.NET、 XML、CODEのボタンが追加される。
コード貼り付ける場所はmoreの後じゃなくても、自分の使いやすい場所でOK。
ボタンが出現しない場合は、ブラウザのキャッシュをクリアしてみると表示されるかも。
ボタンが表示されるのはビジュアルエディタの方じゃなくて、HTMLの方なので、HTMLのタブを選択すること。
quicktags.jsを書き換えるの怖いんだけど…って場合は、
クイックタグを追加できるプラグインを利用するという手段もある。
ビジュアルリッチエディタとの併用不可というのをどっかで見たので、あたしは試してない。
WordPressのアップデートでquicktags.jsも上書きされちゃうかも？という不安を解消するには、そういうプラグインを探してみてもいいと思うんだけど。
これでボタン１つでコードを表示させるタグを入れられるようになった訳だが、
このブログではコードBOXがはみ出して、サイドバーと重なっていたので、
ig_syntax_hilite\cssにあるsyntax_hilite_css.cssでサイズを変更。
このブログのフォントが白いもんだから、文字色も追加。
※注意！
コードを記入した後、ビジュアルエディタに切り替えないこと。
ビジュアルエディタでコードの入った投稿を開いた瞬間に＜＞の中身が消えたり、<とかに変更されたりする。
記事をビジュアルエディタで書き上げた後に、HTMLに切り替えてコードをペーストしたら、そのまま投稿ボタンを押そう。
昨日PHP Hilight Stringプラグインを紹介したばかりだけど、
iG:Syntax Hiliter 日本語版を使うことにした。
また１つ導入しているプラグインが増えたわけだが、今度は何を入れようか？ｗ
関連記事：
この記事は 2009年02月4日水曜日 の 1:15 AM に書きました。
この記事のフィードはRSS 2.0で購読できます。
« コードを表示させる – PHP Hilight String | クイックタグ（任意のタグを挿入するボタン）を追加する – AddQuicktag »
4 Comments for this entry
1 Trackback or Pingback for this entry
-
クイックタグ（任意のタグを挿入するボタン）を追加する - AddQuicktag >> 病的溺愛シンドローム
2月 5th, 2009 on 12:36 AM[...] 昨日導入した「iG:Syntax Hiliter」のタグをAddQuicktagで登録してみた。 quicktags.jsを編集するとかやらないで、初めからこれ使えばよかった…。 とっても簡単。とっても便利。 [...]
コメント
Additional comments powered by BackType
Web Hosting Pad を使ってます。容量無制限など海外サーバーでしかお目にかかれないだろう凄いサービス。格安・高機能・マルチドメイン対応。
ぽちっとお願い☆
↓ぽちっと押すと足跡を残せるです↓
- @oiti16 ありがとうございます＾＾
- 風邪をひいたような感じでもないし、二日酔いでもないけど、1日頭痛が治らない。うーん
- 使ってみたい RT: http://kachibito.net/wordpress/tubepress.html
敷地小さっ…；；
(2) 唯奈
(3) おいち
2月 4th, 2009 on 2:01 AM
（*^_^*）/コンバンハ～♪
何ともギザ貪欲なプラグインですね～☆
見やすい、簡単、多機能ときちゃ
まるで誘惑されてるようですなぁ。
ただ、設定上は少々面倒なのかな？という感じがしました。
全体的に今回もよく調べ上げてます、お疲れ様です♪
2月 4th, 2009 on 8:24 AM
＞おいちさん
おはようございます＾＾
にゃははｗ
貪欲なプラグインを貪欲に探してますｗｗｗ
タグも自分で入力するし、最低限使えればいいって感じなら、普通にアップロードして有効化するだけです。
[code]タグだけでいけます。
2月 4th, 2009 on 12:28 PM
記事とは直接関係ないですが・・・。
WordPressってそれだけの多くのプラグインあって、上手く管理とか、使いこなすための機能って何かあるのでしょうか？
前に流行ったXOOPSでも、プラグインの管理って面倒だったので・・・
どうなのかなぁ？！と思いました。
WordPress知らない人向けに記事になったらいいなぁ・・・。
2月 4th, 2009 on 4:32 PM
＞AquaSunネットサービスさん
プラグインの更新は自動で通知されますし、特に管理という管理はしてません。
XOOPSを使っていたのがかなり昔の記憶でよく覚えてないのですが、多分昔のXOOPSより楽だと思います。
更新を確認する作業もいらないし、更新するのもクリックだけでダウンロード・インストール・再有効化が自動ですから。
プラグインディレクトリにアップロードするだけで使えるプラグインはFTPすら必要ありません。
WordPressは見たまんまいじれる分かりやすいCMSだと思います。
プラグインを探してインストールする手順は記事になりそうですね。
いいヒント有り難う御座います。