WordPress - jp.ikekou.blog.Main

WordPressのSyntaxHighlighterがActionScriptに対応してました

2009/10/23 19:18

コードを貼ることもあるので、やはりきれいに見せたいものです。
みなさんのよく利用していて見かける、SyntaxHighlighterを導入してみました。

目的

今回のゴールは

一般的に普及していてかつ機能的にも充実しているSyntaxHighlighterを導入したい。
WordPressのSyntaxHighlighterプラグインには入力方式が主に２つあり、
- preタグを使う<pre calss=”language”>hogehuga</pre>
- 大括弧を使う[language]hogehuga[/language]で、自動で変換してくれる
と主に二つあるようだが、前者のpreタグ方式のものを導入したい。
ActionScriptもカラーリングしたい。

とします。

調査

とりあえずググって調べて見てみると、現状は以下のようなものでした。

プラグインは色々あるが、もととなるのはJSのライブラリである
SyntaxHighlighterであり、各プラグインではJSでの処理に至るまでの過程が異なるのみである。実際にはヘッダでJSを読み込み、初期化関数を呼べばいいだけなので、最も単純な方法としては自分でheader.phpに書いても簡単にできる。
また、ネットでの情報ではSyntaxHighlighterはASに対応していないとある過去記事が多いが、実際にはバージョンアップしてAS他、対応言語が増えている。
しかし、そのバージョンアップにプラグインが対応できているかというと、必ずしもそうではない。古いバージョンを載せていてASに対応していないものもある。
大元のサイトによると、最新バージョンではpreタグの他にも<script type=”syntaxhighlighter”>でも使えるよう。

以上の結果から、まずは最新バージョンを取り込んでくれていて、かつpreタグ方式のもの、を探します。

管理画面のプラグイン新規追加で「syntax highlighter」で検索をかけ、順に見ていくことにしました。
インストール前にまずはダウンロードしてみて中身を見て判断します。

Google Syntax Highlighter for WordPress
SyntaxHighlighterのバージョンが古く、AS未対応でした。また原因はよくわかりませんが、上手く動かない時があります。過去に動かなかったことがあり、今回も実際インストールしてみても動かなかったです。

Dojox Wordpress Syntax Highlighter
説明ページがリンク切れだったので、却下。

Syntax Highlighter and Code Colorizer for Wordpress
こちらもSyntaxHighlighterのバージョンが古かったので、却下。

Easy Google Syntax Highlighter
これはバージョン番号を見ると2.1.364とあり、最新のSyntaxHighlighterを取り込んでいます。入力方式もpreタグです。
そしてプラグインのphpが他に比べて異様に長いな、と思っていたら、管理画面に「どの言語ファイルを読み込むか」「どのテーマを選ぶか」等の設定をできる画面が出てきます。
これはいい。
本体JSがバージョンアップした時に自分でマージするとしたら少々面倒そうですが、機能的にはここまでで間違いなく一番良いです。
条件を満たすものが見つかったので調査終了。

インストール

条件を満たしているのでEasy Google Syntax Highlighterをインストール。プラグインを有効化。
確認した所、無事に表示されました。めでたしめでたし。

自分でできないか？

ここまでで目的は一応完了しました。
しかし、もとのライブラリのバージョンアップにプラグインのバージョンアップがついていかなかった場合、自分でしなくてはいけないですし、
ごく単純な形のプラグイン作成の勉強のためにも自分でできないか、試してみました。

実際にしなくてはならないことは少なく、元々のライブラリをダウンロードしたらついているサンプルのhtmlを見るとわかりますが必要なのはこれだけなはず。
（ちなみに何故か、実際にはshBrushAS.js等がフォルダに用意されているにも関わらずサンプルには読み込まれていないので、追加しました）

