ソースコードを整形して表示(SyntaxHighlighter Evolved)

HTMLでソースコードを整形して表示するのは、大変な作業です。「SyntaxHighlighter Evolved」というプラグインを活用します。

はじめに

「SyntaxHighlighter Evolved」というプラグインを使用して、ソースコードを整形して表示します。
・「SyntaxHighlighter Evolved」をインストール
・「SyntaxHighlighter Evolved」を初期設定
・「SyntaxHighlighter Evolved」をCSSでカスタマイズ
・「SyntaxHighlighter Evolved」でソースコードを表示

使用環境

・WordPress      :Version 4.2.3

「SyntaxHighlighter Evolved」をインストール

WordPressのプラグインの管理ページで、「SyntaxHighlighter Evolved」プラグインを検索してインストールし、有効化します。
install_syntaxhighlighter_001

「SyntaxHighlighter Evolved」を初期設定

設定はデフォルトのままで使用します。
install_syntaxhighlighter_002

「SyntaxHighlighter Evolved」をCSSでカスタマイズ

デフォルトのテーマを使用しているので、shThemeDefault.cssをカスタマイズして、配色や行間などの見栄えを整えます。

<shThemeDefault.cssの格納ディレクトリ>
[WordPressのルート]/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles

<変更前>

.syntaxhighlighter {
  background-color: white !important;
}
.syntaxhighlighter .line.alt1 {
  background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #e0e0e0 !important;
}
.syntaxhighlighter .line.highlighted.number {
  color: black !important;
}
.syntaxhighlighter table caption {
  color: black !important;
}
.syntaxhighlighter .gutter {
  color: #afafaf !important;
}
.syntaxhighlighter .gutter .line {
  border-right: 3px solid #6ce26c !important;
}
.syntaxhighlighter .gutter .line.highlighted {
  background-color: #6ce26c !important;
  color: white !important;
}

<変更後>
3行目から5行目で表示位置を整えました。

.syntaxhighlighter {
  background-color: white !important;
  width: 98% !important;
  margin: -0.8em 6px 0.5em !important;
  padding: 8px 0 8px 0 !important;
}
.syntaxhighlighter .line.alt1 {
  background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #e0e0e0 !important;
}
.syntaxhighlighter .line.highlighted.number {
  color: black !important;
}
.syntaxhighlighter table caption {
  color: black !important;
}
.syntaxhighlighter .gutter {
  color: #afafaf !important;
}
.syntaxhighlighter .gutter .line {
  border-right: 3px solid #6ce26c !important;
}
.syntaxhighlighter .gutter .line.highlighted {
  background-color: #6ce26c !important;
  color: white !important;
}

「SyntaxHighlighter Evolved」でソースコードを表示

使用方法は、WordPress上の「SyntaxHighlighter Evolved」の設定の最下部に表示されているので、簡単に調べることができます。
install_syntaxhighlighter_003
基本的な使用方法は、表示するソースコードを使用例のようにタグで囲みます。オプションは、通常「language」オプションで”css”や”php”等、表示するソースコードの言語を指定します。その他は、行を強調する「highlight」でしょうか。ハイライト表示する行番号をカンマ区切りで指定します。タイトル表示を付け加える「title」も使用したくなりましたが、表示を整えるのが大変で断念しました。

<使用例>
using_syntaxhighlighter-evolved_001

おわりに

<表示例>

.comment-reply-title {
	font: 700 normal 14px Osaka-mono, "MS Gothic", monospace;
	text-decoration: underline;
}

「SyntaxHighlighter Evolved」を使用して、ソースコードを整形して表示することができました。気になる点としては、表示速度が若干遅く、整形されたソースコードが表示される前に、Preformattedテキストの表示が見えることが多いです。

補足

「SyntaxHighlighter Evolved」のバージョン:3.1.11

関連記事

  1. 日本語の取り扱いを改善(WP Multibyte Patch)
  2. ページにアイコンを表示(Font Awesome 4 Menus)
  3. ソースコードを整形して表示(SyntaxHighlighter Evolved)
  4. パンくずリストを作成(Breadcrumb NavXT)
  5. お問い合わせフォームを作成(Contact Form 7)
  6. サイトマップ(ページ索引)を作成(PS Auto Sitemap)

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

コメント記入欄

※メールアドレス(任意入力)は非公開です。コメントはお気軽にどうぞ!

内容を確認して、「コメント送信」ボタンを押してください。

post date*

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)