Markdown, wiki markup, html5そしてWINI: 簡易マークアップ言語書法の比較早見表（チートシート）

はじめに

この記事で取り上げたWini.pmはVersion 1.0にアップデートされ、大きく機能拡張しています。
最新の情報についてはマニュアル記事『ウェブサイトらくらく作成 軽量マークアップ言語markgaab/Wini』をご覧ください。

WINIは、いわゆる簡易マークアップ言語の一つである。「できるだけ手間暇かけずに高品質なHTMLコンテンツを構築する」ために、markdownやwiki markupを参考に開発された。

WINIは、markdownなみにシンプルな文法体系を維持しつつ、高度な表現力をもつ。HTML5のプリプロセッサであることを前提とすることにより、「きれいな文書」を手早く完成させるという目的をかなえるべく高機能性と平易性を両立させることに成功したのが、WINIというマークアップ言語なのである。

本記事の目的は、WINIと既存マークアップ言語の簡単な比較を通して、WINIの概略を把握していただくことにある。WINIの詳細については総合的紹介記事『WINI ━ WIKIやMARKDOWNを超えた新しいマークアップ言語』に譲るので、参照いただければ幸いである。

え？ そんなどこの馬の骨とも分からぬ言語に興味はない？ えっと、markdownとwikiの文法早見表としても本記事を活用してください。

WINIではこんな表現ができる

まずWINI文法の概略を説明し、そのあとで、HTML5・Markdown・Wiki Markupの比較対照表を示す。

文章構造

大見出し・中見出し・小見出しあるいは部・章・節

文頭が!である行は、「見出し」である。!が最上位で、!!、!!!と感嘆符が増えるごとに下位のレベルとなる。HTML5の<h?>タグに対応している。

! 大見出し
!! 中見出し
!!! 小見出し

箇条書き

文頭が#である行は、番号付きリストとして扱われる。同様に文頭が*である行は、番号なしリストとして扱われる。;で始まる行と:で始まる行は、対となって「定義リスト」を構成する。それぞれ、HTML5の<ol>...</ol>、<ul>...</ul>、<dl>...</dl>に対応する。

# 番号付きリスト項目１
# 番号付きリスト項目２
## 入れ子になった番号付きリスト項目２－１
## 入れ子になった番号付きリスト項目２－２

* 番号なしリスト項目１
* 番号なしリスト項目２

; 定義リスト項目１
: 定義リスト項目１説明
; 定義リスト項目２
: 定義リスト項目２説明

テキスト装飾

上付き文字・下付き文字は、それぞれ^^と_で表現できる。

水の化学式は、H__2Oである。
1辺10cmの正方形の面積は、100cm^^2である。
ウラン235（^^{235}U）はウランの同位体の一つである。

各種の文字飾りに対応したマクロが用意されている。

{{b|太字}}, {{i|斜体}}, {{u|下線}}, {{s|打ち消し線}}

リンク

[リンク先URL 説明文]でハイパーリンクが作れる。