<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushAS3.js"></script>
<script type="text/javascript" src="scripts/shBrushBash.js"></script>
<script type="text/javascript" src="scripts/shBrushColdFusion.js"></script>
<script type="text/javascript" src="scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="scripts/shBrushCss.js"></script>
<script type="text/javascript" src="scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="scripts/shBrushErlang.js"></script>
<script type="text/javascript" src="scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="scripts/shBrushJava.js"></script>
<script type="text/javascript" src="scripts/shBrushJavaFX.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="scripts/shBrushPerl.js"></script>
<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="scripts/shBrushPowerShell.js"></script>
<script type="text/javascript" src="scripts/shBrushPython.js"></script>
<script type="text/javascript" src="scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="scripts/shBrushScala.js"></script>
<script type="text/javascript" src="scripts/shBrushSql.js"></script>
<script type="text/javascript" src="scripts/shBrushVb.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
<script type="text/javascript">
    SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
    SyntaxHighlighter.all();
</script>

要はshCore.jsをまず読み込み、その後必要な分の言語ファイルを読み込み、swfファイルの位置を指定、all()で初期化する、それだけです。

元々のJSライブラリをダウンロードしてきても、それ自体はWPともMTとも無関係なので、WPのプラグイン用のPHPファイルはありません。
逆に言うと、それを入れてあげるだけで、プラグインとして機能するようになり、管理画面にも出ます。
サンプルのhtmlと、既存のプラグインのPHPを参考に出来上がったのはこちら。PHPファイルをzipにしてます。

my_syntax_highlighter.zip

<?php
/**
 * @package My_Syntax_Highlighter
 * @author ikekou
 * @version 1.0
 */
/*
Plugin Name: My Syntax Highlighter
Plugin URI: http://wordpress.org/#
Description: <a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter">Syntax Highlighter</a>の2.1.364です。
Author: ikekou
Version: 1.0
Author URI: http://ikekou.jp
*/

function insert_header() {
    $current_path = get_option('siteurl') .'/wp-content/plugins/' . basename(dirname(__FILE__)) .'/';
    ?>
    <link href="<?php echo $current_path; ?>styles/shCore.css" type="text/css" rel="stylesheet" />
    <link href="<?php echo $current_path; ?>styles/shThemeDefault.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shCore.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushAS3.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushBash.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushColdFusion.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushCpp.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushCSharp.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushCss.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushDelphi.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushDiff.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushErlang.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushGroovy.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushJava.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushJavaFX.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushPerl.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushPhp.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushPlain.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushPowerShell.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushPython.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushRuby.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushScala.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushSql.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushVb.js"></script>
    <script type="text/javascript" src="<?php echo $current_path; ?>scripts/shBrushXml.js"></script>
    <script type="text/javascript">
        SyntaxHighlighter.config.clipboardSwf = '<?php echo $current_path; ?>scripts/clipboard.swf';
        SyntaxHighlighter.all();
    </script>
    <?php
}
add_action('wp_head','insert_header');

?>

最初の部分に書いてあるコメントがどうやらプラグインとして必要なもののようで、Hello DollyプラグインのPHPファイルからコピーしました。
このPHPファイルのファイル名は何でも良く、管理画面に出てくる名前は
Plugin Name: My Syntax Highlighter
の値のようです。ほかの項目も今回は適当です。

全部の言語は使わないので、実際には使いそうなものだけ残しています。

これを使ってSyntaxHighlighterを使うための手順をあらためて説明すると、

まず大本のJSを配布しているhttp://alexgorbatchev.com/wiki/SyntaxHighlighterからJSをダウンロード
解凍したらフォルダ名が他のプラグインと名前が重複しないように適当にリネーム
上記のPHPファイルをそのフォルダ内に作成。utf8、bomなしで。
フォルダごと/wp-content/plugins/にアップ。
管理画面にMy Syntax Highlighterが追加されるので、[使用する]をクリック。
<pre class=”brush: php;>hogehoge</php>みたいな感じで投稿。
確認

という流れです。

結論

自分でできたのは勉強になったのでよかったです。プラグインが機能する基本的な仕組みは理解できました。
管理画面とからんでくる部分はわかりませんが。

しかしとりあえず、困るまではEasy Google Syntax Highlighterを使ってみます。
便利そうですしね！

Posted by ikekou Filed in WordPress

2 Comments »

jp.ikekou.blog.Main

WordPressのSyntaxHighlighterがActionScriptに対応してました

2009/10/23 19:18

目的

調査

インストール

自分でできないか？

結論

Information

Categories

Twitter