アフィーロード

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

*

「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

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

  関連記事

変更不可能なWordPressのログインIDを変えてセキュリティアップする方法

ログインIDなんてニックネームみたいなものだからと、適当に付けている人は多いので …

WordPressのログインIDがバレるのをEdit Author Slugで防ぐ

ヤバイよヤバイよ、何て仕様なんだあ。何がヤバイかと言うと、ログインIDがダダ漏れ …

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

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

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

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

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

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

目次
「Table of Contents Plus」プラグインで目次を簡単に作成!

雑誌を読む時は、まず目次から見るという人は多いと思います。 目次を見ると、記事の …

WordPressのテーマをカスタマイズするなら、まず子テーマを作ろう!

そろそろブログのデザインをどうにかしたいなと思うわけですが、どうやらいきなりテー …

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

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

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

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

ワードプレスのロゴ
エックスサーバーにWordPressをインストールする

サーバーを借りました、ドメインも取りました、次が何をするの? それは、WordP …