記事本文

記事本文はパーサーによるためルールはなく出力されますが*1、一般的に使われる標準のさつき記法ないしはMarkdown記法はある程度整った書式をしていますので、それについて解説します。

基本構造

<section>
<p>手前の文章。</p>
</section>

<section>
<h3><a href="#">見出し</a></h3>

<p>adiaryはPerlで動作するHTML5 valid<span class="footnote"><a href="#fn-k440n1">*1</a></span>なブログです。</p>

<h4><a href="#">小見出し1</a></h4>

<footer>
	<p class="footnote"><a href="#fnt-k440n1">*1</a> : 作業しながらよくHTML5チェッカーで確認しています。</p>
</footer>
</section>

記事はすべて section で囲まれます。
section は1つまりは複数存在しますが、sectionが存在しないことはありません。*2
section の外に文字やタグが存在することはありません。
section は h3（見出し）で区切られます。
footerは注釈などが出力されます。footerの出力位置は section の終わりです。
Markdownでもこの基本構造に則って出力されます。

見出し

ブログタイトルがh2、記事タイトルがh2なので、記事の最上位見出しはh3になります。HTMLの仕様上h6までありますが、h5まではちゃんと設定してほしいところです。

<h3><a href="#">見出し</a></h3>
<h4><a href="#">小見出し1</a></h4>
<h5><a href="#">小々見出し1</a></h5>

設定により、h5までは<span class="sanchor">が付くことがあります。*3

<h3><a href="#"><span class="sanchor">1</span>見出し</a></h3>
<h4><a href="#"><span class="sanchor">1.1</span>小見出し1</a></h4>
<h5><a href="#"><span class="sanchor">1.1.1</span>小々見出し1</a></h5>

またh3、h4には日付表記か時刻表記のいずれかが付くことがあります。（マニュアル）

<h3><a href="#">見出し <span class="timestamp">2015/05/22</span></a></h3>
<h4><a href="#">小見出し <span class="timestamp">0:28</span></a></h4>

日付表記と sanchor は同時に付くことがあります。

ブロック系記法

最低限対応してほしいものにblockquoteによる引用、pre環境のブロック系記法色々があります。必ずしも枠線等を出す必要はありませんが、区切りとして分かる方が望ましいと思います。

サンプル。

<pre>&gt;&gt;[http://adiary.org/:adiary公式ページより]
adiary は導入が簡単で、Wiki のようにも活用でき、CMS的コンテンツとblogを一元的に管理することができます。
&lt;&lt;
</pre>

<blockquote cite="http://adiary.org/">
<p>adiary は導入が簡単で、Wiki のようにも活用でき、CMS的コンテンツとblogを一元的に管理することができます。</p>
<cite><a href="http://adiary.org/">adiary公式ページより</a></cite></blockquote>

シンタックスハイライト

ソースコード等をはりつけるシンタックハイライトは、基本的にシンタックスハイライトのデザインが自動ロードされます。どのシンタックハイライトデザインは複数あり（pub-dist/highlight-js/以下）、どれをロードさせるかテーマ側で指定することもできます。

テーマ選択デモ

#syntax-highlight-theme {
	min-width:	1px;			/* 設定を有効にするための印 */
	font-family:	"tomorrow-night-blue";	/* ロードさせたいCSS */
}

標準では「テーマに合わない」ときだけ指定してください。また、シンタックハイライトのモジュールは将来的に入れ替わる可能性もありますのでご注意ください。

その他

テーブル
ul, ol, dlのリスト
画像

ぐらいは表示テストをしてほしいところです。

テスト用の記事データ

test-data.txt

関連記事