| | 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 |