ソラマメブログ

2009年04月04日

LSL色付ツールSyntaxHighlighter2.0対応

syntaxhighlighter2.0
サイドバーで公開しているように、LSL色付けツールなるものを作っていますが、これは、SyntaxHighlighterというツールのバージョン1.5.1向けLSLプラグインだったのでした。

で、つい最近、GoogleCodeのページをよく見てみたんですが、先頭に「New 2.0 version is out and has a new home over at http://alexgorbatchev.com/wiki/」と書かれていました。Ver.2.0は別サイトで開発継続していたようです。気づかんかった・・・（￣□ ￣||

で、ぱーっと対応しようと思ったんですが、1.5 と 2.0では、CSS Themesを始めとして多くの機能追加や方式変更があり、結構苦労しました。ここからは、対応の経緯を書いていきますが、とりあえず色が付けばなんでもいいという人は、次のHTMLのhead部をテンプレートにコピーしてください（以前のバージョンの記述があったら消してください）。とくに、自前のサーバにjs,cssファイルを置く必要はありません。ちなみに、今使ってる人が困らないように、1.5バージョンも残していくつもりです。2.0は変化が大きくて肌に合わない人もいると思いますので、その場合は、引き続き1.5をご使用ください。

<head>
・・・
・・・
<!-- ▼追加部分▼ -->
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" /> 
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" /> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script> 
<script type="text/javascript" src="http://public.webkai.net/shAddSlmameMode.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js"></script> 
<script type="text/javascript" src="http://public.webkai.net/shBrushLsl2.0.js"></script>
<script type="text/javascript"> 
window.onload = function () {
SyntaxHighlighter.config.slmameMode=true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
dp.SyntaxHighlighter.HighlightAll('code');
}
</script> 
<!-- ▲追加部分▲ -->
</head>


ここから、今回の対応の説明です。

１．ホスティング先の変更
説明することはたくさんあります。まず「http://alexgorbatchev.com/pub/sh/current/」というURLがたくさん入っていますが、これは、SyntaxHighlighterプロジェクトが公式に運営しているjs,css等のホスティングです。1.5では、さぶろーがGooglePageCreatorで代理でホスティングしていましたが、2.0では可能な部分は、こちらから持ってくるようにしています。

２．カスタムテーマシステム
次に、２行目で、「shThemeDefault.css」を引っ張ってきてますが、これはSyntaxHighlightのテーマCSSファイルです。2.0では、ハイライトに自由なテーマを選択できるようになっていて、http://alexgorbatchev.com/wiki/SyntaxHighlighter:Themesにビルトインテーマの一覧があります。デフォルト以外のテーマを使いたい場合は、２行目を好きなテーマに置き換えましょう。

３．本体に手を入れない方針
３行目で、「shCore.js」という、いわばSyntaxHighlighterのコアとなるJavascriptを引っ張ってきてます。1.5の時は、ソラマメの改行がうまくいかないため、shCore.jsを修正し、shCore4SLMaMe.jsを代わりに使っていたのですが、ちょっと本体に手を入れるのもどうかなと思って、今回は４行目の「shAddSlmameMode.js」で実行時に、ソラマメ用のロジックに外部から置き換える方針にしています。これで、slmameModeというのが追加されるので、window.onload時に「SyntaxHighlighter.config.slmameMode=true;」とすれば、ソラマメ用のロジックが動きます。

４．1.5と2.0の共存
さて、実は2.0では、コードを記述したpreタグにつける属性が変更されています。
バージョン1.5　<pre name="code" class="lsl">
バージョン2.0　<pre class="brush: lsl">
ということは、今まで書いてきたコードに対して全て変更する必要があるわけです。でも、さすがにそれは大変なので1.5の属性のままで、2.0で動作させる方法が用意されています。それが５行目の「shLegacy.js」です。これを参照しつつ、2.0用の「SyntaxHighlighter.all();」と、1.5用の「dp.SyntaxHighlighter.HighlightAll('code');」を両方指定することで、どちらの属性記述方法にも対応させることができます。詳しくは、http://alexgorbatchev.com/wiki/SyntaxHighlighter:Upgradingをご覧ください。

