「はじめてのMarkdown」サポートページ

このページは、2014年5月14日発売の「はじめてのMarkdown」（工学社刊、清水美樹著、ISBN ISBN978-4-7775-1832-6）の筆者によるサポートページです。
このページでは、本書の内容をさらに進めた知識・技術について解説しています。
本書中の誤記訂正等、直接の情報は工学社の公式サポートページを御覧ください。

このサイトのトップへ

Markdown Extraについて　

Extraの機能：表を記述　

Extraの機能：「div」タグの中に　Markdownを書く　

以下はそれぞれ別のページに移動します。

MarkDown#Editorでスタイルシートを使ったHTMLを書き出す

変換ツール「MultiMarkdown」の使い方

Eclipseの「Markdown」編集プラグイン

Markdown Extraについて

「Markdown Extra」とは、最初PHPで実装されたMarkdown記法の拡張仕様です。（公式ページ）今は、いろいろな言語で実装されており、「Markdown Extra対応」の機能を持つエディタや変換ツールも公開されています。そのような機能を利用すれば、Markdownの「標準」の記法に混ぜて「Extra」の書式を記述し、HTMLに変換できます。

本書の実践に最適の実行環境として紹介したエディタ「MarkDown#Editor」も、「Markdown Extra」に対応しています。
また、別ページで紹介するMarkdown -> HTML への変換ツール「MultiMarkdown(プロジェクトのホームページ)」も「Markdown Extra」対応です。

Extraの機能：表を記述

Markdown Extraで表を記述するコツ

Markdown Extraの記法で、「table」タグを使わずに表を記述できます。

記法のコツは以下の通りです。

表の記述例

リスト1は、Markdown Extraによる表の記述例です。
リスト1 Markdown Extraで表を書く
日本語　| 英語    | 該当ギリシャ神話 | 由来
--------|---------|------------------|-------------------------------
水星    | Mercury | ヘルメス         | 飛ぶように速い（実は観測の都合）
金星    | Venus   | アフロディテ     | 宵の明星や明けの明星が美しい
火星    | Mars    | アレス           | 赤くて怖そう
木星    | Jupitor | ゼウス           | 大きくて偉そう
変換されたHTMLは(長いので)別ページの「tablesample-txt.html」のようになります。

ブラウザによる表示は図1の通りです。

図1 リスト1から変換されるHTMLのブラウザ表示
図1をもっと見やすくするには、スタイルシートで「table」「tr」「th」「td」などのタグのスタイルを変更します。

表にするための最低限の機能

上のリスト1における空白や「-」は、テキストエディタ上での外観がよくなるように少しずつ入力して調整したものです。
（Markdownエディタもソースの入力欄はテキストエディタです）
変換したHTMLが正しければよい、というのであれば、リスト2のように書式がまったく考慮されない形でも変換後は同じになります。
リスト2 最低限の規則にのみ従う表の書き方
日本語|英語|該当ギリシャ神話|由来
-|-|-|-
水星|Mercury|ヘルメス|飛ぶように速い（実は観測の都合）
金星|Venus|アフロディテ|宵の明星や明けの明星が美しい
火星|Mars|アレス|赤くて怖そう
木星|Jupitor|ゼウス|大きくて偉そう

Extraの機能：「div」タグの中に　Markdownを書く

Markdown標準の記法もHTMLタグを使用できる

標準のMarkdown記法でも、HTMLタグを書いてMarkdownでは記述できない表示を補うことができます。
MarkdownからHTMLに変換するときは、そうしたタグはそのまま無変換で残ります。

たとえば、リスト3は、Markdown記法にはない「form」タグをMarkdown原稿に書いたものです。

リスト3 Markdown記法と「form」タグ
HTML文書中にMarkdownを埋め込む
==========================

このように、Markdownで書けない部分は**直接HTMLで**書きます。


<form>
<input type="submint" value = "これは押しても何も出ません">

</form>
リスト3をHTMLに変換すると、リスト4のようになります。
Markdown記法の部分にタグがつき、最初からタグだったところはそのまま残ります。
リスト4 リスト3から変換されたHTML
<h1>HTML文書中にMarkdownを埋め込む</h1>

<p>このように、Markdownで書けない部分は<strong>直接HTMLで</strong>書きます。</p>

<form>
<input type="submint" value = "これは押しても何も出ません">

</form>
図2 リスト3から変換されるHTML（すなわちリスト4）のブラウザ表示

標準記法で「div」はダメ

しかし、Markdownの標準の記法ではHTMLタグの使用に制限があります。

たとえば、タグの中にMarkdown記法は書けません。
もっとも、Markdown記法の方針は、「ソースそのものを見やすく美しく」ですから、極論なら「タグを使いたければ、最初から全部HTMLで書けばいいんだわ」ということになります。あまり凝ったタグの使用は望まないことにしましょう。
でも、変換されるHTMLにちょっと興を添えるのに、「div」タグくらいは使いたくなるのではないでしょうか。

リスト4は、「div」タグに「CSS」形式でスタイルの記述をしたものです。その中にマークダウン記法で箇条書きを記述しました。

リスト4 「div」タグの中にMarkdown
<div style="color:yellow; background-color:pink; padding:5px" >

1. ソメイヨシノ
2. ハナミズキ
3. サルスベリ

</div>
リスト4をHTMLに変換しても、「div」タグの中身はMarkdownとして変換されません。
HTMLは、リスト4そのままです。そのため、ブラウザ表示は図3のようにただの連続した文になります。
図3 リスト4から変換されるHTML（不変）のブラウザ表示

Markdown Extraの属性「markdown」

Markdown Extraでは、「div」に属性「markdown」を与え、値を「1」にします。これで中のMarkdown記法が変換されます。
リスト5 「markdown」属性を「1」にする
<div markdown ="1" style="color:yellow; background-color:pink; padding:5px" >

1. ソメイヨシノ
2. ハナミズキ
3. サルスベリ

</div>
ひとつ注意があります。「div」タグとMarkdown記述の間には空行を置いて、「別段落」であることを明確にしてください。

変換されたHTMLでは、「div」タグから「markdown」属性が除去されていることに注意しましょう。HTMLになってしまえば関係ないからです。

リスト6 リスト5から変換されるHTML
<div style="color:yellow; background-color:pink; padding:5px" >

<ol>
<li>ソメイヨシノ</li>
<li>ハナミズキ</li>
<li>サルスベリ</li>
</ol>
</div>
図4 リスト5から変換されるHTML（リスト6）のブラウザ表示
以上、Markdown Extraを中心に解説しました。
他の項目は別ページで解説します。

次の話題へ

このサイトのトップへ