海外ドラマ好き！コーダーズブログ

2013年2月26日

jQueryだとかPerlだとか、もちろんHTMLやCSSもそうですが
調べ物をしていて、サンプルソースをコピーできるようになっているサイトを
よく見かけていて、気になっていたので、調べてみたら
Syntax Highlighter
と呼ばれているようです。

WordPressのプラグインもたくさんあったのですが
情報が色々あったのと、見た目がよく見かけるタイプだったので
SyntaxHighlighter Evolved
を導入してみました。

配布元：http://wordpress.org/extend/plugins/syntaxhighlighter/

導入手順

これだけでOK！
と書いてあったので、さっそく記事を下書きしてプレビューしたら
確かにタグは表示できるようになったんですが見た目に変化がない。
ちゃんと表示されないというか、CSSが適用されていない？
本来は↓こうなるはずなのに（これは画像です）

<p>こんな感じに表示されちゃう。</p>
※これは単に実態参照で<を表記して書いてます。

そう言えば、このブログってシンプルに作ったので
<?php wp_header(); ?>
を記述していない。

Javascriptとかcssとか読み込ませているはずだから
これを書かないとダメなのね。
とheader.phpに書いてみるも、表示変わらず。うぬぬ・・・
もっとちゃんと説明を読まないといけないようです。

WPのバージョンは　2.5以上じゃないとダメらしいですが
3.0.5だから大丈夫

他は特に記載がないというか、英語だから読む気力が湧かない・・・

なんでだめなのかなぁ。自分のプレビューのソースを開いてみると
JSとか呼び出してる行がHead内に見当たらない。

おぉ！フッターに出す予定なのか！！
ならば、とfooter.phpに
<?php wp_footer(); ?>
を追加したら・・・出ました～～
わかってから見ると、確かにFAQとかに記載がありました。
ちゃんと書いてあったんですねっ。

超シンプルなテーブルタグ

<table>
<tr><th>見出し</th><td>こちらはSyntaxHighlighter用の記述をしたもの。
タグ毎表示されてます。</td></tr>
</table>

PHPも試してみます。

<?php echo "どうでしょう" ;?>

ちゃんと表示されました。

普通のテンプレートは
<?php wp_header(); ?>
や
<?php wp_footer(); ?>
は書いてあるものだから、あえて記述がないんですね。
と言うわけで、動いているっぽいのに、表示が変だよ、と言う方は

header.php
head内に<?php wp_header(); ?>

footer.php
どこかに<?php wp_footer(); ?>

が書いてあるかチェックして入っていなかったら追加すると動くようです。

これで解決！と思いきや、右上に出るコピー用のボタンなどが表示されていないし
下にスクロールバーが出たり、微妙な状態です。

設定画面にある「SyntaxHighlighterのバージョン」が
デフォルトでは　3.x
になっているんですが、試しにこれを　2　に変更してみたところ
思い描いていた表示になりました。

ちなみに3.xだと、画面上でソースをドラッグしたら
行番号は抜かしてコピーできるようになっているようなので
ツールバーは非表示にした方が良いようですね。
でもソースの折り返しがないから、スクロールバーが下に出るので
やっぱり2の方が良い感じかも？

他はCSSの設定やら、オプションの設定やらで調整できるようです。

記述方法

[言語][/言語]
で括ればOKです。
言語＝html,css,phpなど

↓半角を取って書くと

<p>こんな感じに書きます。</p>
<p>※変換されないよう　[　と　]　の前後に半角を入れています。
実際にはこの半角は消してください。<p>

他にもオプション設定もできるようです。
参考サイト：
http://ozpa-h4.com/2012/03/06/wordpress_plugin_syntax_highlighter_evolved/
http://creatorish.com/weblog/4328

<p>標準では行番号を表示させたいけど、不要な時もある。
そんな場合はオプション設定を個別にすれば良いようです。</p>
<p>[ html  gutter="false" ]<p>