Redmine Wikiで本当に使えるTextile記法を全て試してみた

こんにちは､shirotterです｡

今のところRedmineに関しての記事しか書いてませんが､
今回もまたまたRedmineに関する記事です｡

さて今回はRedmineの何を記事にするのかと言うと､
Redmineのwiki記法/文法についてです｡

すでに､

• Redmineにおけるwiki記法
• textile記法
• Redmine Wiki Formatting

にwiki記法についての解説がありますがTextile記法で一部使えないのがあったりと､
Textileリファレンスを見ながらWikiを書いているとプレビューでションボリしてしまうことが多かったので､
一通り自分でTextileリファレンスを基に記法を試してまとめてみることにしました｡

なお､スタイルを直接指定しているような箇所は､

• RedmineのTextile記法の制限を解除する

を有効にしていないと動作しません｡

また､デフォルトではHTMLのタグには<pre>と<code>くらいしか使うことが出来ません｡
使用可能なHTMLタグを追加するには､

• Redmineのwikiで制限されているHTMLタグを利用可能にする

を参照してください｡

以下が､僕のまとめたRedmineのwiki記法です｡

Redmine Wiki Textile記法

• ※ Wiki記法について画面の表示の上で自動で改行されている箇所があるかと思いますが､そこは適当に1行にしたりして試してみてください｡
• ※ 各記法は基本的に前後を空行にしておかないとTextile記法だと認識してくれないみたいです｡前後はなるべく空行で囲ってしまいましょう｡
• ※　CSSは本Blogのものが適用されているので､ 実際のRedmine上でのwikiとは見た目が若干異なります｡
• ※ チケットやドキュメント､wikiページへのリンクの張り方は､Redmine内でのリンクを参照してください｡

概要	効果	記法	表示
目次		{{toc}} {{>toc}}(右寄せ)	左､もしくは右に見出しレベル3までの目次が表示されます
水平線		*** --- ___
見出し		h1. 見出し1 h2. 見出し2 h3. 見出し3 h4. 見出し4 h5. 見出し5 h6. 見出し6	画面レイアウトが崩れる為､表示はしていません｡
引用		以下から引用文になります｡ bq. これは引用文です｡	以下から引用文になります｡ これは引用文です｡
脚注		Where is footnotes[1]?	Where is footnotes1?
装飾	斜体<em>	This is _italic_ format.	This is italic format.
	斜体<i>	This is __italic__ format.	This is italic format.
	強調<strong>	This is *strong* format.	This is strong format.
	強調<b>	This is **strong** format.	This is strong format.
	出典･参照先<cite>	This is ??cite?? format.	This is cite format.
	コード<code>	This is @source code@ format.	This is source code format.
	取り消し線	This is -delete- format.	This is delete format.
	追加	This is +insert+ format.	This is insert format.
	上つき文字	This is ^superscript^ format.	This is superscript format.
	下つき文字	This is ~subscript~ format.	This is subscript format.
	スパン<span>	This is %span% format. This is %{color:red}span% format.	This is span format. This is span format.
ブロック属性	IDを適用	p(#sample). Sample	<p id="sample">Sample</p> (視覚的に判断できない為､ソースを掲載しています)
	クラスを適用	p(sample). Sample	<p class="sample">Sample</p> (視覚的に判断できない為､ソースを掲載しています)
	IDとクラスを適用	p(class#id). Sample	<p id="id" class="class">Sample</p> (視覚的に判断できない為､ソースを掲載しています)
	スタイルを適用	p{color:red; text-align:right;}. Sample	Sample
	LANG属性を適用	p[ja]. 日本語	<p lang="ja">日本語</p> (視覚的に判断できない為､ソースを掲載しています)
位置属性	左寄せ	p<. align left	align left
	右寄せ	p>. align right	align right
	中央寄せ	p=. align center	align center
	両端揃え	p<> align justified	align justified
	左インデント	p(. 左インデント(1em)	左インデント(1em)
		p((. 左インデント(2em)	左インデント(2em)
		p((((. 左インデント(4em)	左インデント(4em)
	右インデント	p). 右インデント(1em)	右インデント(1em) (視覚的に分かりやすくする為､セルに右寄せ属性を追加しています)
		p)). 右インデント(2em)	右インデント(2em) (視覚的に分かりやすくする為､セルに右寄せ属性を追加しています)
		p)))). 右インデント(4em)	右インデント(4em) (視覚的に分かりやすくする為､セルに右寄せ属性を追加しています)
省略	省略<acronym>	HTML(Hyper Text Markup Language) is simply.	HTML is simply. (カーソルを合わせてみてください)
リスト	リスト	* list1 * list2 ** list2.1 ** list2.2 *** list2.2.1 * list3	list1 list2 list2.1 list2.2 list2.2.1 list3
	番号付きリスト	# list1 # list2 ## list2.1 ## list2.2 ### list2.2.1 # list3	list1 list2 list2.1 list2.2 list2.2.1 list3
テーブル	シンプルなテーブル	|_. name|_. age|_. sex| |tarou|24|male| |hanako|20|female|	name age sex tarou 24 male hanako 20 female
	セルの位置属性	|_. セルの位置属性とその効果| |<. align left| |>. align right| |=. align center| |<>. align justify| |^. valign top| |~. valign bottom|	セルの位置属性とその効果 align left align right align center align justify valign top valign bottom
	セルの結合(colspan)	|\3. colspan 3| |col1|col2|col3|	colspan 3 col1 col2 col3
	セルの結合(rowspan)	|/3. rowspan 3| |row1| |row2| |row3|	rowspan 3 row1 row2 row3
	セルの装飾	|{background:#ddd}. col1|col2|col3|	col1 col2 col3
		{background:#ddd}. |col1|col2|col3|	col1 col2 col3
		table{border:10px solid red}. |col1|col2|col3| (これは2行で記述します)	col1 col2 col3
リンク	リンク	http://www.google.co.jp/	http://www.google.co.jp/
	説明付きリンク	"Google":http://www.google.co.jp/	Google
画像	画像	!http://www.google.co.jp/intl/ja_jp/images/logo.gif!
	説明付き画像	!http://www.google.co.jp/intl/ja_jp/images/logo.gif(Google logo)!	(画像にカーソルを合わせてみてください)
	リンク画像	!http://www.google.co.jp/intl/ja_jp/images/logo.gif(Google logo)!:http://www.google.co.jp/	(画像をクリックしてみてください)

応用

画像の位置属性の指定

以下のようにして画像の記法に右寄せ属性を追加することができます｡

!>http://www.google.co.jp/intl/ja_jp/images/logo.gif(Google logo)!:http://www.google.co.jp/

画像はこのように右に回り込んで表示されます!!

回り込み

※ divタグを使えるようにしておく必要があります!!

<div style="float:right;">

|"Google":http://www.google.co.jp/|
|"Gmail":https://mail.google.com/mail/|
|"Google Map":http://www.google.co.jp/maps|

</div>

!http://www.google.co.jp/intl/ja_jp/images/logo.gif(Google logo)!:http://www.google.co.jp/

すると････

このような表示を実現することが出来ます｡

まとめ

以上､色々と自分が試した結果をまとめてみました｡
なるべく分かりやすくまとめてみたつもりですがいかがだったでしょうか?

是非､この一覧を活用して､
Redmineのwikiをより一層華やかなものにしてください｡

使用したソフトウェアのバージョン

Redmine	0.8.3

参考文献

• Redmineにおけるwiki記法
• textile記法
• Redmine Wiki Formatting
• Textileリファレンス

脚注

¹ Here is footnotes1!!