SyntaxHighlighter Evolved : ソースコードを美しく表示するプラグイン

いつかどこかのサイトで見たきれいなコード表示が忘れられず、「WordPress」「コード」「美しく表示」などのキーワードで検索してみると、ありました! このブログは先日公開されたばかりの WordPress 2.8 を使っていますが、うまく動くかな?と試しに入れてみると、問題なく動作しました。

SyntaxHighlighter Evolved

ソースコードを美しく表示するプラグイン
配布元:SyntaxHighlighter Evolved 2.1.0

参考サイト:

使い方

  1. 配布元より、SyntaxHighlighter Evolved 2.1.0をダウンロードします。(syntaxhighlighter.zip)

  2. 解凍すると「syntaxhighlighter」というフォルダが展開されるので、フォルダごと wp-content/plugins にアップロードします。

  3. 「プラグイン」の画面で、「SyntaxHighlighter Evolved」を有効化します。(※「使用する」をクリック)

  4. これで、[指定言語]ソースコード[/指定言語]というようにくくると、指定言語に合った表示をしてくれます。

[php]PHPソースコード[/php]
[css]CSSソースコード[/css]
[js]Javascriptソースコード[/js]

扱えるソースコードはこの他にもたくさんあり、上記参考サイトでより詳しく説明されています。
また、ハイライトにしたり、自動改行させない指定などは、以下のように記述できます。

[php highlight="3"]
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
  <head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <title><?php wp_title(); ?></title>
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
    <?php wp_head(); ?>
  </head>

注意点

配布元のサイトにも記されていますが、このプラグインにはテーマの header.php に <?php wp_head(); ?>、footer.php に <?php wp_footer(); ?> が必要になります。入っていないと動きません。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

keyboard_control_keyTOP