Last modified : 2014. 10. 13

Basic Syntax - Group

このページでは KARAS のグループ構文について説明します。

インライングループ

インライングループ構文は、ある文章や単語をグループにするための構文です。 (言い換えれば span 要素によって閉じるための構文です。) テキストを <<>> によって閉じると、インライングループになります。 オプションを指定しないときは、空のグループが作成されます。

Input
<<group>> text.
Output
<span class="group"></span> text.

インライングループはオプションの構文 :: を使ってテキストを追加することができます。 インライングループ構文の最大レベルは2です。レベル1では class グループとして出力されます。 レベル2では id グループとして出力されます。 ふつうは、必ずグループ名を付け、 id はあるドキュメントの中で一意に定められるべきです。

Input
<<group::Sample>> text.
<<<group::Sample>>> text.
Output
<span class="group">Sample</span> text.
<span id="group">Sample</span> text.

ブロックグループ

ブロックグループ構文は、見出し・リスト・テーブル・テキストなどのあらゆる要素をグループにするための構文です。 (言い換えれば、 div 要素によって閉じるための構文です。) 行頭に {{ を書くとグループの開始位置となります。行頭に }} を書くとグループの終了位置となります。 グループの開始位置と終了位置の間にある見出しやテキストがグループとなります。

Input
{{
 = Heading
 
 Some paragraphs. 
 
 - Some lists.
 -- 2nd item.
}}
Output
<div>
<h1>Heading</h1>
<p>Some paragraphs</p>
<ul>
<li> Some lists.
<ul><li>2nd item.</li></ul>
</li>
</ul>
</div>

名前付きのグループ

グループには名前をつけることができます。グループの開始位置を表す構文 {{ に続いて書かれたテキストは、グループの名前となります。 (言い換えれば div 要素のクラス名となります。) グループ名は改行することができない点に注意してください。

Input
{{groupname
Contents in group.
}}
Output
<div class="groupname">
<p>Contents in group.</p>
</div>

特別なグループ

次のいくつかの名前は、グループ名として使うことができません。 それらの名前をつけるとき、グループは特別なグループになります。

言い換えれば、その名前の HTML 要素になります。 グループが示す内容についての詳細が必要なときは、 HTML に関するドキュメントを読むことを推奨します。

div特別な意味を持たないグループ。
headerあるドキュメントのヘッダを表すグループ。
footerあるドキュメントのフッタを表すグループ。
navメニューや構成などを表すグループ。
articleまとまった記事であることを示すグループ
sectionある内容のまとまりであることを示すグループ。
aside本題とは異なる内容であることを示すグループ。
addressあるコンテンツの著者に関する情報を示すグループ。
details追加の情報を表すグループ。
figure図表を表すグループ。
pre整形済みの内容を表すグループ。
codeソースコードやパスなどを表すグループ。
kbdユーザのあらゆる入力を表すグループ。
sampコンピュータなどの出力結果を表すグループ。

例えば、 "header" という名前が付けられたグループは、 header 要素として出力されます。

Input
{{header
Contents in header.
}}
Output
<header>
Contents in header.
</header>

header にグループ名をつけるときはオプションのための記号 :: を書いて、後に続けてグループ名を書きます。

Input
{{header::groupname
Contents in header.
}}
Output
<header class="groupname">
Contents in header.
</header>

div グループに "header" という名前 (クラス名) をつけるときは、 グループ名を "div" として、 オプションとして "header" を追加します。

Input
{{div::header
Contents in div group.
}}
Output
<div class="header">
Contents in div group.
</div>

figure, details グループ

figuredetails グループは、特別な機能を持っています。 figure グループ内に書かれた見出しの構文 = は、 figcaption (図の見出し)として出力されます。 見出しの構文を書く位置は、 figure グループ内のどこでも良いです。 しかしながら、一般には、 figure グループの一番上か一番下に書きます。

Input
{{figure
= Caption text.

!|table head || table item
!|table head || table item
}}
Output
<figure>
<figcaption>Caption text.</figcaption>
<table>
<tr><th>table head</th><td>table item</td></tr>
<tr><th>table head</th><td>table item</td></tr>
</table> 
</figure>

detalis グループ内に書かれた見出しの構文 =summary (要約)として出力されます。 見出しの構文を書く位置は、 details グループ内のどこでも良いです。 しかしながら、一般には、 details グループの一番上に書きます。

Input
{{details
= Summary text.
 
;detail-1
;;More detail.
;detail-2
;;more detail.
}}
Output
<details>
<summary>Summary text.</summary>
<dl>
<dt>detail-1</dt>
<dd>More details.</dd>
<dt>detail-2</dt>
<dd>More details.</dd>
</dl>
</details>

pre, code, kbd, samp グループ

pre, code, kbd, samp グループは、特別な機能を持つグループです。 これらのグループ内にあるテキストは、改行するための構文 ~ を使わなくても、そのまま改行されます。 また、テキストに含まれる KARAS の構文は変換されず、 <> などの特定の文字は文字参照に変換されます。

Input
{{pre
Preformatted text.
2nd line.
<tag>Text in tag.</tag>
}}
Output
<pre>
Preformatted text.
2nd line.
&lt;tag&gt;Text in tag.&lt;/tag&gt;
</pre>

code, kbd, samp グループの出力は、 pre グループ(要素)が合わせて出力されます。 オプションで追加したグループ名 (class名) は、 precode (kbd, samp) の両方に追加されます。

Input
{{code :: lang-c
int main()
{
    printf("Unyalder!");
    return 0;
}
}}
 
{{samp :: terminal
$echo Unyalder!
Unyalder!
}}
Output
<pre class="lang-c">
<code class="lang-c">
int main()
{
    printf("Unyalder!");
    return 0;
}
</code>
</pre>

<pre class="terminal">
<samp class="terminal">
$echo Unyalder!
Unyalder!
</samp>
</pre>