【Drupal7】 GeSHi Filter - 記事内にソースコードを表示させる

記事内にソースコードを記述する際、以下の様にコードの行番号を表示したり、命令文をハイライトできるようにします。

1
2
3
4
5
public class HelloWorld {
  public static void main (String[] args) {
    System.out.println("Hello World !!");
  }
} 

なお、環境としてはCKEditorが使えるようになっており、CKEditorはこちらのインストール方法に従い、Wysiwygではなく単体でインストールされている前提で説明をいたします。

【導入手順】

1. Libraries APIモジュールをインストールする。こちらからダウンロードおよびインストール。モジュールの管理画面で有効化する。
2. GeSHi Filter for syntax highlighting モジュールをインストールする。こちらからダウンロードおよびインストール。モジュールの管理画面で有効化する。
3. GeSHi 本体をダウンロードする。こちらからダウンロードし、解凍を行う。解凍されたファイルを"サイトアドレス/sites/all/libraries/geshi"に配置する（"サイトアドレス/sites/all/libralies/geshi/geshi.php"となるよう）。
4. モジュールの管理画面から、GeSHi Filterの設定画面へ。ここで、GeSHiライブラリが認識されているか確認する。確認できない場合は、ライブラリのキャッシュがクリアされていない可能性があるので、管理画面から全てのキャッシュをクリアする。
5. 管理画面から「環境設定」→「コンテンツ作成」→「テキストフォーマット」→「GeShi Filter」→「言語」にて、フィルターを適用したい言語が選択できる。「すべて」のタブを選び、使用する言語を選択する。
6. 管理画面から「環境設定」→「コンテンツ作成」→「テキストフォーマット」→「(設定したいフォーマット)」を選択する。「有効なフィルター」にGeShiフィルターがあるので、これにチェックを入れる。なお、フィルター設定箇所に5で指定した使用言語のタグコードが記述されている。

設定が完了したら、実際にソースコードを貼り付けて実験してみましょう。

ソースコードをタグ<code language="使用言語のタグコード"></code>で囲めばOKです。尚、codeで囲まれた部分はHTMLのタグも表示されてしまいますので、HTMLソース内の改行や空白がそのままHTMLに表示されるよう指定する<pre>タグを使用して、ソースを整形し、<pre>タグの内側に<code>タグを配置する形になります。

表示されるレイアウトをいじりたい場合は、デフォルトで設定したテンプレートのCSSを修正すると良いでしょう。