WordPressにSyntaxHighlighterを使ってソースコードを載せる方法

WordPressにSyntaxHighlighterを使ってソースコードを載せる方法

WordPressプラグイン「SyntaxHighlighter」を使おう

WordPressで下記のように記事内にソースコードを記載するには「SyntaxHighlighter」というプラグインを使用すると簡単だ。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>WordPressにソースコードを載せる方法</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header class="header">
      <h1 class="logo">
        <a href="/">SyntaxHighlighterの使い方</a>
      </h1>
      <nav class="global-nav">
        <ul>
          <li class="nav-item"><a href="#">HOME</a></li>
          <li class="nav-item"><a href="#">SyntaxHighlighterを使おう</a></li>
          <li class="nav-item"><a href="#">インストール</a></li>
          <li class="nav-item"><a href="#">設定</a></li>
        </ul>
      </nav>
    </header>
  </body> 
</html>

「SyntaxHighlighter」をインストールしよう

WordPressのプラグイン新規追加から、検索窓で「SyntaxHighlighter」と入力し、インストール。
プラグイン管理画面から、プラグインを有効化して準備完了だ。

「SyntaxHighlighter」の設定

基本的にはデフォルトで問題ない。
細かく見ていくと、テーマをいくつか選べたり、行番号の開始を指定できたりするので解説していく。

SyntaxHighlighterのバージョン

「バージョン2.x」と「バージョン3.x」がある。
ここは最新(2017/12/30 現在)の「バージョン3.x」に設定しておこう。
「バージョン2.x」では長いソースコードの行を折り返して表示できるが、今後「バージョン3.x」でも対応されると思う。(あくまで予想…)

テーマ

SyntaxHighlighterには8パターンの表示テーマが用意されている。

・デフォルト

・Django

・Eclipse

・Emacs

・Fade to Gray

・Midnight

・RDark

・なし

当サイトで使用しているテーマは「Django」だ。

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

HTMLと同じpreタグを使用したい場合はここのチェックを入れる。※対応言語をすべて読み込ませるため、表示が遅くなる可能性あり。
チェックを入れなかった場合ソースコードが文字化けする場合がある。この文字化けの対策はこのページの最後に解説する。ちなみに当サイトもチェックは外してある。そして文字化けしていたので、後述の対策を施している。

規定の設定

・行番号

行番号の表示、非表示が選択できる。

・ツールバー

上記の画像の赤枠の「SyntaxHighlighter」の表示、非表示が選択できる。
外していて問題ない。

・自動リンク

チェックを入れると、ソースコード内のURLを自動でリンク設定してくれる。

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

チェックを入れると、ページを読み込んだ際にソースコードを折りたたんだ状態で表示し、上記の「ソースコードを表示」をクリックして全てのソースコードが表示される。
長いソースコードをたくさん記述する場合はチェックを入れておくと、ページ全体がスッキリする。

・軽い表示モードを使う

チェックを入れると、列番号やツールバーを削除し簡易表示にできる。

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

コード内でタブを使用する。

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

スクロールバーを非表示にし、折り返し表示にする。(v2.xのみ、設定可能)

・追加のCSSのclass名(複数可能)

ボックスのdivタグにclassを指定できる。基本的には空欄で問題ない。

・行番号の開始

ソースコードボックス左側の行番号の始まりの数字を設定できる。
デフォルトの「1」のままで大丈夫だろう。

・行番号の余白

行番号の桁数を指定できる。2に設定した場合行番号が「1」→「01」、4に設定した場合「1」→「0001」と表示される。
3〜4で設定しておくのが無難だ。

・タブのサイズ

tabキーでインデントさせたときの余白の長さを指定できる。こちらも3〜5くらいで設定しておこう。

・タイトル

コードボックスの上部に表示されるタイトルを指定できる。

以上で設定は完了だ。
各自、好みの表示スタイルに設定できいれば幸いだ。

「SyntaxHighlighter」の使い方

記事投稿画面をテキスト表示にし、設定したいソースコードの部分を各種タグで囲う。

