アフィーロード

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

*

「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をインストールした後やっておきたい事のまとめ

新しいサイトを作って、WordPressをインストールした後に毎回しておくべき事 …

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

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

リビジョンは便利機能だけど、溜まり続けるので何とかするプラグイン「Revision Control」と「Delete Revision Manager」

記事を書いていると、保存する前にうっかりページを移動したり、閉じてしまう事があり …

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

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

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

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

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

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

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

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

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

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

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

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