WordPress Note » SyntaxHighlighter Evolved http://www.df-cue.com/wp WordPressのプラグイン・カスタマイズ覚え書きノート Sat, 27 Feb 2010 03:38:44 +0000 ja hourly 1 http://wordpress.org/?v=3.0 SyntaxHighlighter Evolved : ソースコードを美しく表示するプラグイン http://www.df-cue.com/wp/2009/06/20/syntaxhighlighter-evolved/ http://www.df-cue.com/wp/2009/06/20/syntaxhighlighter-evolved/#comments Sat, 20 Jun 2009 02:42:55 +0000 ナカグマ http://www.df-cue.com/wp/?p=65 いつかどこかのサイトで見たきれいなコード表示が忘れられず、「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]
[code lang="js"] Javascriptソースコード [/code]

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

    [code lang="xml"
firstline="10"          /*開始行番号指定*/
highlight="3,10"       /*強調ライン指定（複数可）*/
wraplines="false"       /*自動折返し無し*/
autolinks="false"       /*URLオートリンク無し*/
]ソースコード
    [code lang="xml"
ruler="true"          /*ルーラー表示*/
toolbar="false"         /*ツールバー無し*/
gutter="false"          /*行番号無し*/
]ソースコード

注意点

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

]]> http://www.df-cue.com/wp/2009/06/20/syntaxhighlighter-evolved/feed/ 5 <?php wp_head(); ?>を使わないと動かないプラグインがある http://www.df-cue.com/wp/2009/06/19/head/ http://www.df-cue.com/wp/2009/06/19/head/#comments Fri, 19 Jun 2009 14:27:44 +0000 ナカグマ http://www.df-cue.com/wp/?p=25 WordPressには、とてもたくさんプラグインが作られていて、とても便利です。

でも、使うときはテーマの</head>の前に、

<?php wp_head(); ?>

を入れておきましょう。そうしないと、多くのプラグインが動かないようです。

例えば、「Ktai Entry」とか「Lightbox 2 WordPress Plugin 日本語版」で私は経験しました。
ちなみに「SyntaxHighlighter Evolved」は、

<?php wp_footer(); ?>

も必要みたいです。これは、</body>の前ですね。
プラグインを有効化すると、これらの部分に重要なJavascriptやcssなどが入るようです。

自作のテーマで使うときは、要注意です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_head(); ?>

</head>
]]> http://www.df-cue.com/wp/2009/06/19/head/feed/ 4