SyntaxHighlighter Evolved

SyntaxHighlighter Evolvedは、記事の中でソースコードを綺麗に表示できるプラグインです。WordPressプラグインで動作するSyntax Highlighter(シンタックス・ハイライター)です。

使い方は簡単です。ショートコードを利用して記述します。HTMLやプログラミングのソースコードをWebサイト上で解説する機会が多い方は、このプラグインを利用すると便利です。

はじめに

使用上の注意

このプラグインを利用して記事を編集する際は、テキストエディタ(HTMLモード)を利用する必要があります。ビジュアルエディタ(テキストモード)に切り替えると、ソースコードの一部が除去・変更される場合があります。

このプラグインが優れている点

  1. 記事にソースコードを表示し、ソースコードの解説などに使える。
  2. Webサイト上でエディタのようにソースコードが見やすくなる。
  3. ブウラウザ上でソースコードをコピー&ペーストして使える。
  4. テーマ(スキン)が複数あり、好きなデザインを選べる。
  5. 様々なショートコードのパラメーターに対応している。

実際の動作見本

下記は、SyntaxHighlighter EvolvedのVer.3.xが実際に動作する見本です。
下記の様に記事上にソースコードを綺麗に表示することができます。

<!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>
    <p><?php echo 'Hello World!'; ?></p>
    <p>この行をハイライトしています。</p>
    <div class="foobar">フッター</div>
    <p><a href="https://wordpress.org/">WordPress</a></p>
</body>
</html>
#button {
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #fff;
}
<html>
<head>
<title>時刻</title>
<script type="text/javascript">
<!--
function jikoku() {
    dd = new Date();
    document.F1.T1.value = dd.toLocaleString();
    window.setTimeout("jikoku()", 1000);
}
// -->
</script>
</head>
<body onload="jikoku()">
<form name="F1" action="#">
<input type="text" name="T1" size=50>
</form>
</body>
</html>

対応言語(language)

SyntaxHighlighter Evolvedは、下記の言語に対応しています。
ショートコードのパラメーターのlanguage(lang)で指定する言語のことです。

  1. actionscript3
  2. bash
  3. clojure
  4. coldfusion
  5. cpp
  6. csharp
  7. css
  8. delphi
  9. erlang
  10. fsharp
  11. diff
  12. groovy
  13. html
  14. javascript
  15. java
  16. javafx
  17. matlab (keywords only)
  18. objc
  19. perl
  20. php
  21. text
  22. powershell
  23. python
  24. r
  25. ruby
  26. scala
  27. sql
  28. vb
  29. xml

インストール方法

管理画面から検索してインストールして下さい。もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

  1. WordPress管理画面 > プラグイン > 新規追加 >「SyntaxHighlighter Evolved」で検索
  2. WordPress.org からダウンロード

ショートコードの使い方

SyntaxHighlighter Evolvedのショートコードの使い方は簡単です。テキストエディタ(HTMLモード)で、下記のようにショートコードとパラメーターを組み合わせて記述します。実際に自分でいろいろ試して使ってみましょう。

CODEを利用して言語を指定する場合

基本形は、code(又はsourcecode)の中にlanguage(またはlang)で言語の種類を指定します。下記例はHTMLを指定しています。

ショートコードとパラメーターの組み合わせ例

下記のようにパラメーターを組み合わせて記述することもできます。

上記の場合は、言語をCSS、見出しの文言を指定、10行目をハイライトにしています。

利用できるパラメーターについて

SyntaxHighlighter Evolvedで利用できるパラメーターについては、プラグインの管理画面の下の方に説明が記載されていますので、そちらを参照して下さい。

管理画面の設定

このプラグインの管理画面は、日本語化されています。説明は不要と思われますので、説明は省略します。初期設定のままでも利用できますが、必要に応じて設定を変更しましょう。

SyntaxHighlighterのバージョンは「3.x」がお勧めです。テーマでスキンの変更もできます。

まとめ

SyntaxHighlighter Evolvedは、記事にソースコードを表示して解説する機会がある人に役立ちます。

WebデザイナーやプログラマーなどがWebサイト上でソースコードを解説する際に利用すると良いかもしれません。

スポンサーリンク