「SyntaxHighlighter」　設置説明　java script

とあるサイトで見かけたステキなコード表示方法のスクリプトが自分も欲しくなり、探して設置してみました・・・・探すのがほんと大変でした。スクリプト名もわからないし・・・・　σ(^◇^;)ヒヤアセ　　で、探し出したのが「SyntaxHighlighter」です。
どのようなものかは下記にいっぱいある行番号が付加されてるものがそうです。

・・・で、設置してみたのですがちょっと問題がありまして（自分的に）今後使っていこうか、どうしようかと考え中です。
その問題とは・・・・

1.　<textarea>の中にコードを記述するのですが、自分の環境の場合のみかもしれませんが一度投稿したものを再度編集すると、改行部分が消えて全てが1行になってしまう・・・・(T^T)　それで、色々自動整形無効のプラグイン等を試しましたが効果なし・・・・(TOT)

2.　文字色の編集が簡単には出来ない。　これは非常に問題だ・・・・コードの変更箇所とか追記部分を書く時は、色分けして説明したいのにこれでは・・・・（ノ＿・。）

・・・といったところが問題なのですが、これはただ単に自分の知識が足りないだけかもしれません。σ(^◇^;)ヒヤアセ

設置方法

こちらからダウンロードしてください。

展開後、出来たjsファイルの入った「Scripts」フォルダのみをアップロード。

StylesフォルダにあるSyntaxHighlighter.cssファイルの内容を既存のcssファイルに追記。

<script class="javascript"src="http://example.com/Scripts/shCore.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'http://example.com/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

そしてフッターの</body>の手前あたりに上記の基本コードに、自分の使用したいものを下記を参照し追加して記入。

<script class="javascript" src="http://example.com/Scripts/shBrushCSharp.js"></script>
<script class="javascript" src="http://example.com/Scripts/shBrushPhp.js"></script>
<script class="javascript" src="http://example.com/Scripts/shBrushJScript.js"></script>
<script class="javascript" src="http://example.com/Scripts/shBrushJava.js"></script>
<script class="javascript" src="http://example.com/Scripts/shBrushVb.js"></script>
<script class="javascript" src="http://example.com/Scripts/shBrushSql.js"></script>
<script class="javascript" src="http://example.com/Scripts/shBrushXml.js"></script>
<script class="javascript" src="http://example.com/Scripts/shBrushDelphi.js"></script>
<script class="javascript" src="http://example.com/Scripts/shBrushPython.js"></script>
<script class="javascript" src="http://example.com/Scripts/shBrushRuby.js"></script>
<script class="javascript" src="http://example.com/Scripts/shBrushCss.js"></script>
<script class="javascript" src="http://example.com/Scripts/shBrushCpp.js"></script>

例：　この場合、「css」と「php」と「xml」のコードが色分けされます。

<script type="text/javascript" src="http://example.com/Scripts/shCore.js"></script>
<script type="text/javascript" src="http://example.com/Scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://example.com/Scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="http://example.com/Scripts/shBrushXml.js"></script>
<script class="javascript" type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script> 

使用方法

本文に下記のような感じで記入し、あとは<textarea></textarea>間にコードを記入するだけです。
本文に下記のような感じで記入し、あとは<pre></pre>間にコードを記入するだけです。

<pre name="code" class="xml" cols="60" rows="5" id="code"></pre>

「class=""」に、コードの種類を指定してください。　上記の場合は。xmlになります。
詳しくは、下記を参照してください。

XMLコードの場合、class="xml"
CSSコードの場合、class="css"
JavaScriptコードの場合、class="js"
Rubyコードの場合、class="ruby"
SQLコードの場合、class="sql"
Visual Basicコードの場合、class="vb"
Javaコードの場合、class="java"
pythonコードの場合、class="python"
C#コードの場合、class="c#"
C++コードの場合、class="c"
Delphiコードの場合、class="delphi"

あとは、ｃｓｓファイルをいじってカスタマイズできます・・・自分の場合は、知識がないので色を変えるくらいしか出来ませんでしたが・・・・σ(^◇^;)ヒヤアセ

人気度: 出来たて新鮮！ これを見れる人は運が良い！ (⌒^⌒)ｂ