電書ちゃんのでんでんマークダウン
Just another Markdown dialect.
Syntax シンタックス
でんでんマークダウンの記法について解説します。
でんでんマークダウンの記法は Markdown の方言のひとつ PHP Markdown Extra をさらに拡張して、日本語と電子出版に最適化させたものです。従って、オリジナルの Markdown の記法、PHP Markdown Extraに由来する記法、でんでんマークダウン独自の記法が混在しています。
それぞれを区別するために、オリジナルの Markdown でも使える記法には Markdown、PHP Markdown Extraでも使える記法には PHP Markdown Extra、でんでんマークダウン独自の記法には でんでんマークダウン、というラベルをつけています。違いを把握する際の参考にしてください。
また、でんでんマークダウンの執筆や表示の確認には、でんでんエディターが便利です。
段落
- Markdown
- PHP Markdown Extra
- でんでんマークダウン
段落と段落の間には空行を挟みます。半角スペースやタブで字下げしないでください。
書き方
これは段落です。
これは別の段落です。
変換されるHTML
<p>これは段落です。</p>
<p>これは別の段落です。</p>
段落内の改行
- でんでんマークダウン
文章を改行したあとに、空行を挿入せずに文章を続けると、段落<p>の中で改行<br />を行ったものとして扱われます。これはでんでんマークダウンの大きな特徴です。
書き方
これは段落です。
これは段落の続きです。
これは別の段落です。
変換されるHTML
<p>これは段落です。<br />
これは段落の続きです。</p>
<p>これは別の段落です。</p>
オリジナルの Markdown や PHP Markdown Extra では改行は半角スペースに置き換えられます。これらの処理系で<br />を挿入するには、改行する箇所の手前に半角スペースを2つ以上挿入します。この方法は、視覚的に改行箇所を把握しづらく編集に不向きであるため、でんでんマークダウンでは採用していません。
行頭の字下げ
文芸作品のように、行頭を字下げする行としない行が登場し、しかも重要な意味を持つ作品では、字下げする行頭に全角スペースを入れるとよいでしょう。
書き方
これは字下げする段落です。
これは字下げしない段落です。
変換されるHTML
<p> これは字下げする段落です。</p>
<p>これは字下げしない段落です。</p>
段落間の空き／空行の挿入
でんでんコンバーターの縦書きスタイルでは、段落同士の間に空きがありませんが、<p><br /></p> を挿入することで一行分の空きを作ることができます。これは空行の意味を解釈するのが難しい文芸作品向けの方法です。CSSに馴染みのある人は、margin、paddingをカスタマイズする方法も検討してください。
書き方
この段落の次が一行空きます。
<p><br /></p>
この段落の手前が一行空きます。
見出し
# を使った記法 atx形式
- Markdown
- PHP Markdown Extra
- でんでんマークダウン
見出しは半角のシャープ「#」を使って指定します。「#」の数によって<h1>から<h6>までの6段階のレベルを表します。
書き方
# 見出しレベル1 #
## 見出しレベル2 ##
### 見出しレベル3 ###
#### 見出しレベル4 ####
##### 見出しレベル5 #####
###### 見出しレベル6 ######
変換されるHTML
<h1>見出しレベル1</h1>
<h2>見出しレベル2</h2>
<h3>見出しレベル3</h3>
<h4>見出しレベル4</h4>
<h5>見出しレベル5</h5>
<h6>見出しレベル6</h6>
後ろの「#」は省略しても構いません。
### 見出しレベル3= - を使った記法 setext形式
- Markdown
- PHP Markdown Extra
- でんでんマークダウン
文字の下の行に半角のイコール「=」と半角のハイフンマイナス「-」を付けることで、それぞれ<h1>と<h2>の見出しを表現することもできます。
書き方
見出しレベル1
===========
見出しレベル2
-----------
変換されるHTML
<h1>見出しレベル1</h1>
<h2>見出しレベル2</h2>
「=」や「-」は幾つ書いても構いません。
見出しレベル1
==
見出しレベル2
---------------------------引用
- Markdown
- PHP Markdown Extra
- でんでんマークダウン
半角不等号の「>」から始まる段落は引用になります。電子メールでお馴染みの記法ですね。「>」の後ろに半角スペースをひとつ入れると読みやすいです。
書き方
これは通常の段落です。
> これは引用された段落です。
>
> これも引用された段落です。
これは通常の段落です。変換されるHTML
<p>これは通常の段落です。</p>
<blockquote>
<p>これは引用された段落です。</p>
<p>これも引用された段落です。</p>
</blockquote>
<p>これは通常の段落です。</p>「>」を重ねることで、引用の中の引用のように、入れ子構造を作ることができます。入れ子にできる数に制限はありません。
> これは引用された段落です。
> > これは引用の中でさらに引用された段落です。
> > > > これは引用の中の引用の中の引用の中でさらに引用された段落です。箇条書き（リスト）
- Markdown
- PHP Markdown Extra
- でんでんマークダウン
単純な箇条書き
マーカーのついた単純な箇条書きは、行頭を半角のアスタリスク「*」、プラス記号「+」、ハイフンマイナス「-」のいずれかで始め、続けて半角のスペースを入れます。
書き方
* りんご
* もも
* みかんまたは
+ りんご
+ もも
+ みかんまたは
- りんご
- もも
- みかん変換されるHTML
<ul>
<li>りんご</li>
<li>もも</li>
<li>みかん</li>
</ul>番号付きの箇条書き
番号付きの箇条書きは、行頭を半角数字とピリオドから始め、続けて半角のスペースを入れます。
書き方
1. りんご
2. もも
3. みかん変換されるHTML
<ol>
<li>りんご</li>
<li>もも</li>
<li>みかん</li>
</ol>使用する数値に関わらず、1から始まる箇条書きに変換されるので注意してください。次のように書いても変換結果は上記と同じです。
3. りんご
1. もも
8. みかん数値とピリオドから始まる段落が、意図せず番号付きの箇条書きに変換されてしまうことがあるかもしれません。これを避けるには、ピリオドの手前にバックスラッシュ「\」（Windowsでは半角円記号「¥」）を入力します。
1986\. What a great season.箇条書きの内容
箇条書きの中にも、様々な内容を含めることができます。
それぞれの項目の間に空行を挟むと、それぞれの項目は段落になります。
書き方
* これは箇条書きの中の段落です。
* これも箇条書きの中の段落です。変換されるHTML
<ul>
<li><p>これは箇条書きの中の段落です。</p></li>
<li><p>これも箇条書きの中の段落です。</p></li>
</ul>項目に複数の段落を含めるには、続きの段落の行頭に半角スペースを4つ（またはタブをひとつ）入力します。
書き方
* これは箇条書きの中の最初の段落です。
これは箇条書きの中の二番目の段落です。
* これは別の箇条書きの中の段落です。変換されるHTML
<ul>
<li><p>これは箇条書きの中の最初の段落です。</p>
<p>これは箇条書きの中の二番目の段落です。</p></li>
<li><p>これは別の箇条書きの中の段落です。</p></li>
</ul>箇条書きに引用を含めるにも、行頭に半角スペースを4つ（またはタブをひとつ）入力します。
書き方
* これは箇条書きの中の最初の段落です。
> これは箇条書きの中で引用された段落です。
* これは別の箇条書きの中の段落です。変換されるHTML
<ul>
<li><p>これは箇条書きの中の最初の段落です。</p>
<blockquote>
<p>これは箇条書きの中で引用された段落です。</p>
</blockquote></li>
<li><p>これは別の箇条書きの中の段落です。</p></li>
</ul>箇条書きの中にプログラムのコードを含めるには、行頭に半角スペースを8つ（またはタブを2つ）入力します。
書き方
* これは箇条書きの中の段落です。
<body>
<p>Hello world.</p>
</body>
* これは別の箇条書きの中の段落です。変換されるHTML
<ul>
<li><p>これは箇条書きの中の最初の段落です。</p>
<pre><code><body>
<p>Hello world.</p>
</body>
</code></pre></li>
<li><p>これは別の箇条書きの中の段落です。</p></li>
</ul>プログラムのコード
- Markdown
- PHP Markdown Extra
- でんでんマークダウン
プログラムのコードの書き方には2種類あります。
いずれも「&」や「<」「>」といった文字をそのまま表示できるように変換するので、特にHTMLのコードを書く上で便利です。
プログラムのコードブロック
複数行に渡るプログラムのコード（コードブロック）を表示するには、それそれの行を半角スペース4つ（またはタブひとつ）分字下げします。
書き方
これは通常の段落です。
<body>
<p>Hello world.</p>
</body>
これは別の段落です。変換されるHTML
<p>これは通常の中の段落です。</p>
<pre><code><body>
<p>Hello world.</p>
</body>
</code></pre>
<p>これは別の段落です。</p>
変換時に字下げは除去されます。
文中（インライン）のプログラムのコード
文章の中で一行に収まるプログラムのコードを含めるには、コードを半角のバッククオート「`」で囲みます。
書き方
段落には`<p>`タグを使います。変換されるHTML
<p>段落には<code><p></code>タグを使います。</p>
水平線
- Markdown
- PHP Markdown Extra
- でんでんマークダウン
半角のハイフンマイナス「-」、アスタリスク「*」、アンダースコア「_」のいずれかが3つ以上で構成される行は、<hr />タグになります。これは通常、水平線として表示されます。これらの記号の間には、任意の半角スペースを入れても構いません。
書き方
* * *
***
*****
---
---------------------------------------
- - -
いずれも以下のHTMLに変換されます
<hr />注意
EPUBの中で使われるHTML5では <hr /> の意味が定義しなおされ、前後で文脈が変化したことを意味するタグになりました。
水平線を引くことを目的として、この記法を利用するのは適切とはいえません。
改ページ（ファイル分割）
- でんでんマークダウン
でんでんマークダウンでは半角のイコール記号「=」が3つ以上で構成される行があると、その前後でHTMLファイルを分割します。通常、ファイルを分割した箇所は改ページされます。
EPUBは内容を複数のHTMLファイルに分割して作るのが一般的で、表示スピードも向上します。大見出しの手前など、本の内容に大きな区切りのある箇所に入れるとよいでしょう。
書き方
これは通常の段落です。
=======================================
## 大見出し ##
上記の例では大見出しから新しいHTMLファイルが始まります。
ページ番号
- でんでんマークダウン
印刷された本を元にEPUBを制作する場合に、紙の本のページ番号を記述する方法です。主に、障がいを持つ人に向けて印刷された教科書の代わりとしてEPUBの電子教科書を提供するケースを想定しています。
この情報を記述すると、Readiumのようにページリストナビゲーションをサポートするリーディングシステムでは、読者が紙のページ番号に相当する位置にジャンブできるようになります。
ページ番号はそのページが始まる箇所に記述します。ページ番号だけが記述された行は<div>要素に変換されます。
書き方
[%5]
## 大見出し ##
変換されるHTML
<div id="pagenum_5" class="pagenum" title="5" epub:type="pagebreak" role="doc-pagebreak"></div>
<h2>大見出し</h2>
この例ではページ番号は視覚的には表示されません。
次に示すのは文章の途中で改ページがあった場合の記述方法です。文章の中に記述されたページ番号は<span>要素に変換されます。
書き方
これは途中で改ページ[%24]される段落です。
変換されるHTML
<p>これは途中で改ページ<span id="pagenum_24" class="pagenum" title="24" epub:type="pagebreak" role="doc-pagebreak"></span>される段落です。</p>
ページ番号を視覚的に表示するにはページ番号の手前にパーセント記号を2つ付けます。
書き方
[%%36]
## 大見出し ##
変換されるHTML
<div id="pagenum_36" class="pagenum" title="36" epub:type="pagebreak" role="doc-pagebreak">36</div>
<h2>大見出し</h2>
ハイパーリンク
ハイパーリンクには幾つかの書き方があります。
直接リンク
- Markdown
- PHP Markdown Extra
- でんでんマークダウン
ハイパーリンクにする文字列を半角の角括弧「[」「]」で囲み、続けてリンク先のURLを半角の丸括弧「(」「)」の中に書きます。
書き方
詳しくは[こちら](http://example.com/)をごらんください。
変換されるHTML
<p>詳しくは<a href="http://example.com/">こちら</a>をごらんください。</p>丸括弧の中のURLの後ろに半角スペースを入れ、半角のダブルクオート「"」に囲まれた文字列を入れると、その文字列はリンクのタイトルになります。通常、タイトルはリンクにマウスを重ねるとポップアップとして表示されます。
書き方
詳しくは[こちら](http://example.com/ "タイトル")をごらんください。
変換されるHTML
<p>詳しくは<a href="http://example.com/" title="タイトル">こちら</a>をごらんください。<p>間接リンク
- Markdown
- PHP Markdown Extra
- でんでんマークダウン
リンク先のURLをハイパーリンクにする文字列とは別の箇所に書く方法が、間接リンクです。同じURLを複数の箇所で参照する場合に便利です。
ハイパーリンクにする文字列を半角の角括弧「[」「]」で囲み、続けてリンク先を特定するためのリンクID(任意の文字列)を、別の角の角括弧の中に書きます。さらに、リンク定義として文書の任意の箇所にリンクIDに対応したURLを書きます。
書き方
詳しくは[こちら][example]をごらんください。
[example]: http://example.com/
変換されるHTMLは直接リンクの場合と同じです。リンク定義は表示されません。
<p>詳しくは<a href="http://example.com/" title="タイトル">こちら</a>をごらんください。<p>警告
間接リンクでは、リンク定義を文書の任意の箇所に書くことができますが、改ページ（ファイル分割）をまたぐことはできません。ハイパーリンクする文字列がリンク定義を参照できなくなります。
リンク定義にもタイトルを付けることもできます。
書き方
[example]: http://example.com/ "タイトル"
角括弧の中のリンクIDを省略すると、暗黙的にハイパーリンクにする文字列と同じものをリンクIDに指定したことになります。また、リンクIDには半角スペースを含めることができます。
書き方
オリジナルのMarkdownは[Daring Fireball][]で公開されています。
[Daring Fireball]: http://daringfireball.net/
自動リンク
URLとメールアドレス
- Markdown
- PHP Markdown Extra
- でんでんマークダウン
URLとメールアドレスは半角の不等号「<」「>」で囲むと、自動的にハイパーリンクになります。メールアドレスはスパムよけのために、10進数と16進数の文字数値参照をランダムに組み合わせた形で表記されます。
書き方
<http://example.com>
<info@example.com>
変換されるHTML
<p><a href="http://example.com">http://example.com</a></p>
<p><a href="mailto:info@example.com">info@example.com</a></p>
Twitterアカウント
- でんでんマークダウン
でんでんマークダウンでは半角の不等号「<」「>」で囲まれたTwitterアカウントもハイパーリンクにすることができます。
書き方
私のTwitterアカウントは<@lost_and_found>です。
変換されるHTML
<p>私のTwitterアカウントは<a href="http://twitter.com/lost_and_found">@lost_and_found</a>です。</p>
テキストの強調
* を使った記法
- Markdown
- PHP Markdown Extra
- でんでんマークダウン
文章の中で、1つの半角アスタリスク「*」で囲まれた文字列は強調を意味するemタグで囲まれます。emタグは通常、イタリック体で表示されますが、でんでんコンバーターでは縦書きを選択した場合に限り、イタリック体にする代わりに圏点付きで表示します。
文章の中で、2つの半角アスタリスクで囲まれた文字列は重要な語句を意味するstrongタグで囲まれます。strongタグは通常、ボールド体で表示されます。
書き方
これは*強調されたテキスト*です。
これは**重要なテキスト**です。
変換されたHTML
<p>これは<em>強調されたテキスト</em>です。</p>
<p>これは<strong>重要なテキスト</strong>です。</p>
_ を使った記法
- Markdown
- PHP Markdown Extra
- でんでんマークダウン
半角アスタリスク「*」の代わりに半角のアンダースコア「_」を利用しても同じことができます。
これは_強調されたテキスト_です。
これは__重要なテキスト__です。
変換されたHTML
<p>これは<em>強調されたテキスト</em>です。</p>
<p>これは<strong>重要なテキスト</strong>です。</p>
_ を使った記法の例外
- PHP Markdown Extra
- でんでんマークダウン
PHP Markdown Extraとでんでんマークダウンでは単語の途中の「_」を強調に変換しません。
書き方
Please open the folder "secret_magic_box".
変換されたHTML
<p>Please open the folder "secret_magic_box".</p>
しかし、これは単語をスペースで区切らない日本語の利用者にとっては、変換結果が予測しづらいです。強調や重要性を表すには「_」 ではなく「*」を利用することを推奨します。
ルビ
- でんでんマークダウン
でんでんマークダウンでは複雑なHTMLのルビタグを平易な記法で記述できます。
グループルビ
文字列にまとめてルビをふるには、対象の文字列を半角中括弧「{}」で囲みます。次に文字列の後ろに半角のバーティカルバー「|」を入力し、続けてルビ文字を書きます。
書き方
{電子出版|でんししゅっぱん}を手軽に
変換されたHTML
<p><ruby>電子出版<rt>でんししゅっぱん</rt></ruby>を手軽に</p>
モノルビ風の熟語ルビ
さらに、ルビ文字を半角のバーティカルバーで複数のまとまりに区切ると、それぞれの親文字にルビ文字を対応させることができます。
親文字の文字数とルビ文字のまとまりの数が一致している必要があります。一致しない場合にはグループルビになります。
書き方
{電子出版|でん|し|しゅっ|ぱん}を手軽に
変換されたHTML
<p><ruby>電<rt>でん</rt>子<rt>し</rt>出<rt>しゅっ</rt>版<rt>ぱん</rt></ruby>を手軽に</p>
でんでんマークダウンのルビの解釈条件は次のとおりです。「{}」や「|」を使ったプログラム言語や正規表現を記述する際に、誤変換を避ける上での参考にしてください。
- 段落の中で「{」で始まり
- 「|」以外の文字が一文字以上存在し
- その後ろに「|」が存在し
- その後ろに「|」以外の文字が一文字以上存在し
- その後ろに「}」が存在するパターン
次のパターンは、「{」に続けて最初の「|」が存在するのでルビに解釈されません。
これは段落です。foo{|bar| bar.buz} これは段落です。
確実にルビの解釈を避けるためには、手前に「\」を入れてエスケープします。
これは段落です。\{Info\|Warning\} これは段落です。
最低限「|」さえエスケープすれば、ルビの解釈ルールからは外れます。
これは段落です。{Info\|Warning} これは段落です。
全体をプログラムのコードを意味する「`」で囲んだ場合も、ルビの解釈ルールからは外れます。
これは段落です。`{Info|Warning}` これは段落です。
縦中横
- でんでんマークダウン
縦書きの文章の中で、特定の文字を横書きにすることを縦中横といいます。
縦中横を実現するには、対象の文字をハット記号「^」で囲みます。横書きでは、この指定は効果がありません。
書き方
昭和^53^年
変換されたHTML
<p>昭和<span class="tcy">53</span>年</p>
また、CSSに次の指定が必要となります。（でんでんコンバーターのデフォルトスタイルシートでは指定済みです。）
.tcy { -epub-text-combine: horizontal;}
注意
縦中横を指定する文字数の目安は半角で2桁です。
これを超える文字列に縦中横を指定すると、縦中横が解除されたり、はみ出した文字が隣の行と重なってしまう可能性があります。
脚注
- PHP Markdown Extra
- でんでんマークダウン
脚注の記法は（縦書きでは傍注）は間接リンクによく似ています。参照元となる箇所に角括弧「[]」を挿入し、その中にハット記号「^」と任意の半角数字を書きます。これが脚注のリンクIDです。
参照先となる脚注の定義は、リンクIDの後ろに半角コロン「:」と半角スペースを挿入し、以降に注の内容を書きます。
書き方
これは脚注付き[^1]の段落です。
[^1]: そして、これが脚注です。
脚注の中に複数の段落を含める場合には、箇条書き（リスト）に段落を含めるのと同じように、行頭に半角スペースを4つ挿入します。
書き方
これは脚注付き[^1]の段落です。
[^1]: これは脚注の中の段落です。
これは同じ脚注の中の別の段落です。
このように書くこともできます。
これは脚注付き[^1]の段落です。
[^1]:
これは脚注の中の段落です。
これは同じ脚注の中の別の段落です。
でんでんマークダウンでは、脚注を変換したHTMLのコードを、XHTMLの規約とEPUBの脚注に準拠した形で出力します。
でんでんマークダウン
<p>これは脚注付き<a id="fnref_1" href="#fn_1" rel="footnote" class="noteref" epub:type="noteref" role="doc-noteref">1</a>の段落です。</p>
<div class="footnotes" epub:type="footnotes" role="doc-endnotes">
<hr />
<ol>
<li>
<div id="fn_1" class="footnote" epub:type="footnote" role="doc-endnote">
<p>これは脚注の中の段落です。</p>
<p>これは同じ脚注の中の別の段落です。 <a href="#fnref_1" role="doc-backlink">⏎</a></p>
</div>
</li>
</ol>
</div>
なお、 PHP Markdown Extra では初期状態で次のようなコードを出力します。
PHP Markdown Extra
<p>これは脚注付き<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>の段落です。</p>
<div class="footnotes">
<hr />
<ol>
<li id="fn:1">
<p>これは脚注の中の段落です。</p>
<p>これは同じ脚注の中の別の段落です。 <a href="#fnref:1" rev="footnote">↩</a></p>
</li>
</ol>
</div>
警告
脚注定義は文書の任意の箇所に書くことができますが、改ページ（ファイル分割）をまたぐことはできません。参照元が脚注定義を参照できなくなります。
変換後の脚注の表示位置は、脚注定義の記述箇所に関わらず、文書の末尾になります。
脚注の参照元と、脚注定義は1対1対応するようにしてください。ひとつの脚注定義を複数の箇所から参照することはできません。
脚注のリンクIDには任意の数値を指定することができますが、変換後は自動的に「1」から始まる番号に振りなおされます。
画像
- Markdown
- PHP Markdown Extra
- でんでんマークダウン
画像もハイパーリンクとよく似た構文を持っており、直接リンクと間接リンクがあります。
直接リンク
直接リンクを指定するには、先頭に半角のエクスクラメーションマーク「!」を書き、角括弧「[]」を続けます。角括弧の中には、画像の代わりに表示するテキストを入力します。その後ろに半角括弧「()」を書きます。半角括弧の中には表示する画像のパスを指定してください。
ヒント
でんでんコンバーターでは、ディレクトリをアップロードすることができないので、画像ファイルはテキストファイルと同じ階層に配置することになります。そのため、画像のパスの部分には、画像のファイル名を記入することになります。
書き方
変換されるHTML
<img src="img.jpg" alt="代替テキスト" />画像が意味を持たない装飾的なものであれば、代替テキストは省略しても構いません。
変換されるHTML
<img src="img.jpg" alt="" />間接リンク
間接リンクでは画像のパスの代わりに、角括弧「[]」に囲まれたリンクIDを指定します。リンク定義はハイパーリンクの場合と同様に、任意の箇所に書くことができます。リンク定義には画像パスの後ろに半角スペースを記述し、その後ろにクォーテーションマーク「""」で囲まれた代替テキストを記述します。
書き方
![代替テキスト][id]
[id]: img.jpg
ヒント
Markdownの記法では、画像の大きさを指定することができません。
画像の大きさを指定するには、<img>タグを直接書き、CSSもカスタマイズする必要があります。
注意
でんでんコンバーターでEPUBに変換する際には、使用した画像ファイルをテキストファイルといっしょにアップロードするのを忘れないでください。
警告
間接リンクでは、リンク定義を文書の任意の箇所に書くことができますが、改ページ（ファイル分割）をまたぐことはできません。参照元がリンク定義を参照できなくなります。
定義リスト
- PHP Markdown Extra
- でんでんマークダウン
定義リストは、項目とそれに対する説明で構成されるリストです。
定義リストはまず、最初の行に項目を書きます。次の行は半角コロン「:」に続けて半角スペースを1〜3つ挿入し、その後ろに項目の説明を書きます。
項目が複数ある場合には、前の項目の説明と次の項目の間に空行を挟みます。
書き方
でんでんマークダウン
: Markdownをベースにした簡易マークアップ言語
でんでんコンバーター
: でんでんマークダウンをEPUBに変換するウェブサービス
変換されるHTML
<dl>
<dt>でんでんマークダウン</dt>
<dd>Markdownをベースにした簡易マークアップ言語</dd>
<dt>でんでんコンバーター</dt>
<dd>でんでんマークダウンをEPUBに変換するウェブサービス</dd>
</dl>
ひとつの項目に対して、複数の説明を付けることもできます。
書き方
でんでんマークダウン
: 「電書ちゃんによる電書ちゃんのためのMarkdown拡張記法およびその実装」の略称
: Markdownをベースにした簡易マークアップ言語
でんでんコンバーター
: 「電書ちゃんによる電書ちゃんのためのMarkdown拡張記法対応EPUBコンバーター」の略称
: でんでんマークダウンをEPUBに変換するウェブサービス
変換されるHTML
<dl>
<dt>でんでんマークダウン</dt>
<dd>「電書ちゃんによる電書ちゃんのためのMarkdown拡張記法およびその実装」の略称</dd>
<dd>Markdownをベースにした簡易マークアップ言語</dd>
<dt>でんでんコンバーター</dt>
<dd>「電書ちゃんによる電書ちゃんのためのMarkdown拡張記法対応EPUBコンバーター」の略称</dd>
<dd>でんでんマークダウンをEPUBに変換するウェブサービス</dd>
</dl>
項目と説明の間に空行を挟むと、説明は段落になります。
書き方
でんでんマークダウン
: Markdownをベースにした簡易マークアップ言語
でんでんコンバーター
: でんでんマークダウンをEPUBに変換するウェブサービス
変換されるHTML
<dl>
<dt>でんでんマークダウン</dt>
<dd>
<p>Markdownをベースにした簡易マークアップ言語</p>
</dd>
<dt>でんでんコンバーター</dt>
<dd>
<p>でんでんマークダウンをEPUBに変換するウェブサービス</p>
</dd>
</dl>
説明に複数の段落や引用、箇条書き（リスト）含めるには、行頭に半角スペースを4つ挿入します。
プログラムのコードを含めるには行頭に半角スペースを8つ挿入します。
書き方
項目
: これは項目を説明した段落です。
これは項目を説明した別の段落です。
項目
: 下はプログラムのコードです。
<body>
<p>Hello world.</p>
</body>
> これは項目の説明の中の引用です。
1. りんご
2. もも
3. みかん
変換されるHTML
<dl>
<dt>項目</dt>
<dd>
<p>これは項目を説明した段落です。</p>
<p>これは項目を説明した別の段落です。</p>
</dd>
<dt>項目</dt>
<dd>
<p>下はプログラムのコードです。</p>
<pre><code><body>
<p>Hello world.</p>
</body>
</code></pre>
<blockquote>
<p>これは項目の説明の中の引用です。</p>
</blockquote>
<ol>
<li>りんご</li>
<li>もも</li>
<li>みかん</li>
</ol>
</dd>
</dl>
表
- PHP Markdown Extra
- でんでんマークダウン
半角のバーティカルバー「|」とハイフンマイナス「-」を組み合わせて、次のような簡単な表を書くことができます。
書き方
名称 | 人口
------- | ----------
東京都 | 1322万人
大阪府 | 886万人
変換されるHTML
<table>
<thead>
<tr>
<th>名称</th>
<th>人口</th>
</tr>
</thead>
<tbody>
<tr>
<td>東京都</td>
<td>1322万人</td>
</tr>
<tr>
<td>大阪府</td>
<td>886万人</td>
</tr>
</tbody>
</table>
HTML
Markdownでは、直接HTMLのタグを書くことができます。ここまで学んできた記法で対応しきれない表現についても、HTMLのタグを書けば実現できることでしょう。
文中でのHTMLの記述
- Markdown
- PHP Markdown Extra
- でんでんマークダウン
文章の行の中に書かれたHTMLのタグは、常に有効です。このようなタグの例には、<span>、<b>、<cite>、<i>、<img>、<u>、<q>、<small>、<del>、<ins>などがあります。
書き方
これは段落の中で本の<cite>タイトル</cite>に直接HTMLでマークアップした例です。
変換されるHTML
<p>これは段落の中で本の<cite>タイトル</cite>に直接HTMLでマークアップした例です。</p>
しかし注意すべき点があります。ブロックを構成するタグの内部ではMarkdownの記法は解釈されません。このようなタグの例には、<div>、<p>、<table>、<pre> などがあります。
書き方
これは**通常の段落**です。
<div>
**ブロックの中の段落**はMarkdownが解釈されません。
</div>
変換されるHTML
<p>これは<strong>通常の段落</strong>です。</p>
<div>
**ブロックの中の段落**はMarkdownが解釈されません。
</div>
HTMLタグのブロックの中でのMarkdownの記述
- PHP Markdown Extra
- でんでんマークダウン
前述したブロックを構成するタグの内部で、Markdown（およびPHP Markdown Extra、でんでんマークダウン）を有効にするには、タグにmarkdown="1"という属性を追加します。この属性は、変換されたHTMLからは取り除かれます。
書き方
これは**通常の段落**です。
<div markdown="1">
**ブロックの中の段落**でもMarkdownが解釈されます。
</div>
変換されるHTML
<p>これは<strong>通常の段落</strong>です。</p>
<div>
<p><strong>ブロックの中の段落</strong>でもMarkdownが解釈されます。</p>
</div>
ヘルパークラス
でんでんコンバーターのスタイルシートには、特定のレイアウトを実現されるために、あらかじめ用意されたクラス名があります。CSSをカスタマイズすることなくレイアウトが実現できるので、うまく活用してみてください。text-left
<p class="text-left" markdown="1">この段落は左寄せになります。</p>
text-center
<p class="text-center" markdown="1">この段落は中央寄せになります。</p>
text-right
<p class="text-right" markdown="1">この段落は右寄せになります。</p>
text-justify
<p class="text-justify" markdown="1">この段落は 左右均等になります。</p>
text-pre-wrap
<p class="text-pre-wrap" markdown="1"> この段落は半角スペースなどの空白文字が維持されます。</p>
text-hide
<p class="text-hide" markdown="1">この段落は表示されません。</p>
tcy
<p>昭和<span class="tcy">53</span>年</p>
upright
<p>spanの中の文字<span class="upright">☆</span>は縦書きで正立します。</p>
sideways
<p>spanの中の文字<span class="sideways">☆</span>は縦書きで横転します。</p>