SyntaxHighlighter Evolved の使い方

エディタのように綺麗にソースコードを表示できるプラグイン – SyntaxHighlighter Evolved の使い方

Syntax Highlighter Evolved

Pocket

Syntax Highlighterとは

Webサイト上でエディタのように綺麗にソースコードを表示できるプラグインです。HTMLやCSSはもちろん、PHPやJavaScriptなど、多くの言語の構文強調表示に対応したスクリプトです。
このプラグインを利用すると、ソースコードがエディタがのように綺麗に表示できます。見栄えと使い勝手が良いので非常に役に立つプラグインです。Webサイト上でHTML、CSSやプログラミングのコードを解説する機会が多い方は、このプラグインを活用しましょう。

目次

Syntax Highlighter系のプラグイン

Syntax Highlighter系のプラグインで著名なものは Crayon Syntax HighlighterSyntaxHighlighter Evolved があげられます。今回は SyntaxHighlighter Evolved をインストールしてみます。

SyntaxHighlighter Evolvedをインストールする

プラグインのインストール画面に移動

プラグインのインストール画面に移動

WordPressの管理画面・ダッシュボードを表示します。左側のメニューの一覧から プラグイン > 新規追加 を選びプラグインのインストール画面に移動します。

SyntaxHighlighter Evolvedを検索する

SyntaxHighlighter Evolvedを検索する

プラグインのインストール画面に移動したら、検索窓に「SyntaxHighlighter Evolved」と入力し プラグインの検索 をクリックします。WordPress プラグインディレクトリ からプラグイン「SyntaxHighlighter Evolved」を自動的にインストールできます。

SyntaxHighlighter Evolvedのインストール

SyntaxHighlighter Evolvedのインストール

プラグインのインストール画面で検索結果が表示されます。検索結果の一覧の中から「SyntaxHighlighter Evolved」を探し、 いますぐインストール をクリックします。現在の最新バージョンは SyntaxHighlighter Evolved バージョン 3.1.13 です。

プラグイン:SyntaxHighlighter Evolvedの有効化

プラグイン:SyntaxHighlighter Evolvedの有効化

プラグイン SyntaxHighlighter Evolved のインストールが完了しました。インストール完了時に表示された画面の プラグインを有効化 をクリックし、プラグイン:SyntaxHighlighter Evolved を有効にします。

プラグイン:SyntaxHighlighter Evolved が有効化

プラグイン:SyntaxHighlighter Evolved が有効化されました。有効化をクリックするとプラグイン:SyntaxHighlighter Evolved が有効化され、「インストール済みプラグイン」の画面が表示されます。プラグイン:SyntaxHighlighter Evolved が有効化された状態で表示されています。

SyntaxHighlighter Evolvedの設定

SyntaxHighlighter Evolvedの設定画面へ移動

SyntaxHighlighter Evolvedの設定

WordPressの管理画面・ダッシュボードを表示します。左側のメニューの一覧から 設定 > SyntaxHighlighter を選び SyntaxHighlighter Evolved の設定画面に移動します。

SyntaxHighlighter Evolvedの設定

SyntaxHighlighter Evolvedの設定

SyntaxHighlighter Evolvedのバージョン

バージョン2バージョン3 を選択します。

  • バージョン2
    オンマウスでツールバーが表示されることと、行の折り返しが可能となります(バージョン3では不可能です)
  • バージョン3
    ツールバーは表示されません。また、長い行の場合は横スクロールバーが表示されます。
    ソースコードのコピーはドラッグかダブルクリックで選択して行います。

テーマ

ソースコードの表示スタイルを以下の7種類のCSSから選択できます。

Default
Default

Django
Django

Eclipse
Eclipse

Emacs
Emacs

Fade to Grey
FadeToGrey

Midnight
Midnight

RDark
Rdark

すべてのブラシを読み込む

通常はチェックを外したままで構いませんが、ビジュアルエディターでSyntaxHighlighterを利用するためのプラグイン「SyntaxHighlighter TinyMCE Button」等を利用する場合はチェックを入れます。

SyntaxHighlighter Evolvedの規定の設定

ここからの設定項目はソースコードを入力する際にその都度設定できますが、Default値としてここで指定します。

一般:行番号を表示する

コードボックス左端に行番号を表示する場合はチェックします。

一般:ツールバーを表示する

  • バージョン2
    ソースコード右上にコード表示やコピーなどのツールバーが表示されます。
  • バージョン3
    ソースコード右上にクレジットマークが表示されます。

一般:自動リンクを有効にする

ソースコード中の URL に自動的にリンクを貼る。

一般:コードボックスの表示を閉じておく

コードボックスを収納表示し、 クリックで展開するようにする。

一般:軽い表示モードを使う

行番号やツールバーが表示されない

一般:インデントタブを許容するスマートタブを使う

ソースコード内でタブを使う

