ダウンロード＆資料

• SWFObject v2.0
  http://code.google.com/p/swfobject/
• SWFObject v2.0 ドキュメント日本語訳
  http://mtl.recruit.co.jp/blog/2007/10/swfobject_v20.html
• SWFObject 2 HTML and JavaScript ジェネレーター v1.2
  http://www.tonpoo.com/docs/swfobject_generator/

サンプルページ

• http://splitchin.com/sample/javascript/swfobject/index_dynamic.html

1. swfobject.jsを読み込む

<script type="text/javascript" src="swfobject.js"></script>

2. swfobject.jsを読み込む

<script type="text/javascript">
var flashvars = {
// ここに、swfに渡す引数
}
var params = {
wmode: "transparent"　//params指定
};
var attributes = {};
// swf(FLASH素材)ファイル名、
// 置き換えるオブジェクト名(swfを組み込むdivタグのid名)、
// 横の長さ、
// 縦の長さ,
swfobject.embedSWF("mp3moji.swf", "mp3moji", "180", "15", "9.0.0","", flashvars, params, attributes);
</script>

3. Flash組み込み部分　＆　Flash代替コンテンツ

<div id="mp3moji">
<!--  Flash代替コンテンツ -->
<a href="test.mp3">voice01</a>
<!-- / Flash代替コンテンツ -->
</div>

よく、行番号と、カラー分けでコードを表示しているテック系の
サイトを見かけるので、ライブラリを探してみました。

コードをそのまま表示するためのライブラリ、「SyntaxHighlighter」.
このブログはWordPressベースなので、JSとWordPressプラグインと
２通りのやり方を試してみました。

方法 1.） JavaScript

• SyntaxHighlighter2.0
  http://alexgorbatchev.com/wiki/SyntaxHighlighte

preタグに記述する方法

<pre class="brush: html">
<!-- ソースの中身 -->
<ul>
<li>テストHTML</li>
</ul>
<!-- ソースの中身 -->
</pre>

textareaタグに記述する方法

<textarea name="code" class="brush: html" cols="60" rows="10">
<!-- ソースの中身 -->
<ul>
<li>テストHTML</li>
</ul>
<!-- /ソースの中身 -->
</textarea>

• 導入サンプルHTML
  http://splitchin.com/sample/javascript/syntaxhighlighter_2/test.html

方法 ２.）WordPress プラグイン

• プラグインダウンロード
  http://wordpress.org/extend/plugins/syntaxhighlighter/installation/

［code language=”"js"”］・・・［/code］のように書きます。（［　］は半角記号に）

<ul>
<li>test</li>
</ul>

対応言語