記法一覧
記法直後には半角スペースを空けても空けなくても同様の動きをします。
自動改行・段落
地の文は段落、改行で適宜タグ付けされます。1行改行でbr、2行改行で段落が分けされます(pタグ)。2行以上改行した場合でも、一つの段落区切りにしかなりません。
見出し
行をエクスクラメーションマーク「!」で始めると見出しになります。その後にアンダーバー「_」を続けることで、見出しレベルを変更できます(h6まで)。
! 大見出し(h2) !_ 中見出し(h3) !__ 小見出し(h4)
大見出し(h2)
中見出し(h3)
小見出し(h4)
段落、見出しへのclass, idの付与
段落行頭と見出し記法の直後に空白を挟まずにCSSセレクタ形式の文字列を書き加えることにより、見出しへid, class、段落へclassを付与することが出来ます。この場合は他のルールと違い、CSSセレクタ形式の直後には必ず半角スペースを空けて下さい。
文書構造にこだわりたい人や、CSSで細かいデザイン制御をしたい人向けの機能です。一般的にはそれほど使わない機能だと思われます。
!#id 大見出し(h2) !_.class#id2 中見出し(h3) .class ←ここの段落にクラスが付与されています。
出力されるhtmlは以下のようになります。(見た目が変わらないため、ソースで表示)
<h2 id="id">大見出し(h2)</h2>
<h3 id="id2" class="class">中見出し(h3)</h3>
<p class="class">←ここの段落にクラスが付与されています。</p>
リスト
行をアスタリスク「*」で始めるとリスト(ul)、ナンバーマーク(シャープ)「#」で始めると数字付きリスト(ol)になります。リストは無段階で入れ子に出来、「*」と「#」の混在も可能です。
* 林檎 * 蜜柑 * 芒果
- 林檎
- 蜜柑
- 芒果
# イチッ # ニッ # サンッ # ダーッ
- イチッ
- ニッ
- サンッ
- ダーッ
* 林檎 *# 綺麗な林檎 *# 腐った林檎 * 蜜柑 * 芒果
- 林檎
- 綺麗な林檎
- 腐った林檎
- 蜜柑
- 芒果
(注)リストを入れ子にした場合、同一レベルに連続して並んでいるリスト項目は、冒頭のリストマークを基準にした一つのリストコンテナに含まれます。
* 林檎 *# ここは数字つきリスト ** '''ここも数字つきリストになる!''' * 蜜柑 * 芒果 ** 上と連続していないので、ここは普通のリスト ** ここも普通のリスト *# '''ここも普通のリスト!''' * 苹果
- 林檎
- ここは数字つきリスト
- ここも数字つきリストになる!
- 蜜柑
- 芒果
- 上と連続していないので、ここは普通のリスト
- ここも普通のリスト
- ここも普通のリスト!
- 苹果
定義リスト
コロン「:」区切りで定義リストを作成します。一行に納める書き方と、二行にまたがって書く書き方があります。また、定義と定義内容は互い違いに並んでいる必要はありません。(dt dt dd ddとかでもOK)
:apple: 苹果 :banana: 香蕉 :mango :: 芒果 :: マンゴー
- apple
- 苹果
- banana
- 香蕉
- mango
- 芒果
- マンゴー
テーブル
パイプ「|」を使って表組みを行うことが出来ます。また、「!」で始まったテーブルセルは、見出しセルとなります。単語前後の空白は全て取り除かれます。rowspan, colspan等の機能はありません。
| !apple | !banana | !mango | | 苹果 | 香蕉 | 芒果 |
| apple | banana | mango |
|---|---|---|
| 苹果 | 香蕉 | 芒果 |
引用
右向き山カッコ「>」を使って引用文の記述が出来ます。メールなんかでおなじみの記法です。cite属性、title属性を指定することは現状出来ません。
> 自由とは、自由であるように呪われていることである。
>
> {{cite:サルバドール・ダリ}}
自由とは、自由であるように呪われていることである。
サルバドール・ダリ
上記の例では拡張タグ記法を利用してcite要素を書き加えています。引用文は地の文と同様に改行・段落付けが行われます。上記の例で、文とcite要素の間を1行空けているのはそのためです。
整形済みテキスト
行頭にスペース「 」を空ける事により、整形済みテキストを表示できます。ただし、インラインの強調、アンカー(リンク)等の記法は展開されてしまいます。インラインの記法も無視したい場合は、拡張タグ記法のpreを使用してください。
ここは整形テキストです。 見た目どおりに表示されます。 しかし、インラインの'''強調'''等は展開されます。
ここは整形テキストです。 見た目どおりに表示されます。 しかし、インラインの強調等は展開されます。
Wiki記法の打ち消し(行頭記述系のみ)
行頭のWiki記法対象記号を機能させたくない場合、行頭にバックスラッシュ「\」を付けそれに続けて記号を記述すればエスケープすることが出来ます。
\* こうすれば行頭にアスタリスクを記述できます。 \> これも可能 \# これも可能 \| これも \: これも
* こうすれば行頭にアスタリスクを記述できます。
> これも可能
# これも可能
| これも
: これも
インライン装飾(強調・打消し線・下線)
下記の要領で、インラインテキストを装飾できます。
''強調(em デフォルトは斜体)'' '''強調(strong デフォルトは太字)''' ---打ち消し線(del デフォルトはline-through)--- +++挿入(ins デフォルトは下線)+++
強調(em デフォルトは斜体)
強調(strong デフォルトは太字)
打ち消し線(del デフォルトはline-through)
挿入(ins デフォルトは下線)
アンカー(リンク)
二重ブラケット「[[」で囲むことによって、リンクを作成することができます。パイプ「|」で仕切ることにより、表示テキストとリンク先を分けることが出来ます。Wikiのサイト内リンク、ナンバーマーク「#」によるページ内リンクも同様に作成可能です。
[[http://www.google.co.jp]] [[Google|http://www.google.co.jp]] [[index]] [[トップページ| index]] [[#id]] [[id="id"へのリンク|#id]]
http://www.google.co.jp
Google
index
トップページ
#id
id="id"へのリンク
画像
以下のようにして、画像を表示することが出来ます。
%img(http://www.kuaiwiki.com/etc/img/kuaiwiki.png, ロゴ)
二つ目の引数はalt(代替テキスト)に設定されます。省略可能ですが非推奨です。
アンカー記法と組み合わせて、画像からリンクを張ることも可能です。
リンク付→[[%img(http://www.kuaiwiki.com/etc/img/kuaiwiki.png, ロゴ) | http://www.kuaiwiki.com]]
imgタグに、クラスやID付けをしたい場合は、拡張タグ記法を使用してください。
脚注記法
二重括弧で脚注内容を記述できます。脚注はページ最下部に表示されます。脚注番号は自動的に付与されます。
脚注((ここが脚注です)) ←ここが脚注へのリンクに置き換わります。
脚注[1] ←ここが脚注へのリンクに置き換わります。
水平線
三連続イコール「===」で水平線を引くことが出来ます。
↓これ ===
↓これ
コメント
三連続スラッシュ「///」以降のコメントは削除されます。htmlのコメントにも反映されません。
コメントの前。ここから先が削除されます→///以降のコメントは削除されます。
コメントの前。ここから先が削除されます→
拡張タグ記法
上記記法でカバーしきれない細かいマークアップをしたい場合は、拡張タグ記法を使います。「{{」の後にタグ名で始まるCSSセレクタ+コロン(:)を指定することによって、「}}」までの部分がそのタグで囲まれます。
拡張タグ記法内ではbr、pタグによる自動改行は無効になります。また、使用可能なタグは以下に制限されています。また、タグの表記は、小文字のみ受け付けます。
div address span cite pre code h2 h3 h4 h5 h6 p img ins del abbr dfn q kbd samp blockquote
拡張タグ記法は入れ子にすることも可能です。CSSを駆使すれば複雑なレイアウトを実現することも出来るでしょう。ただし、拡張タグ記法は実験中の書式のため、複雑な入れ子にした場合、思わぬレイアウト崩れを引き起こす可能性があります。
一般的な用法
{{div.class1:
ここの中は、<div class="class1">としてマークアップされています。{{span.class2: ここは<span class="class2">。}}このように入れ子にも出来ます。
{{div#idid.classs:
ここは、<div id="idid" class="classs">です。この中で、Wiki記法を使うことも可能です。
* これはリストです。
* これは'''リスト'''です。
* これは+++りすと+++です。
}}
}}
- これはリストです。
- これはリストです。
- これはりすとです。
特殊な用法
拡張タグ記法において、一部のキーワードは特殊な動きをします。現在実装されている特殊記法は以下の通りです。
img(画像の表示)
imgをキーワードに使って、画像を表示させる場合、コロンの後にカンマ区切りで「画像の絶対URL, 代替テキスト(省略可能)」と記述して下さい。imgにclassやidを設定したいときに使うと良いでしょう。
{{img.attach : http://www.kuaiwiki.com/etc/img/kuaiwiki.png, KuaiWikiLogo}}
pre(整形済みテキスト。スーパーpre記法)
preをキーワードに使った場合、行頭スペースの整形済みテキストと同様にpreタグで囲まれますが、若干動きが異なります。拡張タグ記法のpreを使った場合には、Wiki記法のインライン展開もされず範囲内の記号は全てそのまま表示されます。ただし、数値文字参照・実体参照の扱いに関しては注意が必要です。詳しくは「Htmlエスケープと数値文字参照・実体参照」を参照してください。
{{pre:
ここの中は何を書いてもそのまま表示されます。
0340((''===||
> 3fffff
# 111
}}
ここの中は何を書いてもそのまま表示されます。
0340((''===||
> 3fffff
# 111
pcode(プログラムコード)
キーワード「pcode」で始めることにより、プログラムコードを記載することが出来ます。コードは適宜色づけされます。色付けにはJavaScriptライブラリ「Google Code Prettify」を利用しています。
{{pcode:
#!/usr/bin/perl
use strict;
use warnings;
use utf8;
print 'Hello KuaiWiki!';
}}
#!/usr/bin/perl
use strict;
use warnings;
use utf8;
print 'Hello KuaiWiki!';
Htmlエスケープと数値文字参照・実体参照
普段は気にする必要はありませんが、「& " ' < >」は適宜エスケープされます。また、数値文字参照・実体参照の前に置かれている「&」は常に(pre記法の中であっても!)エスケープされません。つまり、数値文字参照・実体参照も意図した通りに表示されます。「♥」と書けば「♥」と表示されます。
ただし、数値文字参照/実体参照の書き方をそのままの形で出力、つまり「♥」のように出力したい場合は、「&hearts;」と書く必要があります。さて、このセクションの編集画面はどのように書かれているでしょうか?
特殊文字を入力したい以外の目的で、数値文字参照・実体参照を使うことは無いと思いますが、記号がWiki記法とバッティングして意図したとおりに表示されない場合、数値文字参照・実体参照で回避することが出来ます。もちろん、そのようなバッドノウハウに頼らずとも正しく表示される無矛盾な記法を作者は目指しています。このページの編集に、数値文字参照・実体参照を使って逃げている箇所があるのは秘密です。
コンポーネント
行頭をパーセント「%」で始めることにより、コンポーネントメソッドを実行できます。現在実装されているコンポーネントメソッドは以下の通りです。
目次の出力(toc)
ページの目次を出力することが出来ます。このモジュールは1ページに2回以上指定しないようにしてください。
% toc
出力イメージはこのページの目次を参照してください。
ページ一覧の出力(entry_list)
ページ一覧をリンク付きのリストで出力します。
% entry_list
出力イメージはページ一覧@特別を参照してください。
改ページ(new_page)
画面の見た目には影響されませんが、印刷時に改ページを入れたい部分を指定することができます。class="newpage"にCSSでpage-break-beforeを指定しているので、見出しや段落に直接指定することも可能です。ex. !_.newpage
ただし、class="newpage"のCSSが上書きされている場合はこの限りではありません。
% new_page
- *1ここが脚注です
KuaiWikiWeb!