一般:長い行を折り返す(v2.xのみ、横スクロールバーを無効にする)

長い行は折り返して表示にして、横スクロールバーを表示させない。

一般:追加のCSSのclass名

コードボックス内のDivタグに対して、classを指定したCSSを記入する。

一般:行番号の開始

ソースコードの行数を始める番号

一般:行番号の開始

ソースコードの行数を始める番号

一般:行番号の余白

行番号の桁数を指定する

一般:タブのサイズ

タブの長さ

一般:タイトル

コードボックス上部に表示されるテキスト

設定が完了したら 変更を保存 をクリックします。

SyntaxHighlighter Evolvedの使い方

表示したいソースコードをショートコードで囲みます

投稿の編集 画面のテキストウィンドウを利用して、ソースコードの種別ごとに用意された brushes のショートコードで表示したいソースコードを囲みます。

CSSのソースコードを表示したい場合は

入力例

[css]
a:hover {
	color: #3366ff;
	text-decoration: none;
}
[/css]

表示例

a:hover {
	color: #3366ff;
	text-decoration: none;
}

PHPのソースコードを表示したい場合は

入力例

[php]
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>
[/php]

表示例

<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>

htmlのソースコードを表示したい場合は

入力例

[html]
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>SyntaxHighlighter Evolvedの使い方</title>
[/html]

表示例

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>SyntaxHighlighter Evolvedの使い方</title>

ソースコードの種別ごとに用意された brushes の一覧

ソースコードの種別 Brushes
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

ショートコードで指定可能なパラメータ

ショートコードで渡すことができるパラメータと説明です。 有効・無効などの指定には true または false を渡してください。

ショートコードの一覧

パラメータ 説明
lang/language ハイライトするコードの言語
autolinks 自動リンクの有効・無効
classname コードボックスに追加するCSSのclass
collapse コードボックスをデフォルトの状態で閉じるかどうか。コードボックスを開くにはクリックが要求されます。
firstline 行番号の出力の際に、最初の行の番号を表す数値
gutter 左側に行番号を配置するかどうか
highlight ハイライトさせる行番号のリスト。範囲でも指定可能。例: 2,5-10,12
htmlscript HTML/XML をハイライトするかどうか
light 行番号やツールバーを無効にする軽い表示モードのオン・オフ
padlinenumbers 行番号の余白。有効な値は、 false(余白なし), true (自動)、数値(余白)
title(v3のみ) コードの前に表示される表題テキスト
toolbar ツールバーのオン・オフ(v2のボタン、v3のクエッションマーク)
wraplines (v2のみ) 折り返しの有効・無効

language

入力例

[code lang="php"]
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>
[/code]

表示例

<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>

autolinks

入力例

[html autolinks="true"]
<a href= "http://wordpresscollege.org" >WordPress College</a>
[/html]

表示例

<a href= "http://wordpresscollege.org" >WordPress College</a>

classname

利用している SyntaxHighlighter Evolved のテーマのCSSファイル
Default の場合
wp-content > plugins > syntaxhighliter > syntaxhighliter2 styles > shThemeDefault.css の最後に下記のように変更したい箇所を追記します。

.mystyle .line.alt2
{
  background-color: #DCDCDC !important;
}
.mystyle .line .content
{
	border-left: 3px solid #4169E1 !important;
	color: #000 !important;
}
.mystyle .line .number
{
	color: #000 !important;
}

入力例

[php classname="mystyle"]
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>
[/php]

表示例

<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>

collapse

入力例

[php collapse="true"]
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>
[/php]

表示例

<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>

firstline

入力例

[php firstline="51"]
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>
[/php]

表示例

<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>

gutter

入力例

[php gutter="false"]
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>
[/php]

表示例

<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>

highlight

入力例

[php highlight="2,4-5"]
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>
[/php]

表示例

<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>

htmlscript

入力例

[php htmlscript="true"]
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>
[/php]

表示例

<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>

light

入力例

[php light="true"]
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>
[/php]

表示例

<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>

padlinenumbers

入力例

[php padlinenumbers="4"]
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>
[/php]

表示例

<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>

title

入力例

[php title="表題テキスト"]
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>
[/php]

表示例

SyntaxHighlighter-表題テキスト

toolbar

入力例

[php toolbar="false"]
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>
[/php]

表示例

<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>

wraplines

入力例

[php wraplines="true"]
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>
[/php]

表示例

<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title(); ?></title>
	<?php wp_head(); ?>
</head>

Syntax Highlighterでソースコードがはみ出したときの解決法

Syntax Highlighterのバージョン2を利用して、行の折り返し(wraplines)を有効にしているにもかかわらずスマートフォンなどでソースコードがはみ出す場合があります。そんなときの解決方法は下記のコードをstylesheetに書き足してください。

.syntaxhighlighter table {
word-break: break-all;
}