Changes between Version 3 and Version 4 of WikiHtml


Ignore:
Timestamp:
Dec 30, 2016, 2:54:47 AM (8 years ago)
Author:
trac
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • WikiHtml

    v3 v4  
    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
     3Trac supports the display of HTML in any wiki context, by using the `#!html` [wiki:WikiProcessors WikiProcessor].
     4
     5However, this HTML has to be [http://en.wikipedia.org/wiki/Well-formed_element well-formed].
     6In particular, you can't insert a start tag in an `#!html` block, resume normal wiki text and insert the corresponding end tag in a second `#!html` block.
     7
     8Fortunately, for creating styled <div>s, <span>s  or even complex tables containing arbitrary Wiki text, there is a powerful alternative: `#!div`, `#!span` and `#!table`, `#!tr`, `#!td` and `#!th` blocks. Those Wiki processors are built-in and do not require additional packages to be installed.
     9
     10== How to use `#!html` == #HowtoUseHTML
     11To inform the wiki engine that a block of text should be treated as HTML, use the ''html'' processor:
     12
     13||= Wiki Markup =||= Display =||
    2014{{{#!td
    2115  {{{
    2216  {{{
    2317  #!html
    24   <h1 style="text-align: right; color: blue">HTML テスト</h1>
     18  <h1 style="text-align: right; color: blue">HTML Test</h1>
    2519  }}}
    2620  }}}
    … …  
    2923  {{{
    3024  #!html
    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"
    47   **important** は定義済みのクラスです。
     25  <h1 style="text-align: right; color: blue">HTML Test</h1>
     26  }}}
     27}}}
     28
     29Note that Trac sanitizes your HTML code before displaying it. That means that potentially dangerous constructs, such as Javascript event handlers, will be removed from the output.
     30
     31The filtering is done by [http://genshi.edgewall.org/ Genshi] and the output will be a well-formed fragment of HTML. This means that you can no longer use two HTML blocks, one for opening a <div> and another for closing it, in order to wrap arbitrary wiki text.
     32The new way to wrap any wiki content inside a <div> is to use the `#!div` Wiki processor.
     33
     34== How to use `#!div` and `#!span` == #HowtoUseDivSpan
     35
     36||= Wiki Markup =||= Display =||
     37{{{#!td
     38  {{{
     39  {{{
     40  #!div class="important" 
     41  **important** is a predefined class.
    4842  }}}
    4943  }}}
    … …  
    5145  {{{
    5246  #!div style="border: 1pt dotted; margin: 1em"
    53   **wikipage** はクラスが指定されていない場合に
    54   使用される別の定義済みクラスです。
     47  **wikipage** is another predefined class that will
     48  be used when no class is specified.
    5549  }}}
    5650  }}}
    … …  
    5852  {{{
    5953  #!div class="compact" style="border: 1pt dotted; margin: 1em"
    60   **compact** は最小限に `<div>` 内のパディングを
    61   軽減するための別の定義済みクラスです。
     54  **compact** is another predefined class reducing
     55  the padding within the `<div>` to a minimum.
    6256  }}}
    6357  }}}
    … …  
    6559  {{{
    6660  #!div class="wikipage compact" style="border: 1pt dotted"
    67   クラスは組み合わせることができます (ここでは **wikipage** と **compact**)
    68   この場合の結果は、//垂直方向の// パディングが
    69   軽減されますが、見出しのため水平方向のスペースが
    70   残っています。
     61  Classes can be combined (here **wikipage** and **compact**)
     62  which results in this case in reduced //vertical//
     63  padding but there's still some horizontal space for coping
     64  with headings.
    7165  }}}
    7266  }}}
    … …  
    7468  {{{
    7569  #!div class="" style="border: 1pt dotted; margin: 1em"
    76   明確にクラスを指定しないことは、
    77   属性にクラスを指定しないことと同じでは //なく// 、
    78   デフォルトクラスの //wikipage// を削除するようなものです。
     70  Explicitly specifying no classes is //not// the same
     71  as specifying no class attribute, as this will remove
     72  the //wikipage// default class.
    7973  }}}
    8074  }}}
    … …  
    8377
    8478  {{{
    85   #!div class="important"
    86   **important** は 定義済みのクラスです。
     79  #!div class="important" 
     80  **important** is a predefined class.
    8781  }}}
    8882
    8983  {{{
    9084  #!div style="border: 1pt dotted; margin: 1em"
    91   **wikipage** はクラスが指定されていない場合に
    92   使用される別の定義済みクラスです。
     85  **wikipage** is another predefined class that will
     86  be used when no class is specified.
    9387  }}}
    9488
    9589  {{{
    9690  #!div class="compact" style="border: 1pt dotted; margin: 1em"
    97   **compact** は最小限に `<div>` 内のパディングを
    98   軽減するための別の定義済みクラスです。
     91  **compact** is another predefined class reducing
     92  the padding within the `<div>` to a minimum.
    9993  }}}
    10094
    10195  {{{
    10296  #!div class="wikipage compact" style="border: 1pt dotted"
    103   クラスは組み合わせることができます (ここでは **wikipage** と **compact**)
    104   この場合の結果は、//垂直方向の// パディングが
    105   軽減されますが、見出しのため水平方向のスペースが
    106   残っています。
     97  Classes can be combined (here **wikipage** and **compact**)
     98  which results in this case in reduced //vertical//
     99  padding but there's still some horizontal space for coping
     100  with headings.
    107101  }}}
    108102
    109103  {{{
    110104  #!div class="" style="border: 1pt dotted; margin: 1em"
    111   明確にクラスを指定しないことは、
    112   属性にクラスを指定しないことと同じでは //なく// 、
    113   デフォルトクラスの //wikipage// を削除するようなものです。
    114   }}}
    115 
    116 }}}
    117 
    118 Note: `#!div` ブロックの内容に 1 つもしくは複数の段落が含まれる場合、上下にマージンが追加されます。これは、上記の例にある通り、上下のパディングをもたらします。コンテンツの上下のマージンを削除するためには、`#!div` ブロックの class 属性に `compact` を追加して下さい。 `wikipage` と `compact` の他に予め定義された値は、 `important` です。これを指定すると段落を目立たせることができます。 例えば、その他の CSS のクラスは、 `site/style.css` ファイル経由で定義することができます。 [TracInterfaceCustomization#SiteAppearance サイトの外観] を参照して下さい。
    119 
    120 span については、むしろマクロ呼び出しのシンタックスを使用するべきです:
    121 ||= Wiki マークアップ =||
    122 {{{#!td
    123   {{{
    124   Hello
     105  Explicitly specifying no classes is //not// the same
     106  as specifying no class attribute, as this will remove
     107  the //wikipage// default class.
     108  }}}
     109
     110}}}
     111
     112Note 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 content, 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.
     113
     114For spans, you should use the Macro call syntax:
     115||= Wiki Markup =||
     116{{{#!td
     117  {{{
     118  Hello 
    125119  [[span(''WORLD'' (click [#anchor here]), style=color: green; font-size: 120%, id=anchor)]]!
    126120  }}}
    127121}}}
    128122|---------------------------------------------------------------------------------
    129 ||= 表示 =||
     123||= Display =||
    130124{{{#!td style="padding-left: 2em"
    131125  Hello
    … …  
    133127}}}
    134128
    135 == `#!td` とその他の表関連のプロセッサの使い方 == #Tables
    136 
    137 実際に、それぞれのテーブル行やヘッダのセルを作成するためには、 `#!td` や `#!th` がメインのプロセッサになります。その他、 `#!table` や `#!tr` プロセッサは`#!td` や `#!th` プロセッサがこれらのプロセッサの役割を自動的に行なってしまうため、テーブル構造を紹介するためには必要ではありません。行セパレータ `|-` を新しい行を始める際に必要に応じて使うことができます。しかし場合によっては、 `#!tr` ブロックを使用する方が好ましいかもしれません。 `#!tr` ブロックの方がより正式なグルーピングを提供することができ、より多くのインデントレベルを提供できる可能性があります。`#!table` や `#!tr` プロセッサを使用する主な目的は、 ''style'' や ''valign'' などで HTML の属性を指定できることです。
    138 
    139 ||= Wiki マークアップ =||= 表示 =||
     129== How to use `#!td` and other table related processors == #Tables
     130
     131The `#!td` or `#!th` processors should be used to create table data and table 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.
     132
     133||= Wiki Markup =||= Display =||
    140134{{{#!td
    141135 {{{
    142  リッチコンテンツを含んだ 2x2 の簡単な表:
     136 Simple 2x2 table with rich content:
    143137 {{{#!th align=left
    144   - 左
    145   - ヘッダ
     138  - Left
     139  - Header
    146140 }}}
    147141 {{{#!th align=left
    148   - 右
    149   - ヘッダ
     142  - Right
     143  - Header
    150144 }}}
    151145 |----------------------------------
    152146 {{{#!td style="background: #ffd"
    153   - 左
    154   - 内容
     147  - Left
     148  - Content
    155149 }}}
    156150 {{{#!td style="vertical-align: top"
    157  右内容
     151 !RightContent
    158152 }}}
    159153 |----------------------------------
    160  || ... パイプでつなげたセルも||\
    161  ||くっつけることができます ||
     154 || ... and this can be mixed||\
     155 ||with pipe-based cells ||
    162156 {{{#!td colspan=2
    163  あなたのコンテンツにより適切なスタイルを
    164  選択して下さい。
    165 
    166  パイプで表の列をつなげるシンタックスについては、
    167  [WikiFormatting#Tables WikiFormatting] を参照して下さい。
    168  }}}
    169 
    170  もし、表そのものに属性を追加する
    171  必要がある場合...
    172 
     157 Pick the style the more appropriate
     158 to your content
     159 
     160 See WikiFormatting#Tables for details
     161 on the pipe-based table syntax.
     162 }}}
     163 
     164 If one needs to add some
     165 attributes to the table itself...
     166 
    173167 {{{
    174168 #!table style="border:none;text-align:center;margin:auto"
    175169   {{{#!tr ====================================
    176170     {{{#!th style="border: none"
    177      左 ヘッダ
     171     Left header
    178172     }}}
    179173     {{{#!th style="border: none"
    180      右 ヘッダ
     174     Right header
    181175     }}}
    182176   }}}
    … …  
    203197}}}
    204198{{{#!td valign=top
    205 リッチコンテンツを含んだ 2x2 の簡単な表:
     199Simple 2x2 table with rich content:
    206200{{{#!th align=left
    207  - 左
    208  - ヘッダ
     201 - Left
     202 - Header
    209203}}}
    210204{{{#!th align=left
    211  - 右
    212  - ヘッダ
     205 - Right
     206 - Header
    213207}}}
    214208|----------------------------------
    215209{{{#!td style="background: #ffd"
    216  - 左
    217  - 内容
     210 - Left
     211 - Content
    218212}}}
    219213{{{#!td style="vertical-align: top"
    220 右内容
     214!RightContent
    221215}}}
    222216|----------------------------------
    223 || ... パイプでつなげたセルも||\
    224 ||くっつけることができます ||
     217|| ... and this can be mixed||\
     218||with pipe-based cells ||
    225219{{{#!td colspan=2
    226 あなたのコンテンツにより適切なスタイルを
    227 選択して下さい。
    228 
    229 パイプで表の列をつなげるシンタックスについては、
    230 [WikiFormatting#Tables WikiFormatting] を参照して下さい。
    231 }}}
    232 
    233 もし、表そのものに属性を追加する
    234 必要がある場合...
     220Pick the style the more appropriate
     221to your content
     222
     223See WikiFormatting#Tables for details
     224on the pipe-based table syntax.
     225}}}
     226
     227If one needs to add some
     228attributes to the table itself...
    235229
    236230{{{
    … …  
    238232  {{{#!tr ====================================
    239233    {{{#!th style="border: none"
    240     左 ヘッダ
     234    Left header
    241235    }}}
    242236    {{{#!th style="border: none"
    243     右 ヘッダ
     237    Right header
    244238    }}}
    245239  }}}
    … …  
    263257}}}
    264258
    265 Note: デフォルトの表設定では、 "wiki" の CSS クラスが適用されます。そして、この CSS クラスはヘッダのセルに対して典型的な見た目と表とセルのデフォルトの罫線設定を提供します ( このページの表にあるとおりです) このクラスを削除することによって (`#!table class=""`) 表の表示方法を自由に設定することができるようになります。特に、表、行、セルのいずれにも罫線を設定しない場合、いたるところで `style="border: no"` を指定するよりこの方法を使用したほうが、同じ効果を得るのにより効果的な方法となります。
     259Note that by default tables are assigned the "wiki" CSS class, which gives a distinctive look to the header cells and a default border to the table and cells, as can be seen for the tables on this page. By removing this class (`#!table class=""`), one regains complete control on the table presentation. In particular, neither the table nor the rows nor the cells will have a border, so this is a more effective way to get such an effect rather than having to specify a `style="border: no"` parameter everywhere.
    266260
    267261{{{#!table class=""
    268 ||= Wiki マークアップ =||= 表示 =||
     262||= Wiki Markup =||= Display =||
    269263 {{{#!td
    270264  {{{
    … …  
    273267  || 10|| 20|| 30||
    274268  || 11|| 22|| 33||
    275   ||||||=  数字  =||
     269  ||||||=  numbers  =||
    276270  }}}
    277271  }}}
    … …  
    282276  || 10|| 20|| 30||
    283277  || 11|| 22|| 33||
    284   ||||||=  数字  =||
    285   }}}
    286  }}}
    287 }}}
    288 
    289 他のクラスを代替手段として指定することもできます ([TracInterfaceCustomization#SiteAppearance site/style.css] であなた自身のスタイルシートを定義できることを忘れないで下さい)
    290 
    291 ||= Wiki マークアップ =||= 表示 =||
     278  ||||||=  numbers  =||
     279  }}}
     280 }}}
     281}}}
     282
     283Other classes can be specified as alternatives (remember that you can define your own in [TracInterfaceCustomization#SiteAppearance site/style.css]).
     284
     285||= Wiki Markup =||= Display =||
    292286{{{#!td
    293287  {{{
    … …  
    296290  || 10|| 20|| 30||
    297291  || 11|| 22|| 33||
    298   ||||||=  数字  =||
     292  ||||||=  numbers  =||
    299293  }}}
    300294  }}}
    … …  
    305299  || 10|| 20|| 30||
    306300  || 11|| 22|| 33||
    307   ||||||=  数字  =||
    308   }}}
    309 }}}
    310 
    311 
    312 == HTML コメント ==#HTMLcomments
    313 HTML コメントは `html` プロセッサの出力から除外されます。 HTML コメントを wiki ページに追加するために、 `htmlcomment` プロセッサを使用して下さい (0.12 以降) 。例えば、下記のようなコードブロックになります:
    314 ||= Wiki マークアップ =||
     301  ||||||=  numbers  =||
     302  }}}
     303}}}
     304
     305== HTML comments ==
     306HTML comments are stripped from the output of the `html` processor. To add an HTML comment to a wiki page, use the `htmlcomment` processor, available since Trac 0.12:
     307||= Wiki Markup =||
    315308{{{#!td
    316309  {{{
    317310  {{{
    318311  #!htmlcomment
    319   このブロックは HTML コメントとして処理されます。
    320   <tags> や &entities; を含めることができ、これらは出力時にエスケープされません。
     312  This block is translated to an HTML comment.
     313  It can contain <tags> and &entities; that will not be escaped in the output.
    321314  }}}
    322315  }}}
    323316}}}
    324317|---------------------------------------------------------------------------------
    325 ||= 表示 =||
     318||= Display =||
    326319{{{#!td
    327320  {{{
    328321  <!--
    329   このブロックは HTML コメントとして処理されます。
    330   <tags> や &entities; を含めることができ、これらは出力時にエスケープされません。
     322  This block is translated to an HTML comment.
     323  It can contain <tags> and &entities; that will not be escaped in the output.
    331324  -->
    332325  }}}
    333326}}}
    334327
    335 Note: "`--`" という文字の並びは、 HTML コメントでは使用できません。レンダリング時にエラーが発生します。
    336 
    337 
    338 == より詳しい情報 == #MoreInformation
     328Please note that the character sequence "`--`" is not allowed in HTML comments, and will generate a rendering error.
     329
     330
     331== More Information ==
    339332
    340333 * http://www.w3.org/ -- World Wide Web Consortium