| 1 | | = Wiki テキスト内で HTML を使用する = #UsingHTMLinWikiText |
| 2 | | |
| 3 | | `#!html` [wiki:WikiProcessors Wiki プロセッサ] の機能によって、 Trac では Wiki コンテキスト内での HTML 利用が可能です。 |
| 4 | | |
| 5 | | しかし、 HTML は well-formed でなければいけないという制約があります。 |
| 6 | | とりわけ、 1 つ目の `#!html` ブロックに開始タグを挿入し、その後 |
| 7 | | 普通の wiki テキストを続けて、2つ目の |
| 8 | | `#!html` ブロックに 1 つ目のブロックに挿入した開始タグに対応する終了タグを挿入することはできません。 |
| 9 | | |
| 10 | | 幸いなことに、 <div> や <span> やもっと複雑なスタイルを使用して |
| 11 | | 任意の Wiki テキストを含んだ表を作成する場合は、強力な代替手段があります: |
| 12 | | 表専用の `#!div`, `#!span`, `#!table`, `#!tr`, `#!td`, `#!th` ブロックを使用することです。 |
| 13 | | |
| 14 | | これらの Wiki プロセッサはビルトインされているので、追加で他のパッケージをインストールする必要はありません。 |
| 15 | | |
| 16 | | == `#!html` の使い方 == #HowtoUseHTML |
| 17 | | テキストブロックが HTML として取り扱われるよう、 Wiki エンジンに ''html'' プロセッサを使用するという情報を与えます。 |
| 18 | | |
| 19 | | ||= Wiki マークアップ =||= 表示 =|| |
| | 1 | = Using HTML in Wiki Text = |
| | 2 | |
| | 3 | Trac supports inserting HTML into any wiki context, accomplished using the `#!html` [wiki:WikiProcessors WikiProcessor]. |
| | 4 | |
| | 5 | However a constraint is that this HTML has to be well-formed. |
| | 6 | In particular you can't insert a start tag in an `#!html` block, |
| | 7 | resume normal wiki text and insert the corresponding end tag in a |
| | 8 | second `#!html` block. |
| | 9 | |
| | 10 | Fortunately, for creating styled <div>s, <span>s or even complex tables |
| | 11 | containing arbitrary Wiki text, there's a powerful alternative: use of |
| | 12 | dedicated `#!div`, `#!span` and `#!table`, `#!tr`, `#!td` and `#!th` blocks. |
| | 13 | |
| | 14 | Those Wiki processors are built-in, and does not require installing any additional packages. |
| | 15 | |
| | 16 | == How to use `#!html` == #HowtoUseHTML |
| | 17 | To inform the wiki engine that a block of text should be treated as HTML, use the ''html'' processor. |
| | 18 | |
| | 19 | ||= Wiki Markup =||= Display =|| |
| 31 | | <h1 style="text-align: right; color: blue">HTML テスト</h1> |
| 32 | | }}} |
| 33 | | }}} |
| 34 | | |
| 35 | | Trac が HTML コードを表示する前にサニタイズすることに注意して下さい。つまり Javascript のイベントハンドラのような潜在的に危険なコードを使おうとしても、出力から削除されるということです。 |
| 36 | | |
| 37 | | 0.11 以降では、フィルタリングは Genshi が行いますので、出力は well-formed な HTML の断片でなければなりません。 上記イントロダクションで記述したとおり、 <div> を開く HTML ブロックと閉じる HTML ブロックの 2 つを使って Wiki テキストを囲むことができなくなります。 |
| 38 | | <div> タグ内部に含まれている Wiki テキストをラップする新しい方法として、 `#!div` Wiki プロセッサを使用する方法があります。 |
| 39 | | |
| 40 | | == `#!div` and `#!span` ブロックの使い方 == #HowtoUseDivSpan |
| 41 | | |
| 42 | | ||= Wiki マークアップ =||= 表示 =|| |
| 43 | | {{{#!td |
| 44 | | {{{ |
| 45 | | {{{ |
| 46 | | #!div class="important" style="border: 2pt solid; text-align: center" |
| 47 | | これは Trac バージョン 0.11 における ''唯一'' の方法です。 |
| 48 | | }}} |
| 49 | | |
| 50 | | {{{ |
| 51 | | #!div class="wikipage" style="border: 1pt dotted" |
| 52 | | `wikipage` でのみ使用可 ( class 属性を指定しないのと同じです ) |
| 53 | | }}} |
| 54 | | |
| 55 | | {{{ |
| 56 | | #!div class="wikipage compact " style="border: 1pt solid" |
| 57 | | 複数の class を指定 (`compact` と `wikipage`) |
| 58 | | }}} |
| 59 | | |
| 60 | | {{{ |
| 61 | | #!div class="compact" style="border: 1pt dotted" |
| 62 | | `compact` のみ |
| 63 | | }}} |
| 64 | | |
| 65 | | {{{ |
| 66 | | #!div class="" style="border: 1pt solid" |
| 67 | | class 属性の値を指定しない (class 属性そのものを指定しないのとは //異なります//) |
| | 31 | <h1 style="text-align: right; color: blue">HTML Test</h1> |
| | 32 | }}} |
| | 33 | }}} |
| | 34 | |
| | 35 | Note that Trac sanitizes your HTML code before displaying it. That means that if you try to use potentially dangerous constructs such as Javascript event handlers, those will be removed from the output. |
| | 36 | |
| | 37 | Since 0.11, the filtering is done by Genshi, and as such, the produced output will be a well-formed fragment of HTML. As noted above in the introduction, this mean that you can no longer use two HTML blocks, one for opening a <div>, the second for closing it, in order to wrap arbitrary wiki text. |
| | 38 | The new way to wrap any wiki content inside a <div> is to use the `#!div` Wiki processor. |
| | 39 | |
| | 40 | == How to use `#!div` and `#!span` == #HowtoUseDivSpan |
| | 41 | |
| | 42 | ||= Wiki Markup =||= Display =|| |
| | 43 | {{{#!td |
| | 44 | {{{ |
| | 45 | {{{ |
| | 46 | #!div class="important" |
| | 47 | **important** is a predefined class. |
| | 48 | }}} |
| | 49 | }}} |
| | 50 | {{{ |
| | 51 | {{{ |
| | 52 | #!div style="border: 1pt dotted; margin: 1em" |
| | 53 | **wikipage** is another predefined class that will |
| | 54 | be used when no class is specified. |
| | 55 | }}} |
| | 56 | }}} |
| | 57 | {{{ |
| | 58 | {{{ |
| | 59 | #!div class="compact" style="border: 1pt dotted; margin: 1em" |
| | 60 | **compact** is another predefined class reducing |
| | 61 | the padding within the `<div>` to a minimum. |
| | 62 | }}} |
| | 63 | }}} |
| | 64 | {{{ |
| | 65 | {{{ |
| | 66 | #!div class="wikipage compact" style="border: 1pt dotted" |
| | 67 | Classes can be combined (here **wikipage** and **compact**) |
| | 68 | which results in this case in reduced //vertical// |
| | 69 | padding but there's still some horizontal space for coping |
| | 70 | with headings. |
| | 71 | }}} |
| | 72 | }}} |
| | 73 | {{{ |
| | 74 | {{{ |
| | 75 | #!div class="" style="border: 1pt dotted; margin: 1em" |
| | 76 | Explicitly specifying no classes is //not// the same |
| | 77 | as specifying no class attribute, as this will remove |
| | 78 | the //wikipage// default class. |
| 72 | | {{{ |
| 73 | | #!div class="important" style="border: 2pt solid; text-align: center" |
| 74 | | これは Trac バージョン 0.11 における ''唯一'' の方法です。 |
| 75 | | }}} |
| 76 | | |
| 77 | | {{{ |
| 78 | | #!div class="wikipage" style="border: 1pt dotted" |
| 79 | | `wikipage` でのみ使用可 ( class 属性を指定しないのと同じです ) |
| 80 | | }}} |
| 81 | | |
| 82 | | {{{ |
| 83 | | #!div class="wikipage compact " style="border: 1pt solid" |
| 84 | | 複数の class を指定 (`compact` と `wikipage`) |
| 85 | | }}} |
| 86 | | |
| 87 | | {{{ |
| 88 | | #!div class="compact" style="border: 1pt dotted" |
| 89 | | `compact` のみ |
| 90 | | }}} |
| 91 | | |
| 92 | | {{{ |
| 93 | | #!div class="" style="border: 1pt solid" |
| 94 | | class 属性の値を指定しない (class 属性そのものを指定しないのとは //異なります//) |
| 95 | | }}} |
| 96 | | }}} |
| 97 | | |
| 98 | | Note: `#!div` ブロックの内容に 1 つもしくは複数の段落が含まれる場合、上下にマージンが追加されます。これは、上記の例にある通り、上下のパディングをもたらします。コンテンツの上下のマージンを削除するためには、`#!div` ブロックの class 属性に `compact` を追加して下さい。 `wikipage` と `compact` の他に予め定義された値は、 `important` です。これを指定すると段落を目立たせることができます。 例えば、その他の CSS のクラスは、 `site/style.css` ファイル経由で定義することができます。 [TracInterfaceCustomization#SiteAppearance サイトの外観] を参照して下さい。 |
| 99 | | |
| 100 | | span については、むしろマクロ呼び出しのシンタックスを使用するべきです: |
| 101 | | ||= Wiki マークアップ =|| |
| | 83 | |
| | 84 | {{{ |
| | 85 | #!div class="important" |
| | 86 | **important** is a predefined class. |
| | 87 | }}} |
| | 88 | |
| | 89 | {{{ |
| | 90 | #!div style="border: 1pt dotted; margin: 1em" |
| | 91 | **wikipage** is another predefined class that will |
| | 92 | be used when no class is specified. |
| | 93 | }}} |
| | 94 | |
| | 95 | {{{ |
| | 96 | #!div class="compact" style="border: 1pt dotted; margin: 1em" |
| | 97 | **compact** is another predefined class reducing |
| | 98 | the padding within the `<div>` to a minimum. |
| | 99 | }}} |
| | 100 | |
| | 101 | {{{ |
| | 102 | #!div class="wikipage compact" style="border: 1pt dotted" |
| | 103 | Classes can be combined (here **wikipage** and **compact**) |
| | 104 | which results in this case in reduced //vertical// |
| | 105 | padding but there's still some horizontal space for coping |
| | 106 | with headings. |
| | 107 | }}} |
| | 108 | |
| | 109 | {{{ |
| | 110 | #!div class="" style="border: 1pt dotted; margin: 1em" |
| | 111 | Explicitly specifying no classes is //not// the same |
| | 112 | as specifying no class attribute, as this will remove |
| | 113 | the //wikipage// default class. |
| | 114 | }}} |
| | 115 | |
| | 116 | }}} |
| | 117 | |
| | 118 | Note that the contents of a `#!div` block are contained in one or more paragraphs, which have a non-zero top and bottom margin. This leads to the top and bottom padding in the example above. To remove the top and bottom margin of the contents, add the `compact` class to the `#!div`. Another predefined class besides `wikipage` and `compact` is `important`, which can be used to make a paragraph stand out. Extra CSS classes can be defined via the `site/style.css` file for example, see TracInterfaceCustomization#SiteAppearance. |
| | 119 | |
| | 120 | For spans, you should rather use the Macro call syntax: |
| | 121 | ||= Wiki Markup =|| |
| 115 | | == `#!td` とその他の表関連のプロセッサの使い方 == #Tables |
| 116 | | |
| 117 | | 実際に、それぞれのテーブル行やヘッダのセルを作成するためには、 `#!td` や `#!th` がメインのプロセッサになります。その他、 `#!table` や `#!tr` プロセッサは`#!td` や `#!th` プロセッサがこれらのプロセッサの役割を自動的に行なってしまうため、テーブル構造を紹介するためには必要ではありません。行セパレータ `|-` を新しい行を始める際に必要に応じて使うことができます。しかし場合によっては、 `#!tr` ブロックを使用する方が好ましいかもしれません。 `#!tr` ブロックの方がより正式なグルーピングを提供することができ、より多くのインデントレベルを提供できる可能性があります。`#!table` や `#!tr` プロセッサを使用する主な目的は、 ''style'' や ''valign'' などで HTML の属性を指定できることです。 |
| 118 | | |
| 119 | | ||= Wiki マークアップ =||= 表示 =|| |
| | 135 | == How to use `#!td` and other table related processors == #Tables |
| | 136 | |
| | 137 | `#!td` or `#!th` processors are actually the main ones, for creating table data and header cells, respectively. The other processors `#!table` and `#!tr` are not required for introducing a table structure, as `#!td` and `#!th` will do this automatically. The `|-` row separator can be used to start a new row when needed, but some may prefer to use a `#!tr` block for that, as this introduces a more formal grouping and offers the possibility to use an extra level of indentation. The main purpose of the `#!table` and `#!tr` is to give the possibility to specify HTML attributes, like ''style'' or ''valign'' to these elements. |
| | 138 | |
| | 139 | ||= Wiki Markup =||= Display =|| |
