ワードプレスやブログ運営に役立つ情報をまとめています。WordPressプラグイン、WordPressテーマ(テンプレート)の情報をわかりやすく紹介します。

SyntaxHighlighter Evolved - 記事でソースコードを綺麗に表示できるWordPressプラグイン

このエントリーをはてなブックマークに追加

記事公開 2013.06.14

最終更新 2016.12.31

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を指定しています。

code

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

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

code

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

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

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

管理画面の設定

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

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

syntaxh_img01

まとめ

SyntaxHighlighter Evolvedは、記事にソースコードを表示して解説する機会がある人に役立ちます。WebデザイナーやプログラマーなどがWebサイト上でソースコードを解説する際に利用すると良いでしょう。

スポンサーリンク

最後までお読み頂きありがとうございます

ネタワンは皆様の善意に支えられています。
この記事の内容が役に立ったと思ったら、記事をソーシャルメディアで共有してね。

このエントリーをはてなブックマークに追加

RSSフィードを購読する

follow us in feedly

関連記事

コメント

  1. この記事へのコメントはありません。

CAPTCHA


ネタワンを購読する

  • Twitter
  • Facebook
  • Google Plus
  • Feedly
  • RSS
  • Push7

初心者向け

WordPress使い方ガイド
WordPress入門

スポンサーリンク

ワードプレステーマTCD

ネタワンでも利用しているTCDのWordPressテーマを紹介します。様々な種類のテーマが販売されています。

CORE(TCD027)

WordPressテーマ「CORE (TCD027)」

マガジンスタイルのメディアサイト(ポータルサイト)を構築できるWordPressテーマ


ワードプレステーマTCDの詳細&レビューはこちら