また、[リンク先URL|@@ 説明文で「リンク先を別窓で開く」リンクが作れる。つまり、[http://example.com|@@ 別窓で開く]は、<a href="http://example.com" target="_blank">別窓で開く</a>というhtmlコードに変換される。

インラインイメージ

[! イメージ画像のURL 説明文]でインラインイメージが作れる。また、[!! イメージ画像のURL 説明文]と感嘆符を重ねることで、さらにfigureタグを組み合わせることが出来る。

[!! image.png|>200x100 sample image]

対象画像がimage.pngで、それを高さx幅=200x100pxで表示、さらに右寄せフロート属性を指定し、画像の左側に本文が回り込むことを許す。imgタグはfigureタグの中に配置され、sample imageがfigureのキャプションとして使われる。

更に、インラインイメージとリンクを組み合わせたコードがWINIでは簡単に書ける。

[? image.png|100x100@@ でかい画像]

この[?書式は次のようなhtmlコードに変換される。

<a href="image.png" target="_blank"><img src="http://image.png" alt="でかい画像" id="image1" width="100" height="100"></a>

つまり、image.pngという画像について、本文中に幅100px、高さ100pxのサムネイルを置き、クリックすることでオリジナルサイズの画像表示に飛ぶリンクが設定される。

引用

{{q}}
引用テキスト
{{end}}

のように、マクロを使うことで任意のテキストを引用できる。引用テキスト中ではWINI書法は無効となり、書いたとおりのテキストがblockquoteタグ¹に囲まれる形で出力される。

またpythonなどで使われる"""で挟む形式にも対応している。

"""
引用テキスト
"""

{{q}}の仲間に{{pre}}と{{code}}がある。これらのマクロを使うと、対象テキストはblockquoteの代わりにそれぞれpreあるいはpre+codeタグで囲まれて出力される。これらは「整形済みテキスト」と位置付けられ、さらに{{code}}は対象テキストが「プログラムコード」の引用であることを示す。

表

表関係のマークアップは、これでもかとばかり、著しく、非常に、たくさん用意されている。詳細は別記事に譲り、ここではごく単純なサンプルだけ示しておく。

|- 表のタイトル |                             |
|  見出し0   | 列見出しA | 列見出しB | 列見出しC |
|  行見出し1 |    セル1A | セル1B   | セル1C    |
|  行見出し2 |    セル2A | セル2B   | セル2C    |

チートシート

お待たせした。いよいよ書法対照表を示そう。存分に検分いただきたい。

なお、markdownやwiki markupを実装したソフトは数多くあり、それらの間で、サポートされている文法が少しづつ異なっている。そうしたバリエーション全部をフォローするのは困難なので、ここでは以下の方針を採用する。

• markupについては、ここはqiitaなので原則的にqiita準拠の文法を示す。
• wiki markupについてはMediaWikiのヘルプ文書の記述に準拠する。

ここに記した記法は上記以外のツールでも多くの場合通用するとは思うが、正確なところはそれぞれのマニュアルを確認してほしい。

*1) 厳密にはHTML5におけるb,i,u,sタグは論理タグであって見た目を決める物理タグではない。しかしwikiもmarkdownもHTML4以前の定義に準拠して、これらを物理タグとして扱い、WINIのように論理タグと区別していない。これらを同列に並べるのは本来の意味を考えるとおかしいのだが、各ツールの現状を考え、やむを得ずこのような形にまとめている。
見出し
機能	WINI	wiki	markdown	HTML5
大見出し	!xxx	= xxx =	# xxx	<h1>xxx</h1>
中見出し	!!xxx	== xxx ==	## xxx	<h2>xxx</h2>
小見出し	!!!xxx	=== xxx ===	### xxx	<h3>xxx</h3>
リスト／箇条書き
機能	WINI	wiki	markdown	HTML5
番号なしリスト	* xxx	* xxx	* xxx	<ul><li>xxx</li></ul>
番号つきリスト	# xxx	# xxx	0. xxx	<ul><li>xxx</li> </ul>
文字スタイル*1
機能	WINI	wiki	markdown	HTML5
上付	^^{XX}	<sup> XX& lt;/sup>	<sup> XX </sup>	<sup> XX& lt;/sup>
下付	__{XX}	<sub> XX </sub>	<sub> XX </sub>	<sub> XX </sub>
太字	{{b|太字}}	''' 太字 '''	** 太字 **	<span style="font-weight:bold;"> 太字 </span>
	{{*|太字}}
斜体	{{i|斜体}}	''斜体''	* 斜体 *	<span style="font-style:italic;"> 斜体 </span>
	{{/|斜体}}
文字修飾*1
機能	WINI	wiki	markdown	HTML5
下線	{{u|下線}}	< u>下線 </u>	<u> 下線 </u>	<span style="border-bottom: solid 1px;"> 下線 </span>
	{{_|下線}}
打消線	{{s|打消線}}	<s> 打消線 </s>	~~打消線~~	<span style="text-decoration: line-through;"> 打消線 </span>
	{{-|打消線}}
意味付け*1
機能	WINI	wiki	markdown	HTML5
b	{{B|キーワード}}	<b> キーワード </b>	<b> キーワード </b>	<b> キーワード </b>
i	{{I|心の声}}	<i> 心の声 </i>	<i> 心の声 </i>	<i> 心の声 </i>
s	{{S|不正確・無関係}}	<s> 不正確・無関係 </s>	<s> 不正確・無関係 </s>	<s> 不正確・無関係 </s>
strong	{{**|重要}}	<strong> 重要 </strong>	<strong> 重要 </strong>	<strong> 重要 </strong>
画像の挿入
機能	WINI	wiki	markdown	HTML5
単純なインラインイメージ	[!x.png]	[[file:x.png]]		<img src="x.png">
代替テキストつきインラインイメージ	[!x.png テキスト]	[[file:x.png | alt=テキスト]]		<img src="x.png" alt="テキスト">
代替テキスト・リンクつきインラインイメージ	[?x.png テキスト]	[[file:x.png |alt=テキスト | link=x.png]]	[](x.png)	<a href="x.png"> <img src="x.png" alt="テキスト"> </a>
with size	[!x.png| 640x480]	[[file:x.png| 640x480px]	<img src="x.png" width="640" height="480">	<img src="x.png" width="640" height="480">
リンク
機能	WINI	wiki	markdown	HTML5
他ページへのリンク	[http://x.test/index.html テキスト]	[http://x.test/index.html テキスト]	[テキスト](http://x.test/index.html)	<a href="http://x.test/index.html">テキスト </a>
引用など
機能	WINI	wiki	markdown	HTML5
普通の引用	{{q}} text {{end}}	<blockquote>text </blockquote>	> text	<blockquote>text </blockquote>
改行を保全した引用	{{pre}} text {{end}}	<pre>text</pre>	> text	<pre>text </pre>
プログラムコード	{{code}} text {{end}}	<pre> <code>text</code> </pre>	``` text ```	<pre> <code>text</code> </pre>

終わりに

デファクトスタンダードともいえるWiki markupやMarkdownを向こうに回して、なぜ作者がわざわざ「車輪の再発名」たる新しいマークアップ言語を開発したのか、ここまで読み進めてくださった方は理解されたことと思う。

本記事では文法体系のことしか触れなかったが、システムのインストールに余計な手間がかからないことも付け加え強調しておきたい。端的に言えば、perlさえ使えれば他は要らないシステムであり、linuxだろうとMacOSだろうとFreeBSDだろうとWindows10だろうと、問題なく導入できる。

さあ、皆さん。

これ以上WINIのユーザとなることを躊躇する理由があるだろうか?　いや、ない！　いますぐ公式ダウンロード元にアクセスして、一式ダウンロードしましょう！

1. qタグではないことに注意。インライン要素ではなくブロック要素を対象とする意図である。 ↩