| 1 | = Wiki テキスト内で HTML を使用する = #UsingHTMLinWikiText |
| 2 | |
| 3 | HTML [wiki:WikiProcessors WikiProcessor] の機能によって、 Trac では Wiki コンテキスト内での HTML 利用が可能です。 |
| 4 | |
| 5 | HTML 対応は内蔵機能であり、追加パッケージのインストールを必要としません。 |
| 6 | |
| 7 | == HTML の使い方 == #HowtoUseHTML |
| 8 | Wiki エンジンにテキストブロックが HTML として取り扱われるよう、 ''html'' プロセッサを使用するという情報を与えます。 |
| 9 | |
| 10 | この例のような表現は: |
| 11 | {{{ |
| 12 | #!html |
| 13 | <pre class="wiki">{{{ |
| 14 | #!html |
| 15 | <h1 style="text-align: right; color: blue">HTML テスト</h1> |
| 16 | }}}</pre> |
| 17 | }}} |
| 18 | |
| 19 | このように表示されます: |
| 20 | {{{ |
| 21 | #!html |
| 22 | <h1 style="text-align: right; color: blue">HTML テスト</h1> |
| 23 | }}} |
| 24 | |
| 25 | Trac が HTML コードを表示する前にサニタイズすることに注意して下さい。つまり Javascript のイベントハンドラのような潜在的に危険なコードを使おうとしても、出力から削除されるということです。 |
| 26 | |
| 27 | 0.11 以降では、フィルタリングは Genshi が行いますので、出力は well-formed な HTML の断片でなければなりません。言い換えれば、 <div> を開く HTML ブロックと閉じる HTML ブロックの 2 つを使って Wiki テキストを囲むことができなくなります。 |
| 28 | Wiki テキストを <div> 要素で囲むためには、以下のように div プロセッサを使用する必要があります: |
| 29 | |
| 30 | {{{ |
| 31 | {{{ |
| 32 | #!div class=important style="border: 2pt solid; text-align: center" |
| 33 | This is the ''only'' way to go in Trac 0.11 |
| 34 | }}} |
| 35 | }}} |
| 36 | |
| 37 | 結果、以下のように表示されます: |
| 38 | {{{ |
| 39 | #!div class=important style="border: 2pt solid; text-align: center" |
| 40 | This is the ''only'' way to go in Trac 0.11 |
| 41 | }}} |
| 42 | |
| 43 | Note: CSS class を指定しない場合、 `wikipage` class が追加され、 <div> 内部のヘッダに特別なレイアウトが適用されます。明示的に padding を指定したい場合、これを考慮に入れなければなりません。 (tip: [http://getfirebug.com/ Firebug を使うと良いでしょう]) |
| 44 | |
| 45 | span 要素の場合、マクロ呼び出しのシンタックスを使用できます: |
| 46 | {{{ |
| 47 | Hello [[span(''WORLD'' (click [#world-anchor here]), style=color: green; font-size: 120%, id=world-anchor)]]! |
| 48 | }}} |
| 49 | |
| 50 | 結果、以下のように表示されます: |
| 51 | Hello [[span(''WORLD'' (click [#world-anchor here]), style=color: green; font-size: 120%, id=world-anchor)]]! |
| 52 | |
| 53 | |
| 54 | == 画像 == #Images |
| 55 | 画像をインライン表示したい場合、ファイル名の後に '''?format=raw''' を追加してください。例えば、 Trac ロゴをインライン表示したい場合、以下のようなシンタックスになります: |
| 56 | |
| 57 | {{{ |
| 58 | <img src="http://www.edgewall.org/gfx/trac_logo.png?format=raw" /> |
| 59 | }}} |
| 60 | |
| 61 | {{{ |
| 62 | #!html |
| 63 | <img src="http://www.edgewall.org/gfx/trac_logo.png?format=raw" /> |
| 64 | }}} |
| 65 | |
| 66 | |
| 67 | |
| 68 | == より詳しい情報 == #MoreInformation |
| 69 | |
| 70 | * http://www.w3.org/ -- World Wide Web Consortium |
| 71 | * http://www.w3.org/MarkUp/ -- HTML Markup Home Page |
| 72 | |
| 73 | ---- |
| 74 | See also: WikiProcessors, WikiFormatting, WikiRestructuredText |