タグ一覧

<pre>タグを使用する方法とショートコードを使用する方法がある。
<pre>タグを使用する場合は、「すべてのブラシを読み込む」にチェックを入れよう。
ただ、上にも書いたように
<pre>タグを使用すると表示が遅くなる可能性があるため、ショートコードを使用することをお勧めする。

・<pre>タグを使用する場合

HTML → <pre class=”brush:html”> ソースコード</pre>

css → <pre class=”brush:css”> ソースコード</pre>

PHP → <pre class=”brush:php”> ソースコード</pre>

JavaScript → <pre class=”brush:js”> ソースコード</pre>

Ruby → <pre class=”brush:ruby”> ソースコード</pre>

etc…

・ショートコードを使用する場合

HTML → [html]ソースコード[/html]

css → [css]ソースコード[/css]

php → [php]ソースコード[/php]

JavaScript → [js]ソースコード[/js]

Ruby → [ruby]ソースコード[/ruby]

etc…

上記のように、各種ソースコードに合わせてタグで囲もう。
ショートコードを使用して、文字化けする場合は下記の対策を施してくれ。

「SyntaxHighlighter」でソースコードが文字化けする現象

「すべてのブラシを読み込む」のチェックを外し、ショートコードを使用した場合、ソースコードが文字化けすることがある。
この場合は、下記のソースコードをプラグイン「SyntaxHighlighter」のsyntaxhighlighter.phpへ追記してほしい。

パスは public_html/○○○○/wp(WordPressインストール先)/wp-content/plugins/syntaxhighlighter/syntaxhighlighter.php

syntaxhighlighter.phpの501〜506行目

// The callback function for SyntaxHighlighter::encode_shortcode_contents()
	function encode_shortcode_contents_callback( $atts, $code = '', $tag = false ) {
		$this->encoded = true;
		$code = str_replace( array_keys($this->specialchars), array_values($this->specialchars), htmlspecialchars( $code ) );
		return '[' . $tag . $this->atts2string( $atts ) . "]{$code}[/$tag]";
	}

上記のコードを、下記と差し替えてほしい。

// The callback function for SyntaxHighlighter::encode_shortcode_contents()
	function encode_shortcode_contents_callback( $atts, $code = '', $tag = false ) {
		$this->encoded = true;
		//$code = str_replace( array_keys($this->specialchars), array_values($this->specialchars), htmlspecialchars( $code ) );
  $code = str_replace( array_keys($this->specialchars), array_values($this->specialchars),  $code );
		return '[' . $tag . $this->atts2string( $atts ) . "]{$code}[/$tag]";
	}

さらに509〜515行目

// The callback function for SyntaxHighlighter::decode_shortcode_contents()
	// Shortcode attribute values need to not be quoted with TinyMCE disabled for some reason (weird bug)
	function decode_shortcode_contents_callback( $atts, $code = '', $tag = false ) {
		$quotes = ( user_can_richedit() ) ? true : false;
		$code = str_replace(  array_values($this->specialchars), array_keys($this->specialchars), htmlspecialchars_decode( $code ) );
		return '[' . $tag . $this->atts2string( $atts, $quotes ) . "]{$code}[/$tag]";
	}

こちらも下記と差し替えてほしい。

// The callback function for SyntaxHighlighter::decode_shortcode_contents()
	// Shortcode attribute values need to not be quoted with TinyMCE disabled for some reason (weird bug)
	function decode_shortcode_contents_callback( $atts, $code = '', $tag = false ) {
		$quotes = ( user_can_richedit() ) ? true : false;
		//$code = str_replace(  array_values($this->specialchars), array_keys($this->specialchars), htmlspecialchars_decode( $code ) );
  $code = str_replace(  array_values($this->specialchars), array_keys($this->specialchars),  $code );
		return '[' . $tag . $this->atts2string( $atts, $quotes ) . "]{$code}[/$tag]";
	}

全てコピペでOK。
以上で文字化け対策は完了だ。
これで正常に表示されるはずだ。

WordPressカテゴリの最新記事