WordPressの記事内にソースコードを表示するなら「SyntaxHighlighter Evolved」プラグイン

どうも、ホワイトです。

さて、ちょっと間が空いてしまってWordPress関連です。

記事内にhtmlなどのソースコードを載せたいなと思ったので、まずはプラグインの使い方を振り返る意味でのアウトプット。

久々に使おうとしても意外と覚えているもんですね。

SyntaxHighlighter Evolvedをインストールする

ソースコードを記事内で表示するには「SyntaxHighlighter Evolved」というプラグインを使います。

まずは管理画面からインストールしましょう。

インストール&有効化が済んだら設定に入ります。

SyntaxHighlighter Evolvedの設定

最低限、必要と思われる項目を説明します。

SyntaxHighlighterのバージョン

3.xで良いでしょう。

設定画面の下部にあるプレビュー表示でも確認できますが、2.xにするとコード内にマウスオーバーすると右上にコピーするためのツールが出たり、折り返し表示がされます。

3.xはそのままドラッグでコピーしても行番号がコピーされないことと、ダブルクリックするとコード全てが選択できるので、自分はこちらの方が便利だと思うので使います。

テーマの選択

テーマもいくつか選択ができます。

選択して「変更を保存」をクリックすると、下部のプレビューで選択したテーマの表示がされるので、そちらを見て選択してみてください。

Fade to Greyを選択すると↑このような表示になります。

次の「すべてのブラシを読み込む」は特にチェックを付けなくても大丈夫です。
そもそもここを調べたことないけど問題なく使えてるので、特には必要ないでしょう。

規定の設定

こちらはもう見たまんまというか、自分は基本的にここもいじりません。

追加のCSSのclass名(複数可能)というのは、コードの中にあるdivにclass指定することができます。

タイトルはコードブロック上部にタイトルテキストが表示されます。

記事への投稿の方法

使い方は非常に簡単。

記載したいソースコードを言語タグで囲むだけ。必ず「ビジュアルモード」ではなく「テキストモード」で行ってください。
htmlの場合は以下のような形です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>PHP Code Example</title>
</head>
<body>
<h1>PHP コードサンプル</h1>
<?php echo 'Hello World!'; ?>
<a href="http://wordpress.org/">WordPress</a>
</body>
</html>

もしくは

[code lang=”言語名”][/code]

で囲んでも同じように表示されます。

設定画面下部に「引数指定の例」という箇所があるので、ここを参照にするとすぐわかると思います。

SyntaxHighlighterで使える言語

SyntaxHighlighterで使える言語は以下のとおりです。

XML xml, xhtml, xslt, html, xhtml
Plain Text plain, text
CSS css
PHP php
JavaScript js, jscript, javascript
ActionScript3 as3, actionscript3
Bash/shell bash, shell
ColdFusion cf, coldfusion
C# c-sharp, csharp
C++ cpp, c
Delphi delphi, pas, pascal
Diff diff, patch
Erlang erl, erlang
Groovy groovy
Java java
JavaFX jfx, javafx
Perl perl, pl
PowerShell ps, powershell
Python py, python
Ruby rails, ror, ruby
Scala scala
SQL sql
Visual Basic vb, vbnet

パラメーターの設定

パラメーターも設定画面の下部に全て書いてあるので、そちらを参照に使ってみてください。

プレビューでも使用されているハイライトの使い方は以下の通りです。
htmlの5行目をハイライトする場合。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>PHP Code Example</title>
</head>
<body>



<h1>PHP コードサンプル</h1>



<?php echo 'Hello World!'; ?>
<a href="http://wordpress.org/">WordPress</a>
</body>
</html>

5行目がハイライトされます。

 

使い方は非常に簡単で、個人的には記事の中でソースコードを記載するプラグインとしては一番優れていると思ってます。