DESIGN Oil BLOG

ソースコードの表示を整えてくれる SyntaxHighlighter Evolved(WordPressプラグイン)

  • twitterで共有
  • Facebookで共有
  • Google+で共有
  • はてなブックマーク
  • LINEで共有

前々から「入れよう」「入れよう」と思いつつ放置していた『ソースコードの表示を整えてくれるプラグイン』。重い腰を上げてようやく導入しました。

SyntaxHighlighter Evolved

今回選択したのはSyntaxHighlighter EvolvedというWordPress用のプラグイン。
導入手順などは下記から。


SyntaxHighlighter Evolved

SyntaxHighlighter?Evolved ? My WordPress?Plugins ? Viper007Bond.com
http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/

●ダウンロード先:WordPress ? SyntaxHighlighter Evolved ? WordPress Plugins

上記URLから最新版をダウンロード。
「wp-content」→「plugins」にアップロード。
「プラグイン」からSyntaxHighlighter Evolvedを有効化。

ちなみに、header.php

<?php wp_head(); ?>

が、footer.php

<?php wp_footer(); ?>

がそれぞれ記入されている必要があります。使用中のテーマファイルをチェクしておきましょう。

設 定

SyntaxHighlighter Evolved

「設定」→「SyntaxHighlighterEvolved」から設定画面に入ります。

  • Display line numbers:行番号を表示するかどうか(※)
  • Display the toolbar:ツールバーを表示するかどうか
  • Automatically make URLs clickable:リンクするかどうか
  • Collapse code boxes:折畳む?(チェックで表示されなくなります)
  • Use the light display mode, best for single lines of code:シンプルな表示にするかどうか(行番号非表示と同じようなスタイル?)
  • Use smart tabs allowing tabs being used for alignment:タブの整列処理の有無(※)
  • Wrap long lines (disabling this will make a scrollbar show instead):コードを折返すかどうか(チェックで折返し)(※)

主な設定項目はこんな感じです。
TOKIZKAKIが※印のついた、3つの項目をONにしました。

設定画面の下に、サンプルが表示されますので、試行錯誤しながら設定するのに便利です!

使用方法

後は、PHPのソースコードを表示したい場合には

ここにソースコード

と記入してあげればOK。

ここにソースコード

こんな感じで表示されます。
その他にもやなど様々な言語に対応しています。(詳細はコチラ

CSSのカスタマイズ

ダウンロードしたファイルの「syntaxhighlighter」→「syntaxhighlighter」→「styles」の中のCSSファイルを編集する事で、オリジナルな表示に変更する事も可能です。

基本的な部分は「shCore.css」を編集すればOK。

パラメータ

各種パラメータを使って、表示を変更する事が可能です。

例(強調ライン指定):

1行目
2行目
3行目を強調
4行目

適用後:

1行目
2行目
3行目を強調
4行目

例(開始行番号指定):

74行目から開始
75行目
76行目
77行目

適用後:

74行目から開始
75行目
76行目
77行目

他にも
wraplines=”false”(自動折返し無し)
autolinks=”false”(URLオートリンク無し)
ruler=”true”(ルーラー表示)
などもあるので、必要に応じて使い分けて行きたいですね!