日: 2014年1月25日

【WP】WP SyntaxHighlighterを導入【プラグイン】

truthLeave a comment

以前からソースコードを投稿する時にそのままコピペしても空白部分などがおかしくなったり
表示されなかったりとその部分を変換してくれるようなサイトを使って色々やっていた訳ですが

ぶっちゃけ面倒くさいｗ

なので、どうにかしてくれるようなプラグイン無いかしら？と思いたち探していたら発見しました。

WP SyntaxHighlighter
ソースコードを投稿欄にペーストしてそのソースコードを囲ってボタンでポン！って感じの
本当にお手軽なプラグインです！

ちなみに検索をかけてすぐに出てくる有名なプラグインは
SyntaxHighlighter Evolved
こちらのプラグインなのですが、自分の環境下では動きませんでした。
多分解決する方法は探せば見つかるとは思いますが、すぐに使いたかったのであえて
WP SyntaxHighlighterを選択しています。
SyntaxHighlighter Evolvedこっちも使い方が判明したらメモしていこうかと思います。

話は戻りますが・・ｗ
WP SyntaxHighlighterのプラグインで表示させたソースコードがこれ。

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

見やすい上に、綺麗に色分けされてます。
対応しているコードは
AppleScript, ActionScript3, Bash, ColdFusion, C, C++, C#, CSS, Delphi, Diff, Erlang, Groovy, HTML, Java, Java FX, JavaScript, Pascal, Patch, Perl, PHP, Plain text, PowerShell, Python, Ruby, Ruby on Rails, Sass, SCSS, Shell, SQL, VB, VB NET, XHTML, XML and XSLT
です。　結構多いｗ

導入は簡単だと思うので設定の方をちょｔこっと説明。
●使用するライブラリ
この項目を2.xに変更することと、ツールバーという項目にcheckを入れることで
ソース表示部分にマウスオーバーでツールチップ(ソースコード表示・クリップボードにコピー等)
が右上に表示されるようになる。
*ちなみに3.xだと画面上には？のツールボックス(クレジット表示)しか表示されず、ソースコード上で
ダブルクリックすることで範囲指定が出来る。

●テーマ
ソースコード表示の背景とコードのカラーリング(テーマによって固定)を変更することが出来る

●ショートコード
ソースコード内で使えるコマンド。詳しくこちらに説明が書いてあります。
基本はサイトの説明どおりなんですけど、このプラグインだと記述方法が異なるので
使えそうなコードを少し書いておきます。

基本はエディターでSH Preボタンで囲むとソースの中身はこんな記述になります。

<pre class="brush: html; gutter: true">ソースコード</pre>

この場合
brush — 使用する言語・・・のことだと思う。(自信ないけどｗ)
gutter(false/true) — コードボックスの左に表示される番号
複数のショートコードを使用する場合は;(セミコロン)で区切る。

以下使えそうなコードをピックアップ。

highlight: (表示したい行の番号);
特定の行をハイライト表示させる事ができる。

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

複数の行をハイライトさせたい場合は
highlight: [1,3,5]
このように “，”(カンマ)で区切る。

1行目・3行目・5行目のラインをhighlightすることが出来ました。

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

と、こんな感じで使えます。
ショートコードは他にも色々あると思うので検索して調べてみると良いかも。