Changes between Version 1 and Version 2 of WikiHtml


Ignore:
Timestamp:
Sep 2, 2019, 4:56:56 PM (5 years ago)
Author:
trac
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • WikiHtml

    v1 v2  
    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 マークアップ =||= 表示 =||
    20 {{{#!td
    21   {{{
    22   {{{
    23   #!html
    24   <h1 style="text-align: right; color: blue">HTML テスト</h1>
     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 [https://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
     8For 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 =||
     14{{{#!td
     15  {{{
     16  {{{#!html
     17  <h1 style="text-align: right; color: blue">HTML Test</h1>
    2518  }}}
    2619  }}}
    2720}}}
    2821{{{#!td style="padding-left: 2em"
    29   {{{
    30   #!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** は定義済みのクラスです。
    48   }}}
    49   }}}
    50   {{{
    51   {{{
    52   #!div style="border: 1pt dotted; margin: 1em"
    53   **wikipage** はクラスが指定されていない場合に
    54   使用される別の定義済みクラスです。
    55   }}}
    56   }}}
    57   {{{
    58   {{{
    59   #!div class="compact" style="border: 1pt dotted; margin: 1em"
    60   **compact** は最小限に `<div>` 内のパディングを
    61   軽減するための別の定義済みクラスです。
    62   }}}
    63   }}}
    64   {{{
    65   {{{
    66   #!div class="wikipage compact" style="border: 1pt dotted"
    67   クラスは組み合わせることができます (ここでは **wikipage** と **compact**)
    68   この場合の結果は、//垂直方向の// パディングが
    69   軽減されますが、見出しのため水平方向のスペースが
    70   残っています。
    71   }}}
    72   }}}
    73   {{{
    74   {{{
    75   #!div class="" style="border: 1pt dotted; margin: 1em"
    76   明確にクラスを指定しないことは、
    77   属性にクラスを指定しないことと同じでは //なく// 、
    78   デフォルトクラスの //wikipage// を削除するようなものです。
     22  {{{#!html
     23  <h1 style="text-align: right; color: blue">HTML Test</h1>
     24  }}}
     25}}}
     26
     27Note 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.
     28
     29The filtering is done by [https://genshi.edgewall.org/ Genshi] and the output will be a well-formed fragment of HTML. This means that you cannot use two HTML blocks, one for opening a <div> and another for closing it, in order to wrap arbitrary wiki text.
     30
     31== How to use `#!div` and `#!span` == #HowtoUseDivSpan
     32
     33||= Wiki Markup =||= Display =||
     34{{{#!td
     35  {{{
     36  {{{#!div class="important"
     37  **important** is a predefined class.
     38  }}}
     39  }}}
     40  {{{
     41  {{{#!div style="border: 1pt dotted; margin: 1em"
     42  **wikipage** is another predefined class that will
     43  be used when no class is specified.
     44  }}}
     45  }}}
     46  {{{
     47  {{{#!div class="compact" style="border: 1pt dotted; margin: 1em"
     48  **compact** is another predefined class reducing
     49  the padding within the `<div>` to a minimum.
     50  }}}
     51  }}}
     52  {{{
     53  {{{#!div class="wikipage compact" style="border: 1pt dotted"
     54  Classes can be combined (here **wikipage** and **compact**)
     55  which results in this case in reduced //vertical//
     56  padding but there's still some horizontal space for coping
     57  with headings.
     58  }}}
     59  }}}
     60  {{{
     61  {{{#!div class="" style="border: 1pt dotted; margin: 1em"
     62  Explicitly specifying no classes is //not// the same
     63  as specifying no class attribute, as this will remove
     64  the //wikipage// default class.
    7965  }}}
    8066  }}}
    … …  
    8268{{{#!td style="padding-left: 2em"
    8369
    84   {{{
    85   #!div class="important"
    86   **important** は 定義済みのクラスです。
    87   }}}
    88 
    89   {{{
    90   #!div style="border: 1pt dotted; margin: 1em"
    91   **wikipage** はクラスが指定されていない場合に
    92   使用される別の定義済みクラスです。
    93   }}}
    94 
    95   {{{
    96   #!div class="compact" style="border: 1pt dotted; margin: 1em"
    97   **compact** は最小限に `<div>` 内のパディングを
    98   軽減するための別の定義済みクラスです。
    99   }}}
    100 
    101   {{{
    102   #!div class="wikipage compact" style="border: 1pt dotted"
    103   クラスは組み合わせることができます (ここでは **wikipage** と **compact**)
    104   この場合の結果は、//垂直方向の// パディングが
    105   軽減されますが、見出しのため水平方向のスペースが
    106   残っています。
    107   }}}
    108 
    109   {{{
    110   #!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
     70  {{{#!div class="important"
     71  **important** is a predefined class.
     72  }}}
     73
     74  {{{#!div style="border: 1pt dotted; margin: 1em"
     75  **wikipage** is another predefined class that will
     76  be used when no class is specified.
     77  }}}
     78
     79  {{{#!div class="compact" style="border: 1pt dotted; margin: 1em"
     80  **compact** is another predefined class reducing
     81  the padding within the `<div>` to a minimum.
     82  }}}
     83
     84  {{{#!div class="wikipage compact" style="border: 1pt dotted"
     85  Classes can be combined (here **wikipage** and **compact**)
     86  which results in this case in reduced //vertical//
     87  padding but there's still some horizontal space for coping
     88  with headings.
     89  }}}
     90
     91  {{{#!div class="" style="border: 1pt dotted; margin: 1em"
     92  Explicitly specifying no classes is //not// the same
     93  as specifying no class attribute, as this will remove
     94  the //wikipage// default class.
     95  }}}
     96
     97}}}
     98
     99Note 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 [TracInterfaceCustomization#SiteAppearance site/style.css].
     100
     101For spans, you should use the Macro call syntax:
     102||= Wiki Markup =||
     103{{{#!td
     104  {{{
     105  Hello
    125106  [[span(''WORLD'' (click [#anchor here]), style=color: green; font-size: 120%, id=anchor)]]!
    126107  }}}
    127108}}}
    128109|---------------------------------------------------------------------------------
    129 ||= 表示 =||
     110||= Display =||
    130111{{{#!td style="padding-left: 2em"
    131112  Hello
    … …  
    133114}}}
    134115
    135 == `#!td` とその他の表関連のプロセッサの使い方 == #Tables
    136 
    137 実際に、それぞれのテーブル行やヘッダのセルを作成するためには、 `#!td` や `#!th` がメインのプロセッサになります。その他、 `#!table` や `#!tr` プロセッサは`#!td` や `#!th` プロセッサがこれらのプロセッサの役割を自動的に行なってしまうため、テーブル構造を紹介するためには必要ではありません。行セパレータ `|-` を新しい行を始める際に必要に応じて使うことができます。しかし場合によっては、 `#!tr` ブロックを使用する方が好ましいかもしれません。 `#!tr` ブロックの方がより正式なグルーピングを提供することができ、より多くのインデントレベルを提供できる可能性があります。`#!table` や `#!tr` プロセッサを使用する主な目的は、 ''style'' や ''valign'' などで HTML の属性を指定できることです。
    138 
    139 ||= Wiki マークアップ =||= 表示 =||
     116== How to use `#!td` and other table related processors #Tables
     117
     118The `#!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.
     119
     120||= Wiki Markup =||= Display =||
    140121{{{#!td
    141122 {{{
    142  リッチコンテンツを含んだ 2x2 の簡単な表:
     123 Simple 2x2 table with rich content:
    143124 {{{#!th align=left
    144   - 左
    145   - ヘッダ
     125  - Left
     126  - Header
    146127 }}}
    147128 {{{#!th align=left
    148   - 右
    149   - ヘッダ
     129  - Right
     130  - Header
    150131 }}}
    151132 |----------------------------------
    152133 {{{#!td style="background: #ffd"
    153   - 左
    154   - 内容
     134  - Left
     135  - Content
    155136 }}}
    156137 {{{#!td style="vertical-align: top"
    157  右内容
     138 !RightContent
    158139 }}}
    159140 |----------------------------------
    160  || ... パイプでつなげたセルも||\
    161  ||くっつけることができます ||
     141 || ... and this can be mixed||\
     142 ||with pipe-based cells ||
    162143 {{{#!td colspan=2
    163  あなたのコンテンツにより適切なスタイルを
    164  選択して下さい。
    165 
    166  パイプで表の列をつなげるシンタックスについては、
    167  [WikiFormatting#Tables WikiFormatting] を参照して下さい。
    168  }}}
    169 
    170  もし、表そのものに属性を追加する
    171  必要がある場合...
    172 
    173  {{{
    174  #!table style="border:none;text-align:center;margin:auto"
     144 Pick the style the more appropriate
     145 to your content
     146 
     147 See WikiFormatting#Tables for details
     148 on the pipe-based table syntax.
     149 }}}
     150 
     151 If one needs to add some
     152 attributes to the table itself...
     153 
     154 {{{#!table style="border:none;text-align:center;margin:auto"
    175155   {{{#!tr ====================================
    176156     {{{#!th style="border: none"
    177      左 ヘッダ
     157     Left header
    178158     }}}
    179159     {{{#!th style="border: none"
    180      右 ヘッダ
     160     Right header
    181161     }}}
    182162   }}}
    … …  
    203183}}}
    204184{{{#!td valign=top
    205 リッチコンテンツを含んだ 2x2 の簡単な表:
     185Simple 2x2 table with rich content:
    206186{{{#!th align=left
    207  - 左
    208  - ヘッダ
     187 - Left
     188 - Header
    209189}}}
    210190{{{#!th align=left
    211  - 右
    212  - ヘッダ
     191 - Right
     192 - Header
    213193}}}
    214194|----------------------------------
    215195{{{#!td style="background: #ffd"
    216  - 左
    217  - 内容
     196 - Left
     197 - Content
    218198}}}
    219199{{{#!td style="vertical-align: top"
    220 右内容
     200!RightContent
    221201}}}
    222202|----------------------------------
    223 || ... パイプでつなげたセルも||\
    224 ||くっつけることができます ||
     203|| ... and this can be mixed||\
     204||with pipe-based cells ||
    225205{{{#!td colspan=2
    226 あなたのコンテンツにより適切なスタイルを
    227 選択して下さい。
    228 
    229 パイプで表の列をつなげるシンタックスについては、
    230 [WikiFormatting#Tables WikiFormatting] を参照して下さい。
    231 }}}
    232 
    233 もし、表そのものに属性を追加する
    234 必要がある場合...
    235 
    236 {{{
    237 #!table style="border:none;text-align:center;margin:auto"
     206Pick the style the more appropriate
     207to your content
     208
     209See WikiFormatting#Tables for details
     210on the pipe-based table syntax.
     211}}}
     212
     213If one needs to add some
     214attributes to the table itself...
     215
     216{{{#!table style="border:none;text-align:center;margin:auto"
    238217  {{{#!tr ====================================
    239218    {{{#!th style="border: none"
    240     左 ヘッダ
     219    Left header
    241220    }}}
    242221    {{{#!th style="border: none"
    243     右 ヘッダ
     222    Right header
    244223    }}}
    245224  }}}
    … …  
    263242}}}
    264243
    265 Note: デフォルトの表設定では、 "wiki" の CSS クラスが適用されます。そして、この CSS クラスはヘッダのセルに対して典型的な見た目と表とセルのデフォルトの罫線設定を提供します ( このページの表にあるとおりです) このクラスを削除することによって (`#!table class=""`) 表の表示方法を自由に設定することができるようになります。特に、表、行、セルのいずれにも罫線を設定しない場合、いたるところで `style="border: no"` を指定するよりこの方法を使用したほうが、同じ効果を得るのにより効果的な方法となります。
     244Note 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.
    266245
    267246{{{#!table class=""
    268 ||= Wiki マークアップ =||= 表示 =||
     247||= Wiki Markup =||= Display =||
    269248 {{{#!td
    270249  {{{
    … …  
    273252  || 10|| 20|| 30||
    274253  || 11|| 22|| 33||
    275   ||||||=  数字  =||
     254  ||||||=  numbers  =||
    276255  }}}
    277256  }}}
    … …  
    282261  || 10|| 20|| 30||
    283262  || 11|| 22|| 33||
    284   ||||||=  数字  =||
    285   }}}
    286  }}}
    287 }}}
    288 
    289 他のクラスを代替手段として指定することもできます ([TracInterfaceCustomization#SiteAppearance site/style.css] であなた自身のスタイルシートを定義できることを忘れないで下さい)
    290 
    291 ||= Wiki マークアップ =||= 表示 =||
     263  ||||||=  numbers  =||
     264  }}}
     265 }}}
     266}}}
     267
     268Other classes can be specified as alternatives (remember that you can define your own in [TracInterfaceCustomization#SiteAppearance site/style.css]).
     269
     270||= Wiki Markup =||= Display =||
    292271{{{#!td
    293272  {{{
    … …  
    296275  || 10|| 20|| 30||
    297276  || 11|| 22|| 33||
    298   ||||||=  数字  =||
     277  ||||||=  numbers  =||
    299278  }}}
    300279  }}}
    … …  
    305284  || 10|| 20|| 30||
    306285  || 11|| 22|| 33||
    307   ||||||=  数字  =||
    308   }}}
    309 }}}
    310 
    311 
    312 == HTML コメント ==#HTMLcomments
    313 HTML コメントは `html` プロセッサの出力から除外されます。 HTML コメントを wiki ページに追加するために、 `htmlcomment` プロセッサを使用して下さい (0.12 以降) 。例えば、下記のようなコードブロックになります:
    314 ||= Wiki マークアップ =||
    315 {{{#!td
    316   {{{
    317   {{{
    318   #!htmlcomment
    319   このブロックは HTML コメントとして処理されます。
    320   <tags> や &entities; を含めることができ、これらは出力時にエスケープされません。
     286  ||||||=  numbers  =||
     287  }}}
     288}}}
     289
     290== HTML comments
     291HTML 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:
     292||= Wiki Markup =||
     293{{{#!td
     294  {{{
     295  {{{#!htmlcomment
     296  This block is translated to an HTML comment.
     297  It can contain <tags> and &entities; that will not be escaped in the output.
    321298  }}}
    322299  }}}
    323300}}}
    324301|---------------------------------------------------------------------------------
    325 ||= 表示 =||
     302||= Display =||
    326303{{{#!td
    327304  {{{
    328305  <!--
    329   このブロックは HTML コメントとして処理されます。
    330   <tags> や &entities; を含めることができ、これらは出力時にエスケープされません。
     306  This block is translated to an HTML comment.
     307  It can contain <tags> and &entities; that will not be escaped in the output.
    331308  -->
    332309  }}}
    333310}}}
    334311
    335 Note: "`--`" という文字の並びは、 HTML コメントでは使用できません。レンダリング時にエラーが発生します。
    336 
    337 
    338 == より詳しい情報 == #MoreInformation
    339 
    340  * http://www.w3.org/ -- World Wide Web Consortium
    341  * http://www.w3.org/MarkUp/ -- HTML Markup Home Page
     312The character sequence `--` is not allowed in HTML comments, and will generate a rendering error.
     313
     314
     315== More Information
     316
     317 * https://www.w3.org/ -- World Wide Web Consortium
     318 * https://www.w3.org/MarkUp/ -- HTML Markup Home Page
    342319
    343320----
    344 See also:  WikiProcessors, WikiFormatting, WikiRestructuredText
     321See also:  WikiFormatting, WikiProcessors, WikiRestructuredText