Changes between Version 1 and Version 2 of WikiHtml


Ignore:
Timestamp:
09/18/14 10:48:12 (5 years ago)
Author:
trac
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • WikiHtml

    v1 v2  
    11= Wiki テキスト内で HTML を使用する = #UsingHTMLinWikiText 
    22 
    3 HTML [wiki:WikiProcessors WikiProcessor] の機能によって、 Trac では Wiki コンテキスト内での HTML 利用が可能です。 
    4  
    5 HTML 対応は内蔵機能であり、追加パッケージのインストールを必要としません。 
    6  
    7 == HTML の使い方 == #HowtoUseHTML 
    8 Wiki エンジンにテキストブロックが HTML として取り扱われるよう、 ''html'' プロセッサを使用するという情報を与えます。 
    9  
    10 この例のような表現は: 
     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> 
     25  }}} 
     26  }}} 
     27}}} 
     28{{{#!td style="padding-left: 2em" 
     29  {{{ 
     30  #!html 
     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** は 定義済みのクラスです。 
     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// を削除するようなものです。 
     79  }}} 
     80  }}} 
     81}}} 
     82{{{#!td style="padding-left: 2em" 
     83 
     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 
     118Note: `#!div` ブロックの内容に 1 つもしくは複数の段落が含まれる場合、上下にマージンが追加されます。これは、上記の例にある通り、上下のパディングをもたらします。コンテンツの上下のマージンを削除するためには、`#!div` ブロックの class 属性に `compact` を追加して下さい。 `wikipage` と `compact` の他に予め定義された値は、 `important` です。これを指定すると段落を目立たせることができます。 例えば、その他の CSS のクラスは、 `site/style.css` ファイル経由で定義することができます。 [TracInterfaceCustomization#SiteAppearance サイトの外観] を参照して下さい。 
     119 
     120span については、むしろマクロ呼び出しのシンタックスを使用するべきです: 
     121||= Wiki マークアップ =|| 
     122{{{#!td 
     123  {{{ 
     124  Hello 
     125  [[span(''WORLD'' (click [#anchor here]), style=color: green; font-size: 120%, id=anchor)]]! 
     126  }}} 
     127}}} 
     128|--------------------------------------------------------------------------------- 
     129||= 表示 =|| 
     130{{{#!td style="padding-left: 2em" 
     131  Hello 
     132  [[span(''WORLD'' (click [#anchor here]), style=color: green; font-size: 120%, id=anchor)]]! 
     133}}} 
     134 
     135== `#!td` とその他の表関連のプロセッサの使い方 == #Tables 
     136 
     137実際に、それぞれのテーブル行やヘッダのセルを作成するためには、 `#!td` や `#!th` がメインのプロセッサになります。その他、 `#!table` や `#!tr` プロセッサは`#!td` や `#!th` プロセッサがこれらのプロセッサの役割を自動的に行なってしまうため、テーブル構造を紹介するためには必要ではありません。行セパレータ `|-` を新しい行を始める際に必要に応じて使うことができます。しかし場合によっては、 `#!tr` ブロックを使用する方が好ましいかもしれません。 `#!tr` ブロックの方がより正式なグルーピングを提供することができ、より多くのインデントレベルを提供できる可能性があります。`#!table` や `#!tr` プロセッサを使用する主な目的は、 ''style'' や ''valign'' などで HTML の属性を指定できることです。 
     138 
     139||= Wiki マークアップ =||= 表示 =|| 
     140{{{#!td 
     141 {{{ 
     142 リッチコンテンツを含んだ 2x2 の簡単な表: 
     143 {{{#!th align=left 
     144  - 左 
     145  - ヘッダ 
     146 }}} 
     147 {{{#!th align=left 
     148  - 右 
     149  - ヘッダ 
     150 }}} 
     151 |---------------------------------- 
     152 {{{#!td style="background: #ffd" 
     153  - 左 
     154  - 内容 
     155 }}} 
     156 {{{#!td style="vertical-align: top" 
     157 右内容 
     158 }}} 
     159 |---------------------------------- 
     160 || ... パイプでつなげたセルも||\ 
     161 ||くっつけることができます || 
     162 {{{#!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" 
     175   {{{#!tr ==================================== 
     176     {{{#!th style="border: none" 
     177     左 ヘッダ 
     178     }}} 
     179     {{{#!th style="border: none" 
     180     右 ヘッダ 
     181     }}} 
     182   }}} 
     183   {{{#!tr ==== style="border: 1px dotted grey" 
     184     {{{#!td style="border: none" 
     185     1.1 
     186     }}} 
     187     {{{#!td style="border: none" 
     188     1.2 
     189     }}} 
     190   }}} 
     191   {{{#!tr ==================================== 
     192     {{{#!td style="border: none" 
     193     2.1 
     194     }}} 
     195     {{{#!td 
     196     2.2 
     197     }}} 
     198   }}} 
     199 }}} 
     200 
     201 
     202 }}} 
     203}}} 
     204{{{#!td valign=top 
     205リッチコンテンツを含んだ 2x2 の簡単な表: 
     206{{{#!th align=left 
     207 - 左 
     208 - ヘッダ 
     209}}} 
     210{{{#!th align=left 
     211 - 右 
     212 - ヘッダ 
     213}}} 
     214|---------------------------------- 
     215{{{#!td style="background: #ffd" 
     216 - 左 
     217 - 内容 
     218}}} 
     219{{{#!td style="vertical-align: top" 
     220右内容 
     221}}} 
     222|---------------------------------- 
     223|| ... パイプでつなげたセルも||\ 
     224||くっつけることができます || 
     225{{{#!td colspan=2 
     226あなたのコンテンツにより適切なスタイルを 
     227選択して下さい。 
     228 
     229パイプで表の列をつなげるシンタックスについては、 
     230[WikiFormatting#Tables WikiFormatting] を参照して下さい。 
     231}}} 
     232 
     233もし、表そのものに属性を追加する 
     234必要がある場合... 
     235 
    11236{{{ 
    12 #!html 
    13 <pre class="wiki">{{{ 
    14 #!html 
    15 &lt;h1 style="text-align: right; color: blue"&gt;HTML テスト&lt;/h1&gt; 
    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 span 要素の場合、マクロ呼び出しのシンタックスを使用できます: 
    44 {{{ 
    45  Hello [[span(''WORLD'' (click [#world-anchor here]), style=color: green; font-size: 120%, id=world-anchor)]]! 
    46 }}} 
    47  
    48 結果、以下のように表示されます: 
    49  Hello [[span(''WORLD'' (click [#world-anchor here]), style=color: green; font-size: 120%, id=world-anchor)]]! 
     237#!table style="border:none;text-align:center;margin:auto" 
     238  {{{#!tr ==================================== 
     239    {{{#!th style="border: none" 
     240    左 ヘッダ 
     241    }}} 
     242    {{{#!th style="border: none" 
     243    右 ヘッダ 
     244    }}} 
     245  }}} 
     246  {{{#!tr ==== style="border: 1px dotted grey" 
     247    {{{#!td style="border: none" 
     248    1.1 
     249    }}} 
     250    {{{#!td style="border: none" 
     251    1.2 
     252    }}} 
     253  }}} 
     254  {{{#!tr ==================================== 
     255    {{{#!td style="border: none" 
     256    2.1 
     257    }}} 
     258    {{{#!td 
     259    2.2 
     260    }}} 
     261  }}} 
     262}}} 
     263}}} 
     264 
     265Note: デフォルトの表設定では、 "wiki" の CSS クラスが適用されます。そして、この CSS クラスはヘッダのセルに対して典型的な見た目と表とセルのデフォルトの罫線設定を提供します ( このページの表にあるとおりです) このクラスを削除することによって (`#!table class=""`) 表の表示方法を自由に設定することができるようになります。特に、表、行、セルのいずれにも罫線を設定しない場合、いたるところで `style="border: no"` を指定するよりこの方法を使用したほうが、同じ効果を得るのにより効果的な方法となります。 
     266 
     267{{{#!table class="" 
     268||= Wiki マークアップ =||= 表示 =|| 
     269 {{{#!td 
     270  {{{ 
     271  {{{#!table class="" 
     272  ||  0||  1||  2|| 
     273  || 10|| 20|| 30|| 
     274  || 11|| 22|| 33|| 
     275  ||||||=  数字  =|| 
     276  }}} 
     277  }}} 
     278 }}} 
     279 {{{#!td 
     280  {{{#!table class="" 
     281  ||  0||  1||  2|| 
     282  || 10|| 20|| 30|| 
     283  || 11|| 22|| 33|| 
     284  ||||||=  数字  =|| 
     285  }}} 
     286 }}} 
     287}}} 
     288 
     289他のクラスを代替手段として指定することもできます ([TracInterfaceCustomization#SiteAppearance site/style.css] であなた自身のスタイルシートを定義できることを忘れないで下さい) 
     290 
     291||= Wiki マークアップ =||= 表示 =|| 
     292{{{#!td 
     293  {{{ 
     294  {{{#!table class="listing" 
     295  ||  0||  1||  2|| 
     296  || 10|| 20|| 30|| 
     297  || 11|| 22|| 33|| 
     298  ||||||=  数字  =|| 
     299  }}} 
     300  }}} 
     301}}} 
     302{{{#!td 
     303  {{{#!table class="listing" 
     304  ||  0||  1||  2|| 
     305  || 10|| 20|| 30|| 
     306  || 11|| 22|| 33|| 
     307  ||||||=  数字  =|| 
     308  }}} 
     309}}} 
     310 
     311 
     312== HTML コメント ==#HTMLcomments 
     313HTML コメントは `html` プロセッサの出力から除外されます。 HTML コメントを wiki ページに追加するために、 `htmlcomment` プロセッサを使用して下さい (0.12 以降) 。例えば、下記のようなコードブロックになります: 
     314||= Wiki マークアップ =|| 
     315{{{#!td 
     316  {{{ 
     317  {{{ 
     318  #!htmlcomment 
     319  このブロックは HTML コメントとして処理されます。 
     320  <tags> や &entities; を含めることができ、これらは出力時にエスケープされません。 
     321  }}} 
     322  }}} 
     323}}} 
     324|--------------------------------------------------------------------------------- 
     325||= 表示 =|| 
     326{{{#!td 
     327  {{{ 
     328  <!-- 
     329  このブロックは HTML コメントとして処理されます。 
     330  <tags> や &entities; を含めることができ、これらは出力時にエスケープされません。 
     331  --> 
     332  }}} 
     333}}} 
     334 
     335Note: "`--`" という文字の並びは、 HTML コメントでは使用できません。レンダリング時にエラーが発生します。 
    50336 
    51337