ソースコードを色分け表示するSyntax系プラグイン3選

2012年6月23日 2018年5月31日

Web屋やっていて技術的な調査をしていると、備忘録としてブログをメモ代わりにしたくなる人は多いよね。
自分もだいぶ先人様たちのすばらしいブログにどれほど助けられたか。
Wordpressの便利そうなプラグインないかな~とちゃちゃっとぐぐったら色々出てくる。すばらしい時代。Googleさんありがとう。

で、やっぱり技術力があり、なおかつ器の大きい方々は、サンプルコードを用意してくれているわけですね。
そのサンプルコードがあるお陰で、プラグイン本家サイトが英語や仏語だったとしても、コードを読み解けばなんとなく理解できるというもの。

そんな大先輩方が多く使用していると思われる、ソースコードを表記するのに便利なプラグインをまとめたよ。

SyntaxHighlighter Evolved (ver.3.x)

有名なプラグイン。より使いやすくなってVer3系として進化。

SyntaxHighlighter Evolvedの使い方

WordPress管理画面の投稿フォームで表示したいソースコードを記入。
そのコード部分の上下を[html]~[/html]ではさむ。

cssやphpなど他の言語も対応。

[html]~[/html]の部分を書き換えてやればOK

SyntaxHighlighter Evolved
http://wordpress.org/extend/plugins/syntaxhighlighter/

Crayon Syntax Highlighter

Crayon Syntax Highlighterの使い方

投稿メニューにボタンが追加されているのでクリック。

入力設定画面がレイヤー表示され、そこにコードを入力。
色々設定可能。


右上の挿入ボタンを押すと、preタグに囲まれたソースコードが入力される。
多くの言語に対応。

Crayon Syntax Highlighter
http://wordpress.org/extend/plugins/crayon-syntax-highlighter/installation/

WP-Syntax

WP-Syntaxの使い方

下記のようにコードをpreタグで挟むだけ
lang属性には入力する言語名を入れる(css、phpなど)

WP-Syntax
http://wordpress.org/extend/plugins/wp-syntax/

注意点

紹介してきた各プラグインは、基本preタグを書き出す仕様なので、併用ができません。
いろいろ試してみるのは構わないが、1つ有効化したら、それ以外のSyntax系プラグインは無効化しませう。

お気軽にコメントをどうぞ。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください