= Wiki テキスト内で HTML を使用する = #UsingHTMLinWikiText

HTML [wiki:WikiProcessors WikiProcessor] の機能によって、 Trac では Wiki コンテキスト内での HTML 利用が可能です。

HTML 対応は内蔵機能であり、追加パッケージのインストールを必要としません。

== HTML の使い方 == #HowtoUseHTML
Wiki エンジンにテキストブロックが HTML として取り扱われるよう、 ''html'' プロセッサを使用するという情報を与えます。

この例のような表現は:
{{{
#!html
<pre class="wiki">{{{
#!html
&lt;h1 style="text-align: right; color: blue"&gt;HTML テスト&lt;/h1&gt;
}}}</pre>
}}}

このように表示されます:
{{{
#!html
<h1 style="text-align: right; color: blue">HTML テスト</h1>
}}}

Trac が HTML コードを表示する前にサニタイズすることに注意して下さい。つまり Javascript のイベントハンドラのような潜在的に危険なコードを使おうとしても、出力から削除されるということです。

0.11 以降では、フィルタリングは Genshi が行いますので、出力は well-formed な HTML の断片でなければなりません。言い換えれば、 <div> を開く HTML ブロックと閉じる HTML ブロックの 2 つを使って Wiki テキストを囲むことができなくなります。
Wiki テキストを <div> 要素で囲むためには、以下のように div プロセッサを使用する必要があります:

{{{
{{{
#!div class=important style="border: 2pt solid; text-align: center"
This is the ''only'' way to go in Trac 0.11
}}}
}}}

結果、以下のように表示されます:
{{{
#!div class=important style="border: 2pt solid; text-align: center"
This is the ''only'' way to go in Trac 0.11
}}}

Note: CSS class を指定しない場合、 `wikipage` class が追加され、 <div> 内部のヘッダに特別なレイアウトが適用されます。明示的に padding を指定したい場合、これを考慮に入れなければなりません。 (tip: [http://getfirebug.com/ Firebug を使うと良いでしょう])

span 要素の場合、マクロ呼び出しのシンタックスを使用できます:
{{{
 Hello [[span(''WORLD'' (click [#world-anchor here]), style=color: green; font-size: 120%, id=world-anchor)]]!
}}}

結果、以下のように表示されます:
 Hello [[span(''WORLD'' (click [#world-anchor here]), style=color: green; font-size: 120%, id=world-anchor)]]!


== 画像 == #Images
画像をインライン表示したい場合、ファイル名の後に '''?format=raw''' を追加してください。例えば、 Trac ロゴをインライン表示したい場合、以下のようなシンタックスになります:

{{{
 <img src="http://www.edgewall.org/gfx/trac_logo.png?format=raw" />
}}}

{{{
#!html
<img src="http://www.edgewall.org/gfx/trac_logo.png?format=raw" />
}}}



== より詳しい情報 == #MoreInformation

 * http://www.w3.org/ -- World Wide Web Consortium
 * http://www.w3.org/MarkUp/ -- HTML Markup Home Page

----
See also:  WikiProcessors, WikiFormatting, WikiRestructuredText