病的溺愛シンドローム > WordPress > プラグイン > コード表示・自動整形 > コードを見やすく表示させる – iG:Syntax Hiliter

コードを見やすく表示させる – iG:Syntax Hiliter

Posted on 2009年02月4日 | 3 Comments| Clip to Evernote

WordPressでコードを見やすく表示させたい。
行番号が必要なときは番号も付けたいし、
ずらずら長いコードは色分け（ハイライト）して表示された方がいいし、
面倒なときは言語指定なしで簡単に表示させられたら便利だし、
プラグイン独自のタグを忘れちゃったりするからボタン一つで入力したいし、
複数行のコードは見やすく行ごとに色を変えて表示できたらいい。

というわがままを叶えてくれるプラグインを発見。

iG:Syntax Hiliter

素敵なことに「MMRT daily life」さんのところで日本語版が配布されている。

説明に書いてあるようにダウンロードしたファイルをプラグインディレクトリにアップロードして有効化。
管理画面の設定から、どんな風に表示させるか設定できる。

  • コードBOX内の”コード”を別ウィンドウで開くリンクをつける
  • コードの原文の表示方法を新しいウインドウで開くか
  • コード言語を表示させるか
  • コード内のコメントを強調表示するか
  • 行番号を表示するか
  • 行番号の色を交互に変えるか
  • 行番号の色を２つ。カラーピッカー付き。

という設定項目がある。

タグを手入力したくないあたしのような人のために、クイックタグも設定できる。
マニュアルは英語なので簡単に説明すると、

  1. wp-includesjsにあるquicktags.jsを開く。
  2. プラグインに付いていたMANUAL.htmlの「6. QUICKTAGS」の部分を開く。
  3. 「add the following lines」の下にあるボックス内のコードをコピー。
  4. quicktags.jsの136行目辺り（moreタグの設定が終わったところ）を探して、);の後に改行してペースト。
  5. 保存してアップロード。

これで投稿画面のボタン群に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_hilitecssにあるsyntax_hilite_css.cssでサイズを変更。
このブログのフォントが白いもんだから、文字色も追加。

※注意！
コードを記入した後、ビジュアルエディタに切り替えないこと。
ビジュアルエディタでコードの入った投稿を開いた瞬間に＜＞の中身が消えたり、<とかに変更されたりする。
記事をビジュアルエディタで書き上げた後に、HTMLに切り替えてコードをペーストしたら、そのまま投稿ボタンを押そう。


昨日PHP Hilight Stringプラグインを紹介したばかりだけど、
iG:Syntax Hiliter 日本語版を使うことにした。
また１つ導入しているプラグインが増えたわけだが、今度は何を入れようか？ｗ

この記事を読んだ人は、こんな記事にも興味を持っています


この記事は 2009年02月4日水曜日 の 1:15 AM に書きました。　
この記事のフィードはRSS 2.0で購読できます。

« | »

2 Comments for this entry

  • AquaSunネットサービス
    2月 4th, 2009 on 12:28 PM

    記事とは直接関係ないですが・・・。

    WordPressってそれだけの多くのプラグインあって、上手く管理とか、使いこなすための機能って何かあるのでしょうか？
    前に流行ったXOOPSでも、プラグインの管理って面倒だったので・・・
    どうなのかなぁ？！と思いました。
    WordPress知らない人向けに記事になったらいいなぁ・・・。

  • 唯奈
    2月 4th, 2009 on 4:32 PM

    ＞AquaSunネットサービスさん
    プラグインの更新は自動で通知されますし、特に管理という管理はしてません。
    XOOPSを使っていたのがかなり昔の記憶でよく覚えてないのですが、多分昔のXOOPSより楽だと思います。
    更新を確認する作業もいらないし、更新するのもクリックだけでダウンロード・インストール・再有効化が自動ですから。
    プラグインディレクトリにアップロードするだけで使えるプラグインはFTPすら必要ありません。
    WordPressは見たまんまいじれる分かりやすいCMSだと思います。
    プラグインを探してインストールする手順は記事になりそうですね。
    いいヒント有り難う御座います。

1 Trackback or Pingback for this entry

ADgger

堅実に儲かるアフィリエイト

アーカイブ

全ての記事を年代別に…