アフィーロード

アフィリエイトがあるじゃないか!

*

「SyntaxHighlighter Evolved」と「SH TinyMCE Button」を使ってコードをスマートに表示する

    2016/05/21

SyntaxHighlighterEvolved-thum

相変わらず四苦八苦しているのですが、今回はソースコードをどうやって綺麗にブログに掲載するかです。

本来、ブラウザ上には表示されないソースコードをブラウザ上に表示させるのは厄介なんです。

ブラウザにソースコードを表示する

改行やスペースなどの表示は、整形済みテキスト<pre>タグを使うと可能です。

特殊文字は、文字実体参照という面倒なものを使用して表示しますが、幸いビジュアルエディタに入力すると自動的に変換してくれるので楽です。

ここまでなら、それほど手間はかかりませんが、プログラムコードというのは、そのままだと見づらいので、色分けしたり、行番号を付けたりしたいですよね。

この大変な色分け作業などを自動でしてくれて、綺麗に整形までしてくれるツールにJavaScriptで作られた「SyntaxHighlighter」というのがあります。

表示例

h2 {
 background: #DCFFDC;
 color: #1a1a1a;
 font-size: 20px;
 line-height: 30px;
 margin-bottom: 20px;
 padding-top: 10px 20px 10px 20px;
}

綺麗にコードを表示してくれるツールのプラグイン版、「SyntaxHighlighter Evolved」を使用する事にしました。

SyntaxHighlighter Evolvedを導入する

プラグインを追加する

  1. 管理画面のプラグインから新規追加をクリック。
  2. 検索窓にプラグイン名「SyntaxHighlighter Evolved」を入力してEnter。
  3. 見つかったら、いますぐインストールをクリック。
  4. プラグインを有効化をクリック。

設定する

SyntaxHighlighterの設定

syntaxhighlighter1

SyntaxHighlighterのバージョン
バージョン3でいいと思いますが、行を折り返して表示したい時は、バージョン2を選択します。
テーマ
DefaultとEclipsは白背景。その他は黒背景です。
すべてのブラシを読み込む
チェックを入れると多少重くなるかもしれません。ただ後述するプラグインを使用したいのでチェックを入れています。
一般
行番号やツールボックスの表示・非表示を設定できます。
追加のCSSのclass名
<div>で囲んでいるボックス内に、独自のCSSを追加する時に使用します。
行番号の開始
最初の番号を設定できます。10とか100とか
行番号の余白
桁数を指定する事で、左に余白を付けて、右揃えしてくれます。
タブのサイズ
左スペースの最小幅を指定します。
タイトル
ボックスにタイトルを表示します。

下の方にプレビューがあるので、設定の確認を簡単に行えます。

使用方法

[]の中にHTMLやPHPと該当するプログラム名を入れて囲みます。

[CSS]
h2 {
 background: #DCFFDC;
 color: #1a1a1a;
 font-size: 20px;
 line-height: 30px;
 margin-bottom: 20px;
 padding-top: 10px 20px 10px 20px;
}
[/CSS]

 注意点として、テキストエディタで書き込む必要があります。ビジュアルエディタで編集すると整形が崩れます。[]で囲むのもちょっと面倒に感じたので便利なプラグインを導入しました。

SyntaxHighlighter TinyMCE Buttonを導入する

SyntaxHighlighter Evolvedを使いやすく整形崩れもなくしたプラグインです。

名前が示す通り、「TinyMCE」にソースコードを囲むボタンを追加してくれます。

TinyMCEについては、TinyMCE Advancedを導入してブログ記事の作成を捗らせようを参考にしてください。

プラグインを追加する

  1. 管理画面のプラグインから新規追加をクリック。
  2. 検索窓にプラグイン名「SyntaxHighlighter TinyMCE Button」を入力してEnter。
  3. 見つかったら、いますぐインストールをクリック。
  4. プラグインを有効化をクリック。

設定方法

設定の「SH TinyMCE Button」から設定画面に移動できます。

SHTinyMCEButton1

使用中のプラグイン
Evolved以外にもSyntaxHighlighter系のプラグインがあるようです。
ボタン
ビジュアルエディタに「pre」と「CODE」のボタンが追加されます。
ウインドウサイズ
ポップアップウインドウの大きさ。
ボタンをツールバーの
ツールバーの何行目にボタンを追加するか。
2.ボタンのデフォルト設定
ドロップダウンで表示されるプログラム言語などを設定できます。

※「SyntaxHighlighter Evolved」設定のすべてのブラシを読み込むにチェックが入っていないと正常に使用出来ません。

使用方法

ツールバーに「pre」と「CODE」が追加されています。

SHTinyMCEButton2

「pre」をクリックすると、ポップアップウインドウが表示されます。

SHTinyMCEButton3

言語の選択
ドロップダウンでプログラム言語が表示されます。
行番号を表示
行番号の表示・非表示。
行番号の開始番号
最初の番号を設定します。10とか100とかも出来ます。
強調表示する行
強調したい行に背景色を付ける。カンマで区切ると複数行を指定できます。

「CODE」をクリックすると、ポップアップウインドウに直接ソースコードを入力して、エディタに貼り付けられます。エディタに直接コードを書いて囲むより、こちらの方が良いかもしれません。

SHTinyMCEButton4

まとめ

プラグインを3個使って、やっと正常に利用できました。

ひと苦労しましたが、綺麗にソースコードが表示できて気持ち良いですねw

 - WordPress, プラグイン

Message

メールアドレスが公開されることはありません。

  関連記事

ブログのファビコンを変更しました

ブログのファビコンをSTINGER5のまま放置していたので、そろそろ変えることに …

AddQuicktagプラグインでタグ打ちをとことん手抜きしよう

TinyMCE Advancedで基本的な機能は揃える事が出来たのですが、他にも …

TinyMCE Advancedを導入してブログ記事の作成を捗らせよう

ビジュアルエディタは楽で良いですね。 テキストエディタだと、コードとテキストがご …

Akismetでスパムコメントをフィルタリングする

我がブログ最初の訪問者はスパムサイト様でした(笑)どこから嗅ぎ付けるの分かりませ …

STINGER5の子テーマでCSSが上手く反映されない原因を解決!

子テーマを作ったので、取り合えず文字サイズでも変更してみようと思ったのですが、な …

挿入画像のデフォルト値を変更して無駄な手間を省こう

WordPressで画像を挿入する時の話しですが、気が付いたら毎度ブログに表示す …

Google Analytics Dashboard for WPを導入してWordPressで解析確認!エラーが出た時の対処方法あり

Google Analyticsでアクセスを確認したいけど、その度にログインする …

WordPressで定番のメールフォーム用プラグイン「Contact Form 7」を導入する

ブログには、お問い合わせ用のメールフォームが必須ですよね。 記事の内容に関する問 …

Google ChromeでWPの管理画面が崩れた時の対処方法

みなさん普段、WordPressの作業をどのブラウザでしていますか? 私は、Fi …

Google Analytics by Yoastを使えばトラッキングコードを貼るのも簡単です!

解析ツールの定番Google Analytics(アナリティクス)を導入するとき …