Home > スポンサー広告 > SyntaxHighlighter 2.0 でas3を表示する

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://bluestrckr.blog66.fc2.com/tb.php/7-8e7ef509
Listed below are links to weblogs that reference
スポンサーサイト from Bluestrckr

Home > スポンサー広告 > SyntaxHighlighter 2.0 でas3を表示する

Home > js > SyntaxHighlighter 2.0 でas3を表示する

SyntaxHighlighter 2.0 でas3を表示する

  • 2009-07-30
  • js

blogにソースコードを記述するときによく見かけるSyntaxHighlighterを導入してみた。
asやjs、cssなどのハイライト表示が可能。
下記のように表示できる。

package  
{
	import flash.display.Sprite;
	public class Hoge extends Sprite
	{
		public function Hoge () 
		{
			trace("Hello World !");
		}
	}
}

ダウンロード

バージョンは現時点で最新の2.0を使うことにする。(2009年7月時点)
まずはSyntaxHighlighter 2.0をDLする。
syntaxhighlighter 2.0 - Google Code

SyntaxHighlighter 2.0にもともと入っているshBrushAS3.jsではうまく表示できなかったので
ググッた末にas用のshBrushはここからDLした。
AS3 Syntax Highlighting (with SyntaxHighlighter 2.0)

設置方法

syntaxhighlighter 2.0に入っているデータを随時アップロード。

styles/
├ shCore.css
├ shThemeDefault.css
├ help.png
├ page_white_code.png
├ page_white_copy.png
├ printer.png
└ wrapping.png

scripts/
├ clipboard.swf
├ shBrushCss.js
├ shBrushJava.js
├ shBrushJScript.js
├ ………
├ ……
└ …

scriptsについては自分の必要とする言語だけでOK。
clipboard.swfはアップしていないとクリップボードのアイコンが表示されないので必ずアップしておく。
ヘッダー内に下記のリンクを挿入。











ただ、ヘッダー内に記述してしまうと表示が遅くなってしまったり、
正常に動作しないことがあるようなのでブログによっては記述場所は適宣変更しないといけない。
このブログではbodyタグの閉じタグの下に設置した。

ソースの記述方法

ソースの記述に関しては<pre>タグを使う。

classにasやxhtmlなどを設定すればそれぞれの言語をハイライトで表示できる。
なおSyntaxHighlighterはie6やoperaで正常に動作しない場合があるので注意。

▼参考になったサイト
SyntaxHighlighter2.0の使い方
スポンサーサイト

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://bluestrckr.blog66.fc2.com/tb.php/7-8e7ef509
Listed below are links to weblogs that reference
SyntaxHighlighter 2.0 でas3を表示する from Bluestrckr

Home > js > SyntaxHighlighter 2.0 でas3を表示する

Recent Comments
Recent Trackback
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。