WordPressでソースコードを綺麗に表示するプラグイン「SyntaxHighlighter Evolved」の使い方

   2015/04/16

WordPressテーマ「Gush2」でカスタマイズした点をブログで書こうと思いましたが、ソースコードを綺麗に表示したいと思い、まずはそちらの記事を書くことにしました。

WordPressでソースコードを綺麗に表示するには、プラグイン「SyntaxHighlighter Evolved」を使用すると良いようです。

参考→ソースコードをキレイに表示するWordPressプラグイン「SyntaxHighlighter Evolved」 | OZPAの表4

スポンサーリンク

SyntaxHighlighter Evolvedのインストール方法

syntaxhighlighter_wordpress_sourcecode
▲WordPress管理画面のプラグイン追加から、「SyntaxHighlighter Evolved」を検索します。

syntaxhighlighter_wordpress_sourcecode
▲今すぐインストールします。

syntaxhighlighter_wordpress_sourcecode
▲プラグインを有効化します。

SyntaxHighlighter Evolvedの使用法

SyntaxHighlighter Evolvedの使い方は簡単です。

[表記する言語]ソースコード[/表記する言語]のように記述します。

例えば、CSSを囲んでみましょう。

[CSS]

h2 {

font-size: 36px;

line-height: 1.5;

}

[/CSS]

すると、表示は以下のようになります。
[css]
h2 {
font-size: 36px;
line-height: 1.5;
}
[/css]

となります。

SyntaxHighlighter Evolvedのテーマを決める

SyntaxHighlighter Evolvedには、テーマが7つ用意されています。

どのような色でハイライトするかということです。

自分のサイトに合わせて選択してみましょう。

以下に、SyntaxHighlighter Evolvedで選択できるテーマの名称一覧を示します。

syntaxhighlighter_wordpress_sourcecode
▲テーマは、

  • Default
  • Django
  • Eclipse
  • Emacs
  • Fade to Grey
  • Midnight
  • RDark

の7種類から選択できます。

以下に、各テーマのプレビューを示します。

Defaultのテーマ

syntaxhighlighter_wordpress_sourcecode
▲Defaultのテーマです。一番シンプルです。

Djangoのテーマ

syntaxhighlighter_wordpress_sourcecode
▲Djangoのテーマです。緑です。

Eclipseのテーマ

syntaxhighlighter_wordpress_sourcecode
▲Eclipseのテーマです。

Emacsのテーマ

syntaxhighlighter_wordpress_sourcecode
▲Emacsのテーマです。

Fade to Greyのテーマ

syntaxhighlighter_wordpress_sourcecode
▲Fade to Greyのテーマです。

Midnightのテーマ

syntaxhighlighter_wordpress_sourcecode
▲Midnightのテーマです。

RDarkのテーマ

syntaxhighlighter_wordpress_sourcecode
▲RDarkのテーマです。

ブログに合わせて、適宜選択してみてください。

関連記事

  • このエントリーをはてなブックマークに追加
  • Pocket

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。