Markdownは文章を記述するための言語です。
サイト上で文章を作るとき、タグを使うことで、その文章に様々な意味を持たせます。
しかし、直接タグを打ち込むのは大変ですし、エディタの機能を使おうと思うと、一度キーボードから手を離して、マウスに持ち替える必要があります。
そんなとき、Markdown記法を覚えると便利です。
今回は、Markdown記法の一覧を記事にしました。
今回はpandocを使って、MarkdownをHTML5に変換しています。
段落 <p>
HTMLではpタグを使って段落を指定しますが、Markdownでは空行を入れることによって１つの段落を表します。
Markdown記法を覚えましょう。
Markdown記法を覚えると、作業が捗ります。サンプル
出力されるHTML
<p>Markdown記法を覚えましょう。</p>
<p>Markdown記法を覚えると、作業が捗ります。</p>改行 <br>
２つの半角スペースを行末に入力することで、改行を行なうことができます。
見た目では分かりませんが、行末に２つの半角スペースが入力されていることにご注意ください。
Markdown記法を覚えましょう。
Markdown記法を覚えると、作業が捗ります。サンプル
出力されるHTML
<p>Markdown記法を覚えましょう。<br />
Markdown記法を覚えると、作業が捗ります。</p>見出し <h1>〜<h6>
見出しには#を使います。この#の数で、h1〜h6までの見出しを表すことができます。
# 見出し１
## 見出し２
### 見出し３
#### 見出し４
##### 見出し５
###### 見出し６サンプル
出力されるHTML
<h1 id="見出し１">見出し１</h1>
<h2 id="見出し２">見出し２</h2>
<h3 id="見出し３">見出し３</h3>
<h4 id="見出し４">見出し４</h4>
<h5 id="見出し５">見出し５</h5>
<h6 id="見出し６">見出し６</h6>リスト、番号付きリスト <ul><li> <ol><li>
HTMLでのリストは、ulとolの２種類があります。
Markdownではそれぞれ、インデント（半角スペース、もしくはTab）と-、インデントと数値とピリオドで、リストを表すことができます。
番号付きリストの数値はなんでも構いません。
また、番号付きリストのインデントは、半角スペースではなく、Tabを使わないとうまく変換できないかもしれません。
- リスト
- リスト
- リスト
- リスト
- リスト
1. 番号付きリスト
1. 番号付きリスト
1. 番号付きリスト
1. 番号付きリスト
1. 番号付きリストサンプル
出力されるHTML
<ul>
<li>リスト
<ul>
<li>リスト</li>
<li>リスト
<ul>
<li>リスト</li>
<li>リスト</li>
</ul></li>
</ul></li>
</ul>
<ol type="1">
<li>番号付きリスト
<ol type="1">
<li>番号付きリスト</li>
<li>番号付きリスト
<ol type="1">
<li>番号付きリスト</li>
<li>番号付きリスト</li>
</ol></li>
</ol></li>
</ol>強調 <em> <strong>
HTMLでは、emタグ（斜体）やstrongタグ（太字）を使って、文字を強調できます。
Markdownでは、これらを*（アスタリスク）を使って表します。
*が１つでem、２つでstrong、３つでemとstrongの両方、という意味になります。
このボタンをあと*20分以内*に押さないと、大変なことが起こります。このボタンをあと**20分以内**に押さないと、大変なことが起こります。このボタンをあと***20分以内***に押さないと、大変なことが起こります。サンプル
出力されるHTML
<p>このボタンをあと<em>20分以内</em>に押さないと、大変なことが起こります。</p>
<p>このボタンをあと<strong>20分以内</strong>に押さないと、大変なことが起こります。</p>
<p>このボタンをあと<strong><em>20分以内</em></strong>に押さないと、大変なことが起こります。</p>打ち消し線 <del>
文章を訂正したいときなど、delタグを使って打ち消し線をつけることがあります。
Markdownでは、~~で挟むことで表すことができます。
このボタンをあと~~40分以内~~20分以内に押さないと、大変なことが起こります。サンプル
出力されるHTML
<p>このボタンをあと<del>40分以内</del>20分以内に押さないと、大変なことが起こります。</p>引用 <blockquote>
引用では>を使います。
> 吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。サンプル
出力されるHTML
<blockquote>
<p>吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
</blockquote>リンク <a>
リンクを貼りたいときは、[]にテキストを入力し、その後ろの()にURLを入力します。
[オリジナルゲーム.com](https://original-game.com/)サンプル
出力されるHTML
<p><a href="https://original-game.com/">オリジナルゲーム.com</a></p>画像 <img>
画像を表示したいときは、!(alt属性のテキスト)[URL]というふうになります。
さきほどのリンクの先頭に!がついた形になります。
サンプル
出力されるHTML
<figure>
<img src="https://original-game.com/article/markdown/20210817/markdown-notation-list/yamada.jpg" alt="山田先生" /><figcaption aria-hidden="true">山田先生</figcaption>
</figure>水平線 <hr>
水平線は、*を３つや、_を３つで、引くことができます。
***
___サンプル
出力されるHTML
<hr />
<hr />コード <pre> <code>
文章中にコードを貼りたいときは、以下のようにします。
もしインラインコードの場合、`で挟みます。
これは`printf()`を使います。サンプル
出力されるHTML
<p>これは<code>printf()</code>を使います。</p>また複数行の場合は、`３つで挟みます。このとき、使用する言語名を入れることもできます。
```python
for password in itertools.product( characters, repeat=1 ):
password = ''.join( password )
print( password )
```サンプル
出力されるHTML
<div class="sourceCode" id="cb1"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="cf">for</span> password <span class="kw">in</span> itertools.product( characters, repeat<span class="op">=</span><span class="dv">1</span> ):</span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a> password <span class="op">=</span> <span class="st">''</span>.join( password )</span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a> <span class="bu">print</span>( password )</span></code></pre></div>表 <table>
表を作るときは、以下のようにします。
| ニャン太 | ワン子 | コケッ子 |
| --- | --- | --- |
| 魚 | 骨 | とうもろこし |
| 猫草 | 肉 | 米 |サンプル
出力されるHTML
<table>
<thead>
<tr class="header">
<th>ニャン太</th>
<th>ワン子</th>
<th>コケッ子</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>魚</td>
<td>骨</td>
<td>とうもろこし</td>
</tr>
<tr class="even">
<td>猫草</td>
<td>肉</td>
<td>米</td>
</tr>
</tbody>
</table>まとめ
Markdownを使うと、HTMLタグをかんたんに入力することができ、文章の作成がとても楽になります。
記事を書くときなど、いちいちタグを入力していては、その文章の質にも影響してくると思います。
楽できるところはできるだけ楽して、考えるところはしっかりと考えるのが、いい文章をつくるひとつのコツなのかもしれません。
ぜひMarkdownをマスターして、いまよりももっと素早く文章を書けるようになれるといいですね。
