• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN
2012/03/06

ソースコードをキレイに表示するWordPressプラグイン「SyntaxHighlighter Evolved」

Skitched 20120304 235516

どうも。@OZPA です。

WordPressのオリジナルテーマを作成したりして、最近htmlやphpのソースコードをブログに掲載するようなことが増えてまいりました。

そんなわけで、今さらながら導入しました、ソースコードを表示するのに便利なWordPressプラグイン「SyntaxHighlighter Evolved」のご紹介。


導入方法

プラグインは以下のリンクから入手するか、WordPressのプラグイン管理画面から「SyntaxHighlighter Evolved」を検索、有効化してください。

WordPress › SyntaxHighlighter Evolved « WordPress Plugins

 

対応しているコード

SyntaxHighlighter Evolvedが対応しているのは、以下のコード。

html,actionscript3,bash,coldfusion,cpp,csharp,css,
delphi,erlang,fsharp,diff,groovy,javascript,java,javafx,
matlab (keywords only),objc,perl,php,text,powershell,
python,r,ruby,scala,sql,vb,xml

 

使い方

使い方は超簡単。
ソースコードを、[表記したい言語][/表記したい言語]のタグでくくるだけ。
すると、プラグインがソースコードを整形して吐き出してくれます。

つまり、

[html]
<p>Hello World!</p>
<p>Hello Sofmap World!</p>
[/html]

と記述すると・・・

<p>Hello World!</p>
<p>Hello Sofmap World!</p>

と言う形となって表示してくれるわけです。
ちょーかーんたーん。

 

ハイライトや開始行番号の指定などもおk

また、強調したい行にハイライトをかけたり、ボックス左に振る数字の開始番号を指定することなどもできます。

 

ハイライト

ハイライトを行に書ける場合は
[html highlight=”3,8″]のように記述します。
※カッコは半角で書いてください。

 

<p>
篠崎 愛<br />
愛称	あいちゃん、らぶたん<br />
生年月日	1992年2月26日<br />
血液型	A型<br />
身長 / 体重	160 cm / ― kg<br />
スリーサイズ	87 - 60 - 88 cm<br />
ブラのサイズ	F<br />
</p>

 

開始行の番号を指定する

ボックス左側の数字の開始番号を指定する場合は
[html firstline=”87″]のように記述。

 

<p>
篠崎愛ちゃんの<br />
バストのサイズは<br />
87cm<br />
これ豆な<br />
</p>

 

あとは管理画面からも以下の様々な設定が可能。

  • 行番号を表示する
  • ツールバーを表示する
  • 自動リンクを有効にする
  • コードボックスの表示を閉じておく
  • 軽い表示モードを使う
  • インデントタブを許容するスマートタブを使う
  • 長い行を折り返す(v2.xのみ、横スクロールバーを無効にする)
  •  

    テーマも豊富

    そしてこの「SyntaxHighlighter」は選べるテーマも豊富。

     

    Skitched 20120306 004903

    この「Default」の他にも…

     

    Skitched 20120306 005007

    こんなんとか…

     

    Skitched 20120306 005126

    こんな形のものなど、7種類ほどのテーマが使用可能です。

     

    そんなわけで、ソースコード表示用WordPressプラグイン「SyntaxHighlighter Evolved」のご紹介でした。

    関連:「htmlすら知らなかった私が2週間でWordpressの新テーマを作成するまでにやったこと」と参考にした記事まとめ

    関連:WordPressのオリジナルテーマ 作り方の記事まとめ

    関連:私のような初心者におくる!!WordPressブログをsixcoreサーバーに移転した際の覚え書き!!

    関連:「WordPress Hyper Response」を導入したらホントにWordPressが高速化したよ!

    SPONSORED LINK

    FB Comments

    About This Site

    Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
    ふざけた文体が目につきますが、本人はいたってふざけております。
    ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
    広告掲載、執筆、取材などの依頼も受け付けております。
    さらに詳しく

    SNS

    ×