LSL色付けツール

sabro

2007年08月31日 01:28

※ Jvn Writerさんが、高機能版のLSL 色付けツール２をリリースされているので、そちらを使用することをオススメします。

※ 必ず追記部分も読んでからご使用ください。

LSLのシンタックスハイライトツールを公開します。

ツールといっても、SyntaxHighlighterという、フリーのシンタックスハイライトツールの、LSLプラグインを作っただけです。

必ず最後の注意書きを読んでから導入してください。
shBrushLsl.js

導入方法

1.ダウンロード
ここから、syntaxhighlighter_1.5.1本体をダウンロードします。次に、shBrushLsl.jsをこのリンクの右クリックメニューから保存します。

2.ファイルをWebサーバへ配置
ダウンロードが済んだら、shBrushLsl.jsと、syntaxhighlighter本体の以下のファイルを、無料ホームページスペースなどにアップロードします。

・dp.SyntaxHighlighter\Scripts\shCore.js
・dp.SyntaxHighlighter\Scripts\clipboard.swf
・dp.SyntaxHighlighter\Styles\SyntaxHighlighter.css

3.ブログテンプレートを修正
ブログ管理画面　→　ブログの設定　→　テンプレート　→　カスタマイズ　と辿って、「トップページ、個別記事、アーカイブ」の各テンプレートheadに、以下を追加します。○○○は、アップロードしたファイルのパスに置き換えてください。

<head>
・・・
・・・

<link type="text/css" rel="stylesheet" href="http://○○○/SyntaxHighlighter.css" />
<script language="javascript" src="http://○○○/shCore.js"></script>
<script language="javascript" src="http://○○○/shBrushLsl.js"></script>
<script language="javascript">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = 'http://○○○/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

</head>

4.LSLを含んだ記事を書く
LSLは、<pre>または<textarea>の中に書き、name属性に「code」、class属性に「lsl」とセットすれば色分けされます。

<pre name="code" class="lsl">
default
{
    state_entry()
    {
        llSay(0, "Hello, SL World!");
    }
}
</pre>

↓

default
{
state_entry()
{
llSay(0, "Hello, SL World!");
}
}

あれ、<br />が入ってしまいました（今は修正版を使ってるので入ってません）。ブログ環境設定で、改行を<br />に変換する設定にしておくと、このようなことになってしまいます。でも、変換しない設定にすると、今まで書いてきた記事を直さないといけないみたいです。

詰んだ・・・orz　　　　と思わせておいて、俺が華麗に解決＼(^o^)／

改行を実体参照の「」に変換すればいいのです。よく分からない人は、「」は改行を文字で表したようなものだと思ってください。私はフリーのサクラエディタで、以下のように変換してます。

1.メニューから置換を選択
2.正規表現にチェック
3.置換前に、\r\nと入力
4.置換後に、と入力
5.すべて置換を押す

改行が置換されて、1行の長い文字列になるので、preタグの間に貼り付けてください。

<pre>
　　ソース
</pre>

だと、1行目と最終行に<br />が入るので、

<pre>ソース</pre>

こう書きましょう。

改行の変換で1手間かかるので微妙ですが、よかったら使ってやってください。

※ 2008/01/30 1:00頃追記
<br />を消すだけであれば、Syntaxhighlighterの設定だけで出来るようです。ただ、その場合は1行余分に改行が入ります。
・・・
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = 'http://○○○/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();　　← headの設定にこの行を追加
dp.SyntaxHighlighter.HighlightAll('code');
・・・

※ 2008/01/30 23:00頃追記
Jvn Writerさんが、余分な改行が入らない方法を教えてくれたので、修正済みのファイルを公開します＾＾　今回修正したのは、SyntaxHighlighter本体付属の「shCore.js」ですが、混乱をさけるために「shCore4SLMaMe.js」というファイル名にしてあります。
shCore4SLMaMe.js

ちなみに、shBrushLsl.jsは修正していないので今までのものを、そのまま使ってください。shCore4SLMaMe.jsを適当なサーバにアップロードしたら、ブログテンプレートでのheadの設定で、shCore.jsを参照していた部分はshCore4SLMaMe.jsに直しておいて下さい。また、BloggerModeの設定も行う必要があります。

<head>
・・・
・・・

<link type="text/css" rel="stylesheet" href="http://○○○/SyntaxHighlighter.css" />
<script language="javascript" src="http://○○○/shCore4SLMaMe.js"></script>
<script language="javascript" src="http://○○○/shBrushLsl.js"></script>
<script language="javascript">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = 'http://○○○/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

</head>

あと、shBrushLsl.jsのリンクが切れていたので修正しておきました。

※ 2008/07/29 00:40頃追記
javascript、cssファイル等を、各使用者が個別に設置する必要がなくなりました。詳しくは、以下のエントリをご覧ください。
LSL色付けツールをバージョン1に、あと設置簡易化とか

※ 2009/04/04 23:30頃追記
SyntaxHighlighter2.0に対応しました。詳しくは、以下のエントリをご覧ください。
LSL色付ツールSyntaxHighlighter2.0対応

＜注意事項＞
・javascriptには、LSLの関数をすべて記述してあるので、結構重いです(12kB)。
・ライセンスは、本体と同じでLGPLです。自分のブログで使うだけであれば問題ないので、分からない人は気にしなくてもいいです。
・shBrushLsl.js、shCore4SLMaMe.js、または今回の記事内容から発生した損害について、このブログの運営者は一切の責任を負わないものとします。

ブログ設定