WordPressで記事を書く時に便利なプラグインのご紹介です。

htmlやcss、プログラミングの解説記事を書く時に、記事内にソースコードで表示した方がわかりやすいですよね。

でもそのままコードを入力しても、タグまでは表示されません。そんな時にはこのプラグイン「SyntaxHighlighter Evolved」が便利で綺麗にソースコードを表示できます。

「SyntaxHighlighter Evolved」の導入

WordPressのプラグイン管理画面で「新規追加」をクリックして「SyntaxHighlighter Evolved」を検索します。

インストールしたら有効化しておきましょう。

対応しているコードは以下のものです。

html,actionscript3,bash,coldfusion,cpp,csharp,css,
delphi,erlang,fsharp,diff,groovy,javascript,java,javafx,
matlab (keywords only),objc,perl,php,text,powershell,
python,r,ruby,scala,sql,vb,xml

使い方

使い方はものすごく簡単です。表示したい言語のタグで囲うだけ！

以下のように記述すると、

こんな感じで表示してくれます。

<p>ワードプレスプラグイン</p>
<p>SyntaxHighlighter Evolvedの使い方</p>

ハイライトの付け方

コードの中で強調したい部分にハイライトをかけることができます。

［html highlight=”2,6″］

このように記述すると、2行目と6行目にハイライトがかかります。

<p>1行目の文章</p>
<p>2行目の文章</p>
<p>3行目の文章</p>
<p>4行目の文章</p>
<p>5行目の文章</p>
<p>6行目の文章</p>
<p>7行目の文章</p>

開始行番号の指定

左側にある行番号の開始値を指定するには以下のように記述してください。

［html firstline=”26″］

<p>1行目の文章</p>
<p>2行目の文章</p>
<p>3行目の文章</p>
<p>4行目の文章</p>
<p>5行目の文章</p>
<p>6行目の文章</p>
<p>7行目の文章</p> 

この他にも管理画面から色々設定を変更できます。

• 行番号の表示
• ツールバーの表示
• 自動リンクの有効
• 表示モードの変更
• 長い行を折り返す
• コードボックスの表示を閉じる

後はブログに合わせた見やすい表示にできる、「テーマの変更」ができます。

デフォルト以外にも7種類ほどあるので、ブログにあった見え方になるように変えて見てくださいね。

設置後のチェック

注意点というかこの記事を書いていて感じたんですが、コードを書いた後は一度プレビューで確認する事をお勧めします。

WordPressのテーマのCSSでなるのか、投稿エディタのせいなのか、行間に勝手にあいだが空いてしまったり、コードボックスが表示していなかったりします。

1行追加されると行番号もずれますので、記事を更新したり書き直した後はプレビューで見てから公開なり更新した方が良いかもしれません。