gehi(ソースコードハイライト）プラグインについて

Last-modified: Fri, 13 Mar 2020 15:12:57 JST (1499d)
Top > gehi(ソースコードハイライト）プラグインについて

概要

プログラムソースコードを整形、色分けして表示するプラグインです。
（プラグイン内部でGeshiを使用しています）

使い方

#div(language,number){{
ソースコード
・
・
・
}}

div オプションについて

  • language=プログラム言語（php,pythonなど）
    対応言語はGeshiにてご確認下さい。
  • number=行番号の表示/非表示
    デフォルトは非表示です。number または number=true とすることで行番号を表示します。

使用例

PHPのソースコードを行番号付きで表示します。

#geshi(php,number){{
   <?php
     //テスト
     echo 'test';
     print('test'.$x);
     public function abc($arg1,$arg2){
       $num = 100;
       /* comment
       comment line1
       comment line2 */
       preg_match('/[0-9]+/',$string,$matches);
       echo 'hello world';
     }
   ?>
}}
  1. <?php

  2.   //テスト

  3.   echo 'test';

  4.   print('test'.$x);

  5.   public function abc($arg1,$arg2){

  6.     $num = 100;

  7.     /* comment

  8.     comment line1

  9.     comment line2 */

  10.     preg_match('/[0-9]+/',$string,$matches);

  11.     echo 'hello world';

  12.   }

  13. ?>

表示内容のカスタム設定について

言語ごとにCSSを定義して表示をカスタマイズすることが可能です。

設定ファイルは「geshi/言語名」の文書を作成し、そこに希望のCSSを記載してください。
下記のサンプルはPHP用のカスタム設定の例です。
サンプルのphpとなっている部分を他の言語に置き換えることで、希望の言語の設定ファイルとして利用することが可能です。

個々のキーワードやコメント等の配色は、Geshiのドキュメントや生成されるHTMLのclassからセレクタを判断の上、適宜設定を行ってください。

例）geshi/php

/* ソースコードの部分の背景色 */
pre.geshi.php,
pre.geshi.php li {
    font-family:monospace;
    background: #f0f0f0;
    color: #0000bb;
}

pre.number.php ol{
    background: #e0e0e0;  /* 行番号の背景色 */
}

/* ボーダーや位置を微調整 */
pre.geshi.php li {
    margin: 0;
    margin-left: 3.5em;
    padding: 0 0.5em;
    border-left: solid 1px #bbb;
}

/* キーワード */
pre.geshi.php span.kw1 {
  color: #007700;
}
pre.php.geshi span.kw2 {
  color: #007700;
  font-weight: normal;
}
pre.geshi.php span.kw3 {
  color: #0000bb;
}

/* コメント */
pre.geshi.php span.co1 {
  color: #ff8800;
  font-weight: normal;
}
pre.geshi.php span.co2 {
  color: #ff8800;
  font-weight: normal;
}
pre.geshi.php span.coMULTI {
  color: #ff8800;
  font-weight: normal;
}

/* その他 */
pre.geshi.php span.st_h {
  color: #dd0000;
}
pre.geshi.php span.num0{
  color: #0000bb;
}
pre.geshi.php span.br0 {
  color: #007700;
}
pre.geshi.php span.sy0{
  color: #66cc66;
}

当プラグインについて

このプラグインはrevulo様が作成、sonots様が機能追加したgeshi.inc.phpを一部修正して使用しております。