５．マルチラインコメント、マルチライン文字列対応
そして、６行目では、さぶろー制作の、2.0に対応したshBrushLsl2.0.jsを指定しています。単純に2.0に対応させる以外に、いつのまにかLSLでサポートされていたマルチラインコメント（/* ... */）や、マルチライン文字列への対応も行っています。


以上、説明おわりっ(^^)　そして、実際の表示はこんな感じです。テーマによっては、keyword と functionの色が同じになったりしてしまって微妙な部分もあります。誰かLSLにあったテーマを作ってくれるのをノホホンと待つことにします（￣∇￣）


/*

   マルチラインコメント

*/



// １行コメント



string single = "文字列";

string multi  = "マルチライン

                 文字列";



default

{

    state_entry()

    {

        if (TRUE) {

            llSay(0, "テスト");

        }

    }

}



2009/04/05 14:00頃追記：
URLが一部おかしかったので修正。
http://public.webkai.net-a.googlepages.com/
↓
http://public.webkai.net/

2009/05/11 14:00頃追記：
SyntaxHighlighter2.0の、2009/05/03のバージョンアップで、改行無視の修正が入ったため設定を修正しました。このエントリの設定は使用できません。詳しくはこちらの記事で。
SyntaxHighlighter2.0で改行タグが出る件


タグ ：LSLblog

同じカテゴリー（ブログ設定）の記事画像
ソラマメのサイドバー拡張の小ネタ
LSL色付けツール2.0をJvn Writerさんがリリース
ブログタイトルとデザインを変更
LSL色付けツール
同じカテゴリー（ブログ設定）の記事
 ソラマメのカテゴリ勘違いしてたっぽい (2009-06-09 00:30)
 SyntaxHighlighter2.0で改行タグが出る件 (2009-05-11 12:42)
 ソラマメのサイドバー拡張の小ネタ (2009-04-02 03:03)
 LSL色付けツールをバージョン1に、あと設置簡易化とか (2008-07-28 00:28)
 LSL色付けツール2.0をJvn Writerさんがリリース (2008-02-21 21:18)
 ソラマメから返事きました～ (2007-12-13 21:23)

Posted by sabro at 23:24│Comments(5) │ブログ設定
このBlogのトップへ
この記事へのトラックバック
ちょっとしたメモをエントリーに書き込む時、ソースコードをはっておきたい事がある。そんな時に便利なプラグイン。いろいろなプログラミング言語に対応していて、現バージョンはAction...
WordPress：Plugin＞SyntaxHighlighter Evolved：ソースコードを分かりやすく表示【Koblog】at 2009年08月30日 00:44
この記事へのコメント
こんにちは、初めまして。Kobumakiといいます。
SyntaxHighlighter用のBrushファイル頂きました。いいものをありがとうございます。自分のBlogにメモらせて頂きました。それにしてもHeaderのキャラは見覚えがあるような・・。
って、MagSLで活動してらっしゃるんですね。僕も一応Harajukuの住人です。今度遊びに行ってみますね。
Posted by Kobumaki at 2009年08月30日 00:43
おお、使っていただいて、ありがとうございます＾＾

WordPressの、SyntaxHighlighterは設定がちょっと特殊なんですねー。LSLのブラシが動いてよかったです。

遊びに来ていただけるなら、クリエモンカフェにぜひご来店を。平日22：00からやっていますが、さぶろーが活動しているのは、だいたい23：30以降です・・。
Posted by sabrosabro at 2009年08月30日 12:44
遊びに来ていただけるなら、クリエモンカフェにぜひご来店を。平日22：00からやっていますが、さぶろーが活動しているのは、だいたい23：30以降です・・。
Posted by canon battery at 2011年09月16日 18:52
偉大な記事、ありがとう
Posted by research papers at 2011年09月24日 19:23
I don't understand Japanese. But I want to learn how to speak the language. Japanese songs are so beautiful to listen to.
Posted by research paper at 2011年11月04日 16:17
上の画像に書かれている文字を入力して下さい
 
＜ご注意＞
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。
このページの上へ▲