« フルスクリーンモードとswfAddressとIE6 | Home | 寒いですね »

Nov 202008

syntaxhighlighterを入れてみるの巻

ブログに記述したコードを自分で後でみても良く分からないぐらい汚いのでsyntaxhighlighterを導入することにしてみます。

1.まずsyntaxhighlighter - Google Codeからダウンロード
2.解凍して出来上がった"dp.SyntaxHighlighter"をサーバにアップ。(オデの場合はブログでサブドメインになっているので、そのサブドメインのドキュメントルートにアップ)
3.syntaxhighlighterのCSSを追加する。Movable Typeだとメインページ以外にもアーカイブ系にも追加。

<link rel="stylesheet" href="<$MTBlogURL$>dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" type="text/css" />

以下他にも色々追加しないといけないので、Movable typeだとモジュールで追加した方が楽かな?ということで以下モジュールベースで話を展開。

4."module.SyntaxHighlighter.txt"というテキストファイルを新規作成。
5.CSS設定の追加。"module.SyntaxHighlighter.txt"に以下の一文を記述。

<link rel="stylesheet" href="<$MTBlogURL$>dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" type="text/css" />

6.使用言語のshBrushスクリプト(パーサー?)を"module.SyntaxHighlighter.txt"に追記。
種類は


  1. shBrushCpp.js :C++
  2. shBrushCSharp.js : C#
  3. shBrushCss.js : CSS
  4. shBrushDelphi.js : Delphi
  5. shBrushJava.js : Java
  6. shBrushJScript.js : JavaScript
  7. shBrushPhp.js : PHP
  8. shBrushPython.js : Python
  9. shBrushRuby.js : Ruby
  10. shBrushSql.js : SQL
  11. shBrushVb.js : Visual Basic
  12. shBrushXml.js : XML
  13. shCore.js : COREこれは必須っぽい

といったところ。自分が使用するであろう言語だけ追記。XMLだけ使う場合はこんな感じ。

<script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/shCore.js"></script>  
<script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>  

7.クリップボードコピーの定義。Flashを介在してクリップボードにコードをコピーしているらしい。そのファイルは"/Scripts/clipboard.swf"。組み込みは

<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '<$MTBlogURL$>/flash/dp.SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

8.標準ではAction Script用のBrushは存在しないですが、dp.SyntaxHighlighterでActionScript 2.0/3.0のコードをハイライトする at Flaboで配布されていたので入れてみる。(ただ今停止中って書いてあるので動くのか不明ですが)DLして解凍したデータを"dp.SyntaxHighlighter"にマージして"module.SyntaxHighlighter.txt"に追記。最終的な"module.SyntaxHighlighter.txt"はこんな感じ。

<link rel="stylesheet" href="<$MTBlogURL$>dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" type="text/css" />
<script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/shCore.js"></script>  
<script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>  
<script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/shBrushCss.js"></script>  
<script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/shBrushJava.js"></script>  
<script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/shBrushActionScript2.js"></script>  
<script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/shBrushActionScript3.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '<$MTBlogURL$>/flash/dp.SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');

9."module.SyntaxHighlighter.txt"をサーバにアップ。
Movable Typeのモジュールを新規作成。名前を"SyntaxHighlighter"に設定して"このテンプレートにリンクするファイル"にアップした"module.SyntaxHighlighter.txt"のパスを指定して保存。これでモジュールは完成。

10.次にメインページ、アーカイブ各種にモジュールを追記。

  
   <$MTInclude module="SyntaxHighlighter"$>

11.記述したいコードをtextareaタグで囲み、そのclass名で言語名を指定。
言語名のエイリアスはLanguages - syntaxhighlighter - Google Code - List of supported languages.参照。

  
<?xml version="1.0" encoding="utf-8" ?>
<data>
	<foods>
		<item id="curry" price="800"><![CDATA[カレーライス]]></item>
		<item id="pasta" price="700"><![CDATA[パスタ]]></item>
	</foods>
	<drinks>
		<item id="beer" price="500"><![CDATA[ビール]]></item>
		<item id="tea" price="500"><![CDATA[お茶]]></item>
	</drinks>
</data>

どうだろう?上手くいっているのか?

駄目だ~~~汗


全然上手くいかない理由が分かった。
Usage - syntaxhighlighter - Google Code - How to use SyntaxHighlighter.

For optimal result, place this code at the very end of your page. Check HighlightAll for more details about the function.

