WikiHtml のバージョン 1 とバージョン 2 との変更


以下の違いを無視:
日時:
2015/05/27 0:24:03 (11年前)
更新者:
trac
コメント:

--

凡例:

変更なし
追加
削除
更新

  • WikiHtml

    v1 v2  
    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 =||
     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 マークアップ =||= 表示 =||
    2020{{{#!td
    2121  {{{
    2222  {{{
    2323  #!html
    24   <h1 style="text-align: right; color: blue">HTML Test</h1>
     24  <h1 style="text-align: right; color: blue">HTML テスト</h1>
    2525  }}}
    2626  }}}
    … …  
    2929  {{{
    3030  #!html
    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.
     31  <h1 style="text-align: right; color: blue">HTML テスト</h1>
     32  }}}
     33}}}
     34
     35Trac が HTML コードを表示する前にサニタイズすることに注意して下さい。つまり Javascript のイベントハンドラのような潜在的に危険なコードを使おうとしても、出力から削除されるということです。
     36
     370.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** は定義済みのクラスです。
    4848  }}}
    4949  }}}
    … …  
    5151  {{{
    5252  #!div style="border: 1pt dotted; margin: 1em"
    53   **wikipage** is another predefined class that will
    54   be used when no class is specified.
     53  **wikipage** はクラスが指定されていない場合に
     54  使用される別の定義済みクラスです。
    5555  }}}
    5656  }}}
    … …  
    5858  {{{
    5959  #!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.
     60  **compact** は最小限に `<div>` 内のパディングを
     61  軽減するための別の定義済みクラスです。
    6262  }}}
    6363  }}}
    … …  
    6565  {{{
    6666  #!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.
     67  クラスは組み合わせることができます (ここでは **wikipage** と **compact**)
     68  この場合の結果は、//垂直方向の// パディングが
     69  軽減されますが、見出しのため水平方向のスペースが
     70  残っています。
    7171  }}}
    7272  }}}
    … …  
    7474  {{{
    7575  #!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.
     76  明確にクラスを指定しないことは、
     77  属性にクラスを指定しないことと同じでは //なく// 、
     78  デフォルトクラスの //wikipage// を削除するようなものです。
    7979  }}}
    8080  }}}
    … …  
    8383
    8484  {{{
    85   #!div class="important" 
    86   **important** is a predefined class.
     85  #!div class="important"
     86  **important** は 定義済みのクラスです。
    8787  }}}
    8888
    8989  {{{
    9090  #!div style="border: 1pt dotted; margin: 1em"
    91   **wikipage** is another predefined class that will
    92   be used when no class is specified.
     91  **wikipage** はクラスが指定されていない場合に
     92  使用される別の定義済みクラスです。
    9393  }}}
    9494
    9595  {{{
    9696  #!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.
     97  **compact** は最小限に `<div>` 内のパディングを
     98  軽減するための別の定義済みクラスです。
    9999  }}}
    100100
    101101  {{{
    102102  #!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.
     103  クラスは組み合わせることができます (ここでは **wikipage** と **compact**)
     104  この場合の結果は、//垂直方向の// パディングが
     105  軽減されますが、見出しのため水平方向のスペースが
     106  残っています。
    107107  }}}
    108108
    109109  {{{
    110110  #!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 =||
    122 {{{#!td
    123   {{{
    124   Hello 
     111  明確にクラスを指定しないことは、
     112  属性にクラスを指定しないことと同じでは //なく// 、
     113  デフォルトクラスの //wikipage// を削除するようなものです。
     114  }}}
     115
     116}}}
     117
     118Note: `#!div` ブロックの内容に 1 つもしくは複数の段落が含まれる場合、上下にマージンが追加されます。これは、上記の例にある通り、上下のパディングをもたらします。コンテンツの上下のマージンを削除するためには、`#!div` ブロックの class 属性に `compact` を追加して下さい。 `wikipage` と `compact` の他に予め定義された値は、 `important` です。これを指定すると段落を目立たせることができます。 例えば、その他の CSS のクラスは、 `site/style.css` ファイル経由で定義することができます。 [TracInterfaceCustomization#SiteAppearance サイトの外観] を参照して下さい。
     119
     120span については、むしろマクロ呼び出しのシンタックスを使用するべきです:
     121||= Wiki マークアップ =||
     122{{{#!td
     123  {{{
     124  Hello
    125125  [[span(''WORLD'' (click [#anchor here]), style=color: green; font-size: 120%, id=anchor)]]!
    126126  }}}
    127127}}}
    128128|---------------------------------------------------------------------------------
    129 ||= Display =||
     129||= 表示 =||
    130130{{{#!td style="padding-left: 2em"
    131131  Hello
    … …  
    133133}}}
    134134
    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 =||
     135== `#!td` とその他の表関連のプロセッサの使い方 == #Tables
     136
     137実際に、それぞれのテーブル行やヘッダのセルを作成するためには、 `#!td` や `#!th` がメインのプロセッサになります。その他、 `#!table` や `#!tr` プロセッサは`#!td` や `#!th` プロセッサがこれらのプロセッサの役割を自動的に行なってしまうため、テーブル構造を紹介するためには必要ではありません。行セパレータ `|-` を新しい行を始める際に必要に応じて使うことができます。しかし場合によっては、 `#!tr` ブロックを使用する方が好ましいかもしれません。 `#!tr` ブロックの方がより正式なグルーピングを提供することができ、より多くのインデントレベルを提供できる可能性があります。`#!table` や `#!tr` プロセッサを使用する主な目的は、 ''style'' や ''valign'' などで HTML の属性を指定できることです。
     138
     139||= Wiki マークアップ =||= 表示 =||
    140140{{{#!td
    141141 {{{
    142  Simple 2x2 table with rich content:
     142 リッチコンテンツを含んだ 2x2 の簡単な表:
    143143 {{{#!th align=left
    144   - Left
    145   - Header
     144  - 左
     145  - ヘッダ
    146146 }}}
    147147 {{{#!th align=left
    148   - Right
    149   - Header
     148  - 右
     149  - ヘッダ
    150150 }}}
    151151 |----------------------------------
    152152 {{{#!td style="background: #ffd"
    153   - Left
    154   - Content
     153  - 左
     154  - 内容
    155155 }}}
    156156 {{{#!td style="vertical-align: top"
    157  !RightContent
     157 右内容
    158158 }}}
    159159 |----------------------------------
    160  || ... and this can be mixed||\
    161  ||with pipe-based cells ||
     160 || ... パイプでつなげたセルも||\
     161 ||くっつけることができます ||
    162162 {{{#!td colspan=2
    163  Pick the style the more appropriate
    164  to your content
    165  
    166  See WikiFormatting#Tables for details
    167  on the pipe-based table syntax.
    168  }}}
    169  
    170  If one needs to add some
    171  attributes to the table itself...
    172  
     163 あなたのコンテンツにより適切なスタイルを
     164 選択して下さい。
     165
     166 パイプで表の列をつなげるシンタックスについては、
     167 [WikiFormatting#Tables WikiFormatting] を参照して下さい。
     168 }}}
     169
     170 もし、表そのものに属性を追加する
     171 必要がある場合...
     172
    173173 {{{
    174174 #!table style="border:none;text-align:center;margin:auto"
    175175   {{{#!tr ====================================
    176176     {{{#!th style="border: none"
    177      Left header
     177     左 ヘッダ
    178178     }}}
    179179     {{{#!th style="border: none"
    180      Right header
     180     右 ヘッダ
    181181     }}}
    182182   }}}
    … …  
    203203}}}
    204204{{{#!td valign=top
    205 Simple 2x2 table with rich content:
     205リッチコンテンツを含んだ 2x2 の簡単な表:
    206206{{{#!th align=left
    207  - Left
    208  - Header
     207 - 左
     208 - ヘッダ
    209209}}}
    210210{{{#!th align=left
    211  - Right
    212  - Header
     211 - 右
     212 - ヘッダ
    213213}}}
    214214|----------------------------------
    215215{{{#!td style="background: #ffd"
    216  - Left
    217  - Content
     216 - 左
     217 - 内容
    218218}}}
    219219{{{#!td style="vertical-align: top"
    220 !RightContent
     220右内容
    221221}}}
    222222|----------------------------------
    223 || ... and this can be mixed||\
    224 ||with pipe-based cells ||
     223|| ... パイプでつなげたセルも||\
     224||くっつけることができます ||
    225225{{{#!td colspan=2
    226 Pick the style the more appropriate
    227 to your content
    228 
    229 See WikiFormatting#Tables for details
    230 on the pipe-based table syntax.
    231 }}}
    232 
    233 If one needs to add some
    234 attributes to the table itself...
     226あなたのコンテンツにより適切なスタイルを
     227選択して下さい。
     228
     229パイプで表の列をつなげるシンタックスについては、
     230[WikiFormatting#Tables WikiFormatting] を参照して下さい。
     231}}}
     232
     233もし、表そのものに属性を追加する
     234必要がある場合...
    235235
    236236{{{
    … …  
    238238  {{{#!tr ====================================
    239239    {{{#!th style="border: none"
    240     Left header
     240    左 ヘッダ
    241241    }}}
    242242    {{{#!th style="border: none"
    243     Right header
     243    右 ヘッダ
    244244    }}}
    245245  }}}
    … …  
    263263}}}
    264264
    265 Note 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, the rows nor the cells will have a border, so this is a more effective way to get such an effect than having to specify a `style="border: no"` parameter everywhere.
     265Note: デフォルトの表設定では、 "wiki" の CSS クラスが適用されます。そして、この CSS クラスはヘッダのセルに対して典型的な見た目と表とセルのデフォルトの罫線設定を提供します ( このページの表にあるとおりです) このクラスを削除することによって (`#!table class=""`) 表の表示方法を自由に設定することができるようになります。特に、表、行、セルのいずれにも罫線を設定しない場合、いたるところで `style="border: no"` を指定するよりこの方法を使用したほうが、同じ効果を得るのにより効果的な方法となります。
    266266
    267267{{{#!table class=""
    268 ||= Wiki Markup =||= Display =||
     268||= Wiki マークアップ =||= 表示 =||
    269269 {{{#!td
    270270  {{{
    … …  
    273273  || 10|| 20|| 30||
    274274  || 11|| 22|| 33||
    275   ||||||=  numbers  =||
     275  ||||||=  数字  =||
    276276  }}}
    277277  }}}
    … …  
    282282  || 10|| 20|| 30||
    283283  || 11|| 22|| 33||
    284   ||||||=  numbers  =||
    285   }}}
    286  }}}
    287 }}}
    288 
    289 Other classes can be specified as alternatives (remember that you can define your own in [TracInterfaceCustomization#SiteAppearance site/style.css]).
    290 
    291 ||= Wiki Markup =||= Display =||
     284  ||||||=  数字  =||
     285  }}}
     286 }}}
     287}}}
     288
     289他のクラスを代替手段として指定することもできます ([TracInterfaceCustomization#SiteAppearance site/style.css] であなた自身のスタイルシートを定義できることを忘れないで下さい)
     290
     291||= Wiki マークアップ =||= 表示 =||
    292292{{{#!td
    293293  {{{
    … …  
    296296  || 10|| 20|| 30||
    297297  || 11|| 22|| 33||
    298   ||||||=  numbers  =||
     298  ||||||=  数字  =||
    299299  }}}
    300300  }}}
    … …  
    305305  || 10|| 20|| 30||
    306306  || 11|| 22|| 33||
    307   ||||||=  numbers  =||
    308   }}}
    309 }}}
    310 
    311 
    312 == HTML comments ==
    313 HTML 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 0.12). For example, the following code block:
    314 ||= Wiki Markup =||
     307  ||||||=  数字  =||
     308  }}}
     309}}}
     310
     311
     312== HTML コメント ==#HTMLcomments
     313HTML コメントは `html` プロセッサの出力から除外されます。 HTML コメントを wiki ページに追加するために、 `htmlcomment` プロセッサを使用して下さい (0.12 以降) 。例えば、下記のようなコードブロックになります:
     314||= Wiki マークアップ =||
    315315{{{#!td
    316316  {{{
    317317  {{{
    318318  #!htmlcomment
    319   This block is translated to an HTML comment.
    320   It can contain <tags> and &entities; that will not be escaped in the output.
     319  このブロックは HTML コメントとして処理されます。
     320  <tags> や &entities; を含めることができ、これらは出力時にエスケープされません。
    321321  }}}
    322322  }}}
    323323}}}
    324324|---------------------------------------------------------------------------------
    325 ||= Display =||
     325||= 表示 =||
    326326{{{#!td
    327327  {{{
    328328  <!--
    329   This block is translated to an HTML comment.
    330   It can contain <tags> and &entities; that will not be escaped in the output.
     329  このブロックは HTML コメントとして処理されます。
     330  <tags> や &entities; を含めることができ、これらは出力時にエスケープされません。
    331331  -->
    332332  }}}
    333333}}}
    334334
    335 Please note that the character sequence "`--`" is not allowed in HTML comments, and will generate a rendering error.
    336 
    337 
    338 == More Information ==
     335Note: "`--`" という文字の並びは、 HTML コメントでは使用できません。レンダリング時にエラーが発生します。
     336
     337
     338== より詳しい情報 == #MoreInformation
    339339
    340340 * http://www.w3.org/ -- World Wide Web Consortium