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

公開日: 2012年6月23日 最終更新日: 2018年5月24日

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

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

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

SyntaxHighlighter Evolved (ver.3.x)


有名なプラグイン。より使いやすくなってVer3系として進化。
このブログでも使用しています。

SyntaxHighlighter Evolvedの使い方

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


実際の表示例

 

cssやphpなど他の言語も対応。
[html]~[/html]の部分を書き換えてやればOK


実際の表示例

[css]
#header{
width:960px;
margin:0 auto;
background:#dadada;
font-size:14px;
}
[/css]

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系プラグインは無効化しませう。

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

  • ロリポップとXSERVER、初心者が選ぶべきレンタルサーバーはどっち?

    格安レンタルサーバーの2大巨塔とも呼ばれているロリポップとエックスサーバー(呼んでない)。 どちらも安くて人気のレンタルサーバーですが『結局どっちが良いのかわからない!』という人も少なくないはず。 この記事ではロリポップとエックスサーバーをプロの視点で比較しま […]

    Wordpress【初級者向け】
    2018.4.25
  • WordPressのRSSフィードのURL

    WordPressのRSSアドレス http://example.com/?feed=rss http://example.com/?feed=rss2 http://example.com/?feed=rdf http://example.com/?feed […]

    Wordpress【初級者向け】
    2012.7.8
  • WordPressでテキストリンクを一瞬で貼る方法

    WordPressのエディタをビジュアルモードにすると簡単です。 URL文字列をコピーし、テキストを選択してそのままペーストするとテキストリンクになりますよ。 このテクニックは、画像にリンクしたい時も可能です。 一般的なリンクの貼り方 標準的なリンクの貼り方も […]

    Wordpress【初級者向け】
    2018.5.23
  • ドメイン登録業者選びで初心者が見るべき3つのポイントとは?

    ドメインは、ドメイン登録代理店や「レジストラ」と呼ばれる非営利団体ICANNの認定登録業者から取得することができます。 ドメインを取得するには、まずドメイン登録代理店かレジストラに登録する必要があります。 レジストラについて詳しくはこちら 目次1 ドメイン選び […]

    Wordpress【初級者向け】
    2018.5.23