SyntaxHighlighter Evolved

SyntaxHighlighter Evolvedは、記事の中でソースコードを綺麗に表示できるWordPressプラグインです。

プラグインで動作するSyntax Highlighter(シンタックス・ハイライター)です。

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

はじめに

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

  • 記事の中でエディタのようにソースコードを綺麗に表示できる。
  • WordPressプラグインで動作する「Syntax Highlighter」です。
  • テーマ(デザインスキン)が複数あり、好きなデザインを選べる。
  • 様々なショートコードのパラメーターに対応している。
  • プラグインの管理画面が日本語化されているのでわかりやすい。

使用上の注意

このプラグインを利用して記事を編集する際は、テキストエディタ(HTMLモード)を利用する必要があります。

ビジュアルエディタ(テキストモード)に切り替えると、ソースコードの一部が除去・変更される場合があります。

実際の動作見本

下記は、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 からダウンロード

ショートコードの使い方

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

実際に自分でいろいろ試して使ってみましょう。

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

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

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

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

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

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

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

プラグインの設定

管理画面の場所

プラグインの管理画面は下記の場所にあります。

WordPress管理画面 > 設定 > SyntaxHighlighter

SyntaxHighlighterのバージョン

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

プラグインの管理画面

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

SyntaxHighlighter

まとめ

SyntaxHighlighter Evolvedは、記事の中でソースコードを綺麗に表示できるWordPressプラグインです。

ブログの記事にソースコードを表示して解説する機会がある人に役に立つプラグインです。

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

スポンサーリンク