この一文でした。
つまりheadに入れちゃあ駄目なんですね。うん、どこで発動するんだろう?って疑問はあったんだ・・w
ということで

  
   <$MTInclude module="SyntaxHighlighter"$>
をbodyがCloseした後に入れれば大丈夫。

ちなみにMovabley Typeの改行設定で「改行を変換する」に設定していると、コードの中にも改行タグ<br />が入ってしまうのですが、この回避方はpreタグ内の改行(brタグ)を無効にする(MT・Movable Type) - ウェブライフハックを参照。<pre>を使用することで回避できるようです。

追記:2008/11/21 16:43
AS3用のBrushをdigitalflipbook: AS3 Syntax Highlighting (with SyntaxHighlighter)に入れ替えてみました。早くなるかな?

ためしに一つ・・・

/**********************************************************/
/*** Generated using Asapire [brainy 2008-Mar-07 11:06] ***/
/**********************************************************/
package flash.net {
	public final  class URLRequest {
		/**
		 * The MIME content type of the content in the the data property.
		 */
		public function get contentType():String;
		public function set contentType(value:String):void;
		/**
		 * An object containing data to be transmitted with the URL request.
		 */
		public function get data():Object;
		public function set data(value:Object):void;
		/**
		 * A string that uniquely identifies the signed Adobe platform component to be stored
		 *  to (or retrieved from) the Flash Player cache. A digest
		 *  corresponds to a single cached file; if you change the file in any way, its digest
		 *  will change in an unpredictable way. By using a digest, you can verify the cached file across
		 *  multiple domains. Two files with the same digest are the same file, and two files with different
		 *  digests are not the same file. A file cannot (practically) be created to "spoof" a digest and
		 *  pretend to be another digest.This property applies to
		 *  SWF content only; it does not apply to JavaScript code running in AIR.
		 */
		public function get digest():String;
		public function set digest(value:String):void;
		/**
		 * Controls the HTTP form submission method.
		 */
		public function get method():String;
		public function set method(value:String):void;
		/**
		 * The array of HTTP request headers to be appended to the
		 *  HTTP request. The array is composed of URLRequestHeader objects.
		 */
		public function get requestHeaders():Array;
		public function set requestHeaders(value:Array):void;
		/**
		 * The URL to be requested.
		 */
		public function get url():String;
		public function set url(value:String):void;
		/**
		 * Creates a URLRequest object.
		 *  If System.useCodePage is true, the request is encoded using the
		 *  system code page, rather than Unicode.
		 *  If System.useCodePage is false, the request is encoded using Unicode, rather than the
		 *  system code page.
		 *
		 * @param url                The URL to be requested. You can set the URL later by using the url property.
		 */
		public function URLRequest(url:String = null);
	}
}

どうだろう?
お、結構早いかも。

8 Comments

全然上手くいってない(汗

ここまで上手くいかないと逆にスッキリする。

いやー普通にtextAreaになってんだけどw

AS3のBrushはとても重たい気がする。それだけ関数が多いということなのだろうか?

shBrushAS3.jsの中見てみたら、キーワード数は多くないようです。
単純にJSの処理速度と、置換対象のtextareaの数の問題かと。
少なくともうちで公開してるのよか赤い彗星分くらいは速いですねw

はじめまして。
>単純にJSの処理速度と、置換対象のtextareaの数の問題かと。
ですね、大量にソースを書いていたりすると今でも一瞬止まります。

FlaboさんはもうWPに乗り換えられているので、iG:Syntax Hiliterなんですよね・・。WPに乗り換えるか悩みますが、暇が無くって・・・汗

はじめまして。
挨拶抜きで失礼しました。

>WPに乗り換えるか悩みますが、暇が無くって・・・汗
年末ですもんね。。
iG:SyntaxHiliterだとバックエンドの処理になるんで、キーワード増えても遅くならないのはいいですよ。
でも、iG:SHのためだけにっていうのは本末転倒!?w

>挨拶抜きで失礼しました。
あ、いえいえ、気になさらずに・・。

>キーワード増えても遅くならないのはいいですよ。
ですよねぇ・・・。
WPの乗換えを躊躇しているのは、一つのWPで一つのブログしか管理できないところですね・・。WordPressMUとかあるみたいですが、本家のバージョンアップにどれくらい追従してくれるのか不安で・・・(プラグインレベルで対応できるものがあればベストですが)

Leave a comment

Search and Archives