Changes between Version 1 and Version 2 of WikiHtml


Ignore:
Timestamp:
Sep 21, 2010 6:34:08 PM (14 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" 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 属性そのものを指定しないのとは //異なります//) 
     68  }}} 
     69  }}} 
     70}}} 
     71{{{#!td style="padding-left: 2em" 
     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 
     98Note: `#!div` ブロックの内容に 1 つもしくは複数の段落が含まれる場合、上下にマージンが追加されます。これは、上記の例にある通り、上下のパディングをもたらします。コンテンツの上下のマージンを削除するためには、`#!div` ブロックの class 属性に `compact` を追加して下さい。 `wikipage` と `compact` の他に予め定義された値は、 `important` です。これを指定すると段落を目立たせることができます。 例えば、その他の CSS のクラスは、 `site/style.css` ファイル経由で定義することができます。 [TracInterfaceCustomization#SiteAppearance サイトの外観] を参照して下さい。 
     99 
     100span については、むしろマクロ呼び出しのシンタックスを使用するべきです: 
     101||= Wiki マークアップ =|| 
     102{{{#!td 
     103  {{{ 
     104  Hello  
     105  [[span(''WORLD'' (click [#anchor here]), style=color: green; font-size: 120%, id=anchor)]]! 
     106  }}} 
     107}}} 
     108|--------------------------------------------------------------------------------- 
     109||= 表示 =|| 
     110{{{#!td style="padding-left: 2em" 
     111  Hello 
     112  [[span(''WORLD'' (click [#anchor here]), style=color: green; font-size: 120%, id=anchor)]]! 
     113}}} 
     114 
     115== `#!td` とその他の表関連のプロセッサの使い方 == #Tables 
     116 
     117実際に、それぞれのテーブル行やヘッダのセルを作成するためには、 `#!td` や `#!th` がメインのプロセッサになります。その他、 `#!table` や `#!tr` プロセッサは`#!td` や `#!th` プロセッサがこれらのプロセッサの役割を自動的に行なってしまうため、テーブル構造を紹介するためには必要ではありません。行セパレータ `|-` を新しい行を始める際に必要に応じて使うことができます。しかし場合によっては、 `#!tr` ブロックを使用する方が好ましいかもしれません。 `#!tr` ブロックの方がより正式なグルーピングを提供することができ、より多くのインデントレベルを提供できる可能性があります。`#!table` や `#!tr` プロセッサを使用する主な目的は、 ''style'' や ''valign'' などで HTML の属性を指定できることです。 
     118 
     119||= Wiki マークアップ =||= 表示 =|| 
     120{{{#!td 
     121 {{{ 
     122 リッチコンテンツを含んだ 2x2 の簡単な表: 
     123 {{{#!th align=left 
     124  - 左 
     125  - ヘッダ 
     126 }}} 
     127 {{{#!th align=left 
     128  - 右 
     129  - ヘッダ 
     130 }}} 
     131 |---------------------------------- 
     132 {{{#!td style="background: #ffd" 
     133  - 左 
     134  - 内容 
     135 }}} 
     136 {{{#!td style="vertical-align: top" 
     137 右内容 
     138 }}} 
     139 |---------------------------------- 
     140 || ... パイプでつなげたセルも||\ 
     141 ||くっつけることができます || 
     142 {{{#!td colspan=2 
     143 あなたのコンテンツにより適切なスタイルを 
     144 選択して下さい。 
     145  
     146 パイプで表の列をつなげるシンタックスについては、 
     147 [WikiFormatting#Tables WikiFormatting] を参照して下さい。 
     148 }}} 
     149  
     150 もし、表そのものに属性を追加する 
     151 必要がある場合... 
     152  
     153 {{{ 
     154 #!table style="border:none;text-align:center;margin:auto" 
     155   {{{#!tr ==================================== 
     156     {{{#!th style="border: none" 
     157     左 ヘッダ 
     158     }}} 
     159     {{{#!th style="border: none" 
     160     右 ヘッダ 
     161     }}} 
     162   }}} 
     163   {{{#!tr ==== style="border: 1px dotted grey" 
     164     {{{#!td style="border: none" 
     165     1.1 
     166     }}} 
     167     {{{#!td style="border: none" 
     168     1.2 
     169     }}} 
     170   }}} 
     171   {{{#!tr ==================================== 
     172     {{{#!td style="border: none" 
     173     2.1 
     174     }}} 
     175     {{{#!td 
     176     2.2 
     177     }}} 
     178   }}} 
     179 }}} 
     180 
     181 
     182 }}} 
     183}}} 
     184{{{#!td valign=top 
     185リッチコンテンツを含んだ 2x2 の簡単な表: 
     186{{{#!th align=left 
     187 - 左 
     188 - ヘッダ 
     189}}} 
     190{{{#!th align=left 
     191 - 右 
     192 - ヘッダ 
     193}}} 
     194|---------------------------------- 
     195{{{#!td style="background: #ffd" 
     196 - 左 
     197 - 内容 
     198}}} 
     199{{{#!td style="vertical-align: top" 
     200右内容 
     201}}} 
     202|---------------------------------- 
     203|| ... パイプでつなげたセルも||\ 
     204||くっつけることができます || 
     205{{{#!td colspan=2 
     206あなたのコンテンツにより適切なスタイルを 
     207選択して下さい。 
     208 
     209パイプで表の列をつなげるシンタックスについては、 
     210[WikiFormatting#Tables WikiFormatting] を参照して下さい。 
     211}}} 
     212 
     213もし、表そのものに属性を追加する 
     214必要がある場合... 
     215 
    11216{{{ 
    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)]]! 
     217#!table style="border:none;text-align:center;margin:auto" 
     218  {{{#!tr ==================================== 
     219    {{{#!th style="border: none" 
     220    左 ヘッダ 
     221    }}} 
     222    {{{#!th style="border: none" 
     223    右 ヘッダ 
     224    }}} 
     225  }}} 
     226  {{{#!tr ==== style="border: 1px dotted grey" 
     227    {{{#!td style="border: none" 
     228    1.1 
     229    }}} 
     230    {{{#!td style="border: none" 
     231    1.2 
     232    }}} 
     233  }}} 
     234  {{{#!tr ==================================== 
     235    {{{#!td style="border: none" 
     236    2.1 
     237    }}} 
     238    {{{#!td 
     239    2.2 
     240    }}} 
     241  }}} 
     242}}} 
     243}}} 
     244 
     245Note: デフォルトの表設定では、 "wiki" の CSS クラスが適用されます。そして、この CSS クラスはヘッダのセルに対して典型的な見た目と表とセルのデフォルトの罫線設定を提供します ( このページの表にあるとおりです) このクラスを削除することによって (`#!table class=""`) 表の表示方法を自由に設定することができるようになります。特に、表、行、セルのいずれにも罫線を設定しない場合、いたるところで `style="border: no"` を指定するよりこの方法を使用したほうが、同じ効果を得るのにより効果的な方法となります。 
     246 
     247{{{#!table class="" 
     248||= Wiki マークアップ =||= 表示 =|| 
     249 {{{#!td 
     250  {{{ 
     251  {{{#!table class="" 
     252  ||  0||  1||  2|| 
     253  || 10|| 20|| 30|| 
     254  || 11|| 22|| 33|| 
     255  ||||||=  数字  =|| 
     256  }}} 
     257  }}} 
     258 }}} 
     259 {{{#!td 
     260  {{{#!table class="" 
     261  ||  0||  1||  2|| 
     262  || 10|| 20|| 30|| 
     263  || 11|| 22|| 33|| 
     264  ||||||=  数字  =|| 
     265  }}} 
     266 }}} 
     267}}} 
     268 
     269他のクラスを代替手段として指定することもできます ([TracInterfaceCustomization#SiteAppearance site/style.css] であなた自身のスタイルシートを定義できることを忘れないで下さい) 
     270 
     271||= Wiki マークアップ =||= 表示 =|| 
     272{{{#!td 
     273  {{{ 
     274  {{{#!table class="listing" 
     275  ||  0||  1||  2|| 
     276  || 10|| 20|| 30|| 
     277  || 11|| 22|| 33|| 
     278  ||||||=  数字  =|| 
     279  }}} 
     280  }}} 
     281}}} 
     282{{{#!td 
     283  {{{#!table class="listing" 
     284  ||  0||  1||  2|| 
     285  || 10|| 20|| 30|| 
     286  || 11|| 22|| 33|| 
     287  ||||||=  数字  =|| 
     288  }}} 
     289}}} 
     290 
     291 
     292== HTML コメント ==#HTMLcomments 
     293HTML コメントは `html` プロセッサの出力から除外されます。 HTML コメントを wiki ページに追加するために、 `htmlcomment` プロセッサを使用して下さい (0.12 以降) 。例えば、下記のようなコードブロックになります: 
     294||= Wiki マークアップ =|| 
     295{{{#!td 
     296  {{{ 
     297  {{{ 
     298  #!htmlcomment 
     299  このブロックは HTML コメントとして処理されます。 
     300  <tags> や &entities; を含めることができ、これらは出力時にエスケープされません。 
     301  }}} 
     302  }}} 
     303}}} 
     304|--------------------------------------------------------------------------------- 
     305||= 表示 =|| 
     306{{{#!td 
     307  {{{ 
     308  <!-- 
     309  このブロックは HTML コメントとして処理されます。 
     310  <tags> や &entities; を含めることができ、これらは出力時にエスケープされません。 
     311  --> 
     312  }}} 
     313}}} 
     314 
     315Note: "--" という文字の並びは、 HTML コメントでは使用できません。レンダリング時にエラーが発生します。 
    50316 
    51317