ソースコードを表示できるようにする方法 『SyntaxHighlighter Evolved』

この記事は約5分で読めます。

こんにちはFPヒデです。今回はいつも投稿している記事部分に『ソースコード』を表示させる方法をおつたえしますね。
 

私はブログの記事を書いている時、WordPressのカスタマイズ方法をお伝えする上で、よく『外観』⇒『テーマ編集』でstyleにコード記述や解説をする場合などに、コードを直接記述して伝えることが多々あります。
 

今までだと、このようにして貼り付けてお伝えしていました。

<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>

 

それを今回お伝えしますプラグイン『SyntaxHighlighter Evolved』を使用することで今後はこのように表示することができるようになります。

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

 
では、早速その方法をお伝えしますね。

プログラミング言語がでてきて分からない?と思うかもしれませんが、「大丈夫ですよ!私も言語は理解出来ていないので^_^。」そんな方でも今回のコードを貼付ける方法を行うことだけなら問題なく出来ますのでご安心下さいね。
 

『SyntaxHighlighter Evolved』をインストール

WordPressの『ダッシュボード』⇒『プラグイン』⇒『新規追加』をクリックします。
 
so-su0
 

続いて『いますぐインストール』をクリックします。
so-su1
 

プラグインのインスタールが済みましたら有効化をします。『プラグインの有効化』をクリックします。
so-su2
 

『SyntaxHighlighter Evolved』の設定

続いて、有効化した『SyntaxHighlighter Evolved』の設定をしていきます。
『ダッシュボード』左側下の『設定』⇒『SyntaxHighlighter』を選択します。
so-su3
 

下記のような画面に移りますので一つ一つ設定をしていきます。
 
so-su4
 
①SyntaxHighlighter Evolvedのバージョン
ここでは、「バージョン2.X」か「バージョン3.X」を選択します。

「バージョン3.X」
⇒ 訪問者が簡単にマウスを使用して(ドラッグかダブルクリック)、コードの部分を強調表示し、クリップボードにへコピーできます。Flashベースボタンを含むツールバーが不要です。
「バージョン2.X」
⇒ オンマウスでツールバーが表示されることと、行の折り返しが許可されています。この機能は現時点でバージョン3はサポートされません。

 

②テーマ
ここでは、ソースコードを表示する際のスタイルを7種類のCSSから選択します。
※良くわからない場合は「Default」のままでOKです。その他のスタイルは慣れてきてから好みで変更してみるのが良いと思います。
 
③すべてのブラシを読み込む
ここでは、ビジュアルエディターで「SyntaxHighlighter」を利用するためのプラグイン「SyntaxHighlighterTinyMCE Button」等を利用する場合はチェックを入れます。
通常はチェックを外した状態でOKです。
 

④一般

行番号を表示する コードボックス左端に行番号を表示する場合はチェックします。
ツールバーを表示する 「バージョン2.x」 ⇒ソースコード右上にコード表示やコピーなどのツールバーが表示されます。

「バージョン3.x」 ⇒ソースコード右上にクレジットマークが表示されます。
自動リンクを有効にする ソースコード中の「URL」に自動的にリンクを貼るかどうかを設定します。
コードボックスの表示を閉じておく コードボックスを収納表示しておき、クリックで開くようにする。
軽い表示モードを使う 行番号やツールバーが表示されません。これらにチェックを入れても、軽い表示モードが優先します。
インデントタブを許容するスマートタブを使う ソースコード内でタブを使うかどうか。
長い行を折り返す(v2.xのみの設定 横スクロールバーを無効にする) 長い行は折り返して表示にして、横スクロールバーを表示させない。

 

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

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

⑦行番号の余白
行番号の余白の設定ですが、通常は「なし」か「自動」でよいかと思います。

⑧タブのサイズ
タブの長さを指定します。

⑨タイトル
コードボックス上部に表示されるテキスト名を指定します。
※指定しない場合は何も表示されないだけです。
 
上記で『SyntaxHighlighter Evolved』の規定の設定は完了です。
続いて、『SyntaxHighlighter Evolved』の使用方法をお伝えいたしますね。
 

『SyntaxHighlighter Evolved』の使用方法

ショートコード使用言語でソースコードを囲んであげます。

[使用言語]~[/使用言語]  例:[PHP]~[/PHP]

 ※使用言語:php, html, css
 
so-su4.5
 
このように[ ]~[/ ]で囲んであげることで下記のような表示になります。
 

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

 
以上で設定及び使用方法の解説は終了です。 すごくきれいな表示になりましたよね。

今回のコード表示方法ですが、やはりプログラミング言語が登場してきますので、難しく感じた方も多いかと思います(私も含め^^。)が、知識の1つとしてでもOKだと思いますので、ご興味のある方は是非やってみてください。

コメントを残す

サブコンテンツ

このページの先頭へ