Own products

  • 新規事業のアイディア創造機

Introduce

2009
09/29

WordPressでプログラムコードを綺麗に表示させるプラグイン「SyntaxHighlighter Evolved」

この記事の読了時間:約636

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

少し前の話になりますが、巷じゃ「WordPress2.8.4にアップグレードしないと危険だぉ☆」との情報が流れてたんで、早速アップグレードしたんですが、したらなんと、今までフツーに動いていたプラグインのいくつかが動かなくなっちゃいました。

その後の修復作業でほとんど収まったんですが、そうしても「Syntax Highlighter for WordPress」だけがダメだったんですね。

なので他のSyntax Highlighterを探して回ったところ、まさにコレ!というプラグインSyntaxHighlighter Evolved」を見つけることが出来たので、備忘録代わりにエントリーしちゃいますー。

この「SyntaxHighlighter Evolved」、世にある他のSyntax Highlighterプラグインとの互換性を保つ為、<pre>タグでも[code]でも記述可能というスグレモノなので、他プラグインからの乗り換えもラクチン極まりなし。

簡単ですが使用例や導入手順も併記しますので、これからWordPressSyntax Highlighterを導入しようという方の助力なれば、と。

WordPressでプログラムコードを綺麗に表示させる「SyntaxHighlighter Evolved」

早速ですが、使用例です。

[記述したい言語]と書いた直後に表示させたいhtmlソースをベタ書きして、最後に[/記述したい言語]と記述すれば、[○○] [/○○]内のソースコードが下記のように表示されます。

【HTMLの場合】
[html]
<div class=”around_thirty”>
    <h1>「枕からオヤジのニオイ」は都市伝説じゃなかった。</h1>
</div>
[/html]
と書くと、下記のように表示されます。

<div class="around_thirty">
	<h1>「枕からオヤジのニオイ」は都市伝説じゃなかった。</h1>
</div>

【CSSの場合】

[css]
div#around_thirty {
    border: none;
}
[/css]

div#around_thirty {
	border: none;
}

【JavaScriptの場合】

[js]
$(function(){
    $(“div#around_thirty”).text(“「オレ?GReeeeNとか聞くし(笑)」”);
)}
[/js]

$(function(){
	$("div#around_thirty").text("「オレ?GReeeeNとか聞くし(笑)」");
)}

【PHPの場合】

[php]
if(isset($doutei)){
    $palam = str_replace(“純情”, “妖精”, “経験?オレ、純情だし。。。”);
}
[/php]

if(isset($doutei)){
	$palam = str_replace("純情", "妖精", "経験?オレ、純情だし。。。");
}

導入手順

まずはWordPress › SyntaxHighlighter Evolved « WordPress Pluginsにて、今回の主役である「SyntaxHighlighter Evolved」をダウンロードします(画面右側にある、赤い「Download」ボタンをクリック)。

んで、ダウンロードしたzipファイルを解凍して、その解凍したフォルダをまるごと、WordPressを入れてるサーバのpluginフォルダ内にぶっ込みます。

あとはWordPress管理画面でこのプラグインを有効化すれば完了です!

各種設定項目の説明

WordPress管理画面の左部メニュー「設定」内の「SyntaxHighlighter」にて、SyntaxHighlighter Evolvedの細かい挙動設定が出来ます。

ここでは6個のコード表示スタイルの他に、下記のような設定項目があります。

  • 「Display line numbers (行番号の表示の有無)」
  • 「Display the toolbar (コード表示部の右上に出るツールバーの表示の有無)」
  • 「Automatically make URLs clickable (コード内にURLが記述されてた場合の自動リンクの有無)」
  • 「Collapse code boxes (コード表示部の折りたたみ機能の有無)」
  • 「Show a ruler column along the top of the code box (ルーラーの表示の有無)」
  • 「Use the light display mode, best for single lines of code (シンプル表示機能の有無)」
  • 「Use smart tabs allowing tabs being used for alignment (スマートタブ機能の有無)」
  • 「Wrap long lines, using an icon to show where line wraps occur (自動改行時の改行アイコンの有無)」

使用上の注意

これはこのプラグインの唯一にして最大の注意点なんですが、この「SyntaxHighlighter Evolved」を使用する場合、テーマファイルのheader.phpの</head>の前に、必ず<?php wp_head(); ?>という記述を加えなきゃいけません(じゃないとこのプラグインは動きません)。

同様に、footer.phpの</body>の前にも、<?php wp_footer(); ?>という記述をしないといけません。

まぁ大して難しい話でもありませんので、もし導入したのに動かなかった場合はココらへんを疑ってみてください。

参考にさせていただいたサイト:

にしても、なんでこのSyntax Highlighter系のプラグインって、同じような名前ばっかなんでしょー。

コレ探し当てるまで、同名のプラグインを無限ループで探したりしてて、やっぱネーミングっちゅーのも大事だなぁと思ったり思わなかったりラジバンダリ(言いたかっただけ)。

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

コメント一覧

5 Responses to [WordPressでプログラムコードを綺麗に表示させるプラグイン「SyntaxHighlighter Evolved」]

[…] 何故か既にされてたのでおk 参考:ITキヲスク | WordPressでプログラムコードを綺麗に表示させるプラグイン「SyntaxHighlighter Evolved」 […]

[…] <参考にさせていただいたサイト> ITキオスクさん […]

HTMLとCSS | WEB制作日記 より:

2011/05/16 1:08 PM

[…] トのコードを記載しようと思ったのですが、表示できないのでgoogleで検索してみました。ITキヲスクさんのサイトを発見。こちらのページを参考にコードを表示するプラグインをインスト […]

xsharing » syntax highlighterを導入した より:

2011/07/22 6:55 PM

[…] WordPressでプログラムコードを綺麗に表示させるプラグイン「SyntaxHighlighter Evolved」 […]

永遠無窮の創作庫 より:

2012/07/18 10:32 PM

これでコードもすっきり? 「SyntaxHighlighter Evolved」を導入!

あなたは、ブログでコードを書いたりしますか? 私はします。これからは特に、HTMLやCSSやPHPの講座記事を書こうと思っているので、コードを書く機会が増えると思います。 そこで今回、…

コメントを投稿する

お名前

ご連絡先メールアドレス※非公開

コメント

CAPTCHA


  • このブログのRSSを購読する
  • このブログをtwitterでつぶやく
  • このブログをFacebookで共有する
  • このブログをはてなブックマークで共有する

Favorite feeds

    Contact

    お名前※必須

    ご連絡先メールアドレス

    お問い合わせ内容※必須

    CAPTCHA

    captcha

    Blog parts

    Affiliate