• HOME
  • >
  • WordPress
  • >
  • WordPressでコードを表示させるプラグイン

WordPressでコードを表示させるプラグイン

この覚え書きブログをするにあたって、やっぱりタグとかコードを書く場面があるんですね。
最初なんのタグでも囲わずにターっとコードを書いて更新してみたら…
な い
コードの部分だけごっそりないんです。
当たり前のことなのに、ごそっとないのを見て、一瞬青ざめた記憶があります。
大変お恥ずかしい限りです。
そこで、コードをカッコ良く載せるためにWordPressのプラグインをいれてみました!
その名も『Syntax Highlighter Evolved』です。

  1. Syntax Hightlighter Evolvedの設置方法
  2. インストール後の細かい設定
  3. 投稿時の書き方
  4. ショートコードのパラメータ

設置方法

これは通常のプラグインと方法はなんら変わりません。
Syntax Highlighter Evolvedからプラグインをダウンロードする
②FTPでプラグインのフォルダに丸ごとアップする
③管理画面の[プラグイン]を開いて、Syntax Highlighter Evolvedを有効化する

インストール後の設定

[設定]の[SyntaxHighlighter]から詳細を設定することができます。
一般的によく使いそうな部分を簡単に書いておこうと思います。

  • SyntaxHighlighterのバージョン
    Version3またはVersion2のどちらかを設定することができます。
    二つの違いは主に表示の仕方ですね。
    またVersion2は「コピー」や「ソースを表示」などのツールバーが表示されます。
  • テーマ
    テーマの切り替えができます。
  • 行番号を表示する
    行番号を表示するかどうかを設定します
  • ツールバーを表示する
    ツールバーを表示するかどうかを設定します
  • 軽い表示モードを使う
    行番号やツールバーが表示されないようにするかどうかを設定します
  • 長い行を折り返す
    長い行を折り返して横スクロールバーを非表示にするかどうかを設定します

投稿時の書き方

以下のようにコードを表示させたい部分を、言語名のパラメータで囲ってあげるだけで大丈夫です。
例:HTMLタグを表示させたい場合

[ HTML ]
<p>これはサンプルです。</p>
[ /HTML ]

比較的よく使う言語は以下のようなものでしょうか。

  • html HTML
  • css CSS
  • php PHP
  • js JavaScript

ショートコードのパラメータ

上で書いたショートコードに対して特定の指定をする場合につけるのが、ショートコードパラメータです。
ここでは使う頻度が多そうなものだけ書こうと思います。

  • collapse(true/false)
    コードボックスを収納表示することができます。
  • gutter(true/false)
    行番号を表示するかどうかを設定します。
  • highlight(数値)
    コード中でハイライト表示する行番号を指定することができます。
  • htmlscript(true/false)
    コードを強調表示するかどうかを設定します。
  • light(true/false)
    行番号やツールバーが表示されないようにするかどうかを設定できます。
  • title
    コードボックスにタイトルテキストを表示することができます。
  • toolbar(true/false)
    ツールバーの On/Offの切り替えができます。

まとめ:SyntaxHighlighter Evolved の使い方 (設定&記述例)を参考にさせていただきました。