5 | | Trac 内の全ての Wiki テキストにおいて、 Wiki エンジンにプロセッサを使わせることによって [wiki:WikiRestructuredText Restructured Text], [wiki:WikiHtml raw HTML] および [http://www.textism.com/tools/textile/ textile] を使用することができます。 |
| 5 | Trac 内の全ての Wiki テキストにおいて、 Wiki プロセッサを使用することができます。 |
| 6 | 例えば、以下に述べる様々な用途で使用することができます: |
| 7 | - [#CodeHighlightingSupport シンタックスハイライト] またはテキストを逐語的にレンダリングする, |
| 8 | - <div> ブロックや <span> や <td>, <th> のテーブルのセルの内容など |
| 9 | [#HTMLrelated コンテキスト内の Wiki のマークアップ]をレンダリングする, |
| 10 | - [wiki:WikiHtml HTML] や |
| 11 | [wiki:WikiRestructuredText Restructured テキスト] |
| 12 | または [http://www.textism.com/tools/textile/ textile] のシンタックスをマークアップの代替手段として使用する |
10 | | テキストブロックでプロセッサを使うには、 Wiki のコードブロックを使用し、プロセッサの名前を (Unix 系 OS のスクリプトのように) ''shebang 行'' (#!) に続いて指定します。 |
11 | | |
12 | | '''例1''' (''Wiki テキストに raw HTML を挿入する''): |
13 | | |
| 17 | テキストブロック上に Wiki プロセッサを適用するには、 |
| 18 | 最初のデリミタとして Wiki の ''コードブロック'' を使用します: |
| 19 | {{{ |
| 20 | {{{ |
| 21 | これらの行は |
| 22 | 処理されるでしょう... |
| 23 | }}} |
| 24 | }}} |
| 25 | |
| 26 | `{{{` のすぐ後または直後の行に, |
| 27 | `#!` に続けて ''プロセッサ名'' を追加します。. |
| 28 | |
| 29 | {{{ |
| 30 | {{{ |
| 31 | #!プロセッサ名 |
| 32 | これらの行は |
| 33 | 処理されるでしょう... |
| 34 | }}} |
| 35 | }}} |
| 36 | |
| 37 | これはほとんどの UNIX ユーザにはおなじみである "shebang" を用いた表記法です。 |
| 38 | |
| 39 | これらの内容に加えて、いくつかの Wiki プロセッサでは、 |
| 40 | プロセッサ名に続けて同じ行に、 `key=value` のペアを書くことによって、 |
| 41 | ''パラメータ'' を許容するものがあります。もし、 `value` にスペースが含まれるケースがたびたび起こるようであれば、 |
| 42 | クオテーションで囲んだ文字列を使用することができます (`key="スペースが含まれている文字列"`) 。 |
| 43 | |
| 44 | いくつかのプロセッサは Wiki のマークアップを処理することを意味するので、 |
| 45 | プロセッサのブロックを ''ネスト'' させることができます。 |
| 46 | 可読性を向上させるためにネストしたブロックの内容をインデントさせたいと思うかもしれません。 |
| 47 | この種のインデントは中身を処理する際に無視されます。 |
| 48 | |
| 49 | |
| 50 | == 例 == |
| 51 | |
| 52 | ||= Wiki マークアップ =||= 表示 =|| |
| 53 | {{{#!td colspan=2 align=center style="border: none" |
| 54 | |
| 55 | __例 1__: HTML を挿入する |
| 56 | }}} |
| 57 | |----------------------------------------------------------------- |
| 58 | {{{#!td style="border: none" |
| 59 | {{{ |
| 60 | {{{ |
| 61 | <h1 style="color: grey">HTML テスト</h1> |
| 62 | }}} |
| 63 | }}} |
| 64 | }}} |
| 65 | {{{#!td valign=top style="border: none; padding-left: 2em" |
16 | | <pre class="wiki">{{{ |
17 | | #!html |
18 | | <h1 style="color: orange">これは raw HTML です</h1> |
19 | | }}}</pre> |
20 | | }}} |
21 | | |
22 | | '''結果、このように表示されます:''' |
23 | | {{{ |
24 | | #!html |
25 | | <h1 style="color: orange">これは raw HTML です</h1> |
26 | | }}} |
27 | | |
28 | | Note that since 0.11, such blocks of HTML have to be self-contained, i.e. you can't start an HTML element in one block and close it later in a second block. Use div or span processors for achieving similar effect (see WikiHtml). |
29 | | |
30 | | ---- |
31 | | |
32 | | '''例2''' (''Wiki テキストに !ReStructured テキストを挿入する''): |
33 | | |
34 | | {{{ |
35 | | #!html |
36 | | <pre class="wiki">{{{ |
37 | | #!rst |
38 | | 見出し |
39 | | ------ |
40 | | 脚注 [*]_ 付きの **text** です。 |
41 | | |
42 | | .. [*] ここは脚注。 |
43 | | }}}</pre> |
44 | | }}} |
45 | | |
46 | | '''結果、このように表示されます:''' |
47 | | {{{ |
48 | | #!rst |
49 | | 見出し |
50 | | ------ |
51 | | 脚注 [*]_ 付きの **text** です。 |
52 | | |
53 | | .. [*] ここは脚注。 |
54 | | }}} |
55 | | ---- |
56 | | '''例3''' (''Wiki テキストに C 言語ソースコードブロックを挿入する''): |
57 | | |
58 | | {{{ |
59 | | #!html |
60 | | <pre class="wiki">{{{ |
61 | | #!c |
62 | | int main(int argc, char *argv[]) |
63 | | { |
64 | | printf("Hello World\n"); |
65 | | return 0; |
66 | | } |
67 | | }}}</pre> |
68 | | }}} |
69 | | |
70 | | '''結果、このように表示されます:''' |
71 | | {{{ |
72 | | #!c |
73 | | int main(int argc, char *argv[]) |
74 | | { |
75 | | printf("Hello World\n"); |
76 | | return 0; |
77 | | } |
78 | | }}} |
79 | | |
80 | | ---- |
81 | | |
| 68 | <h1 style="color: grey">HTML テスト</h1> |
| 69 | }}} |
| 70 | }}} |
| 71 | |----------------------------------------------------------------- |
| 72 | {{{#!td colspan=2 align=center style="border: none" |
| 73 | |
| 74 | __例 2__: <div> ブロック内のカスタマイズしたスタイルシートでハイライトした Python のコード |
| 75 | }}} |
| 76 | |----------------------------------------------------------------- |
| 77 | {{{#!td style="border: none" |
| 78 | {{{ |
| 79 | {{{#!div style="background: #ffd; border: 3px ridge" |
| 80 | |
| 81 | これは 埋め込まれた "コード" ブロックの例です: |
| 82 | |
| 83 | {{{ |
| 84 | #!python |
| 85 | def hello(): |
| 86 | return "world" |
| 87 | }}} |
| 88 | |
| 89 | }}} |
| 90 | }}} |
| 91 | }}} |
| 92 | {{{#!td valign=top style="border: none; padding: 1em" |
| 93 | {{{#!div style="background: #ffd; border: 3px ridge" |
| 94 | |
| 95 | これは 埋め込まれた "コード" ブロックの例です: |
| 96 | |
| 97 | {{{ |
| 98 | #!python |
| 99 | def hello(): |
| 100 | return "world" |
| 101 | }}} |
| 102 | |
| 103 | }}} |
| 104 | }}} |
| 105 | |----------------------------------------------------------------- |
| 106 | {{{#!td colspan=2 align=center style="border: none" |
| 107 | |
| 108 | __例 3__: Wiki ページでチケットのキーワード検索を行なう |
| 109 | }}} |
| 110 | |----------------------------------------------------------------- |
| 111 | {{{#!td style="border: none" |
| 112 | {{{ |
| 113 | {{{ |
| 114 | #!html |
| 115 | <form action="/query" method="get"> |
| 116 | <input type="text" name="keywords" value="~" size="30"> |
| 117 | <input type="submit" value="キーワードで検索"> |
| 118 | <!-- To control what fields show up use hidden fields |
| 119 | <input type="hidden" name="col" value="id"> |
| 120 | <input type="hidden" name="col" value="summary"> |
| 121 | <input type="hidden" name="col" value="status"> |
| 122 | <input type="hidden" name="col" value="milestone"> |
| 123 | <input type="hidden" name="col" value="version"> |
| 124 | <input type="hidden" name="col" value="owner"> |
| 125 | <input type="hidden" name="col" value="priority"> |
| 126 | <input type="hidden" name="col" value="component"> |
| 127 | --> |
| 128 | </form> |
| 129 | }}} |
| 130 | }}} |
| 131 | }}} |
| 132 | {{{#!td valign=top style="border: none; padding: 1em" |
| 133 | {{{ |
| 134 | #!html |
| 135 | <form action="/query" method="get"> |
| 136 | <input type="text" name="keywords" value="~" size="30"> |
| 137 | <input type="submit" value="キーワードで検索"> |
| 138 | <!-- To control what fields show up use hidden fields |
| 139 | <input type="hidden" name="col" value="id"> |
| 140 | <input type="hidden" name="col" value="summary"> |
| 141 | <input type="hidden" name="col" value="status"> |
| 142 | <input type="hidden" name="col" value="milestone"> |
| 143 | <input type="hidden" name="col" value="version"> |
| 144 | <input type="hidden" name="col" value="owner"> |
| 145 | <input type="hidden" name="col" value="priority"> |
| 146 | <input type="hidden" name="col" value="component"> |
| 147 | --> |
| 148 | </form> |
| 149 | }}} |
| 150 | }}} |
84 | | * '''html''' -- Wiki ページにカスタム HTML を挿入する。 WikiHtml を参照してください。 |
85 | | * '''div''' -- Wiki ページの内容を任意の <div> 要素でラップする (''0.11 以降'')。 WikiHtml を参照してください。 |
86 | | * '''span''' -- Wiki ページの内容を任意の <span> 要素でラップする (''0.11 以降'')。 WikiHtml を参照してください。 |
87 | | * '''rst''' -- Restructured テキスト を Trac で利用可能にする。 WikiRestructuredText を参照してください。 |
88 | | * '''textile''' -- [http://cheeseshop.python.org/pypi/textile Textile] をインストールすれば利用可能です。 [http://www.textism.com/tools/textile/ Textile リファレンス] を参照してください。 |
89 | | * '''comment''' -- セクション内のテキストを処理しません。(セクションの内容はレンダリングされた Wiki ページには出力されず、プレーンテキストにのみ保持されます。) |
90 | | |
91 | | === ソースコードの強調表示対応 === #CodeHighlightingSupport |
92 | | Trac では、以下のプログラミング言語でのインライン [wiki:TracSyntaxColoring シンタックスハイライト] を行うプロセッサが組み込まれています。 |
93 | | * '''c''' -- C |
94 | | * '''cpp''' -- C++ |
95 | | * '''python''' -- Python |
96 | | * '''perl''' -- Perl |
97 | | * '''ruby''' -- Ruby |
98 | | * '''php''' -- PHP |
99 | | * '''asp''' -- ASP |
100 | | * '''java''' -- Java |
101 | | * '''js''' -- Javascript |
102 | | * '''sql''' -- SQL |
103 | | * '''xml''' -- XML |
104 | | * '''sh''' -- Bourne/Bash shell |
105 | | |
106 | | '''Note:''' ''Trac はシンタックスの色付けを、外部のソフトウェアパッケージに依存しています。詳しくは TracSyntaxColoring をご覧下さい。'' |
107 | | |
108 | | プロセッサとして mime-type が指定されると、ソースコードをブラウズするときと同じく、対応されている言語であれば、シンタックスハイライトを行うことができます。例えば、以下のように書くと: |
109 | | {{{ |
| 154 | |
| 155 | `#!default` :: フォーマット済みのテキストブロック内でテキストを逐語的に表示する。 |
| 156 | これはプロセッサ名を指定 ''しない'' のと同じです。 |
| 157 | (さらに `#!` を指定しないのと同じです) |
| 158 | `#!comment` :: このセクション内のテキストを処理しません(つまり、このセクションの内容は |
| 159 | プレインテキスト内にのみ存在します - レンダリングしたページには表示されません)。 |
| 160 | |
| 161 | === HTML 関連 === #HTMLrelated |
| 162 | |
| 163 | `#!html` :: Wiki ページにカスタムした HTML を挿入する。 |
| 164 | `#!htmlcomment` :: Wiki ページに HTML のコメントを挿入する (''0.12 以降'') 。 |
| 165 | |
| 166 | `#!html` ブロックは ''自己完結型'' でなければなりません。 |
| 167 | つまり、1つ目のブロックである HTML 要素を開始し、後に記述する2つ目のブロックでその要素を閉じるということはできません。これに類似した効果を得るためには、下記に述べるプロセッサを使用して下さい。 |
| 168 | |
| 169 | `#!div` :: <div> 要素内の任意の Wiki の内容をラップする |
| 170 | (''0.11 以降''). |
| 171 | `#!span` :: <span> 要素内の任意の Wiki の内容をラップする |
| 172 | (''0.11 以降''). |
| 173 | |
| 174 | `#!td` :: <td> 要素内の任意の Wiki の内容をラップする (''0.12 以降'') |
| 175 | `#!th` :: <th> 要素内の任意の Wiki の内容をラップする (''0.12 以降'') |
| 176 | `#!tr` :: `#!td` や `#!th` ブロックをラッピングしたり、 |
| 177 | グルーピングした列を見やすくするために属性を指定する際、オプションとして使用することができます。 |
| 178 | (''0.12 以降'') |
| 179 | |
| 180 | これらのプロセッサについての詳細と使用例については、 WikiHtml を参照して下さい。 |
| 181 | |
| 182 | === その他のプロセッサ ===#OtherMarkups |
| 183 | |
| 184 | `#!rst` :: Trac における Restructured テキストのサポート. WikiRestructuredText 参照。 |
| 185 | `#!textile` :: [http://cheeseshop.python.org/pypi/textile Textile] がインストール |
| 186 | されている場合のサポート。 |
| 187 | [http://www.textism.com/tools/textile/ a Textile リファレンス] 参照。 |
| 188 | |
| 189 | |
| 190 | === コードのハイライトのサポート ===#CodeHighlightingSupport |
| 191 | |
| 192 | Trac はインラインのシンタックスハイライトを提供するプロセッサを同梱しています: |
| 193 | `#!c` (C), `#!cpp` (C++), `#!python` (Python), `#!perl` (Perl), |
| 194 | `#!ruby` (Ruby), `#!php` (PHP), `#!asp` (ASP), `#!java` (Java), |
| 195 | `#!js` (Javascript), `#!sql (SQL)`, `#!xml` (XML または HTML), |
| 196 | `#!sh` (!Bourne/Bash シェル), など。 |
| 197 | |
| 198 | Trac では、シンタックスのカラーリングについて外部のソフトウェア |
| 199 | 例えば [http://pygments.org Pygments] に依存しています。 |
| 200 | |
| 201 | TracSyntaxColoring にどの言語のシンタックスハイライトがサポートされているかについての情報と |
| 202 | その他の言語のシンタックスハイライトのサポートを有効にする方法について書かれています。 |
| 203 | |
| 204 | MIME タイプをプロセッサ名として使用することによって、ソースコードをブラウズするときに、サポートしている言語についてはシンタックスハイライトをすることが可能です。例えば、このように書くことができます: |
| 205 | {{{ |
| 206 | {{{ |
| 207 | #!text/html |
| 208 | <h1>テキスト</h1> |
| 209 | }}} |
| 210 | }}} |
| 211 | |
| 212 | この結果はシンタックスハイライトされた HTML コードになります: |