Markdown 記法のご紹介

投稿者: | 2018年9月14日

当ブログでは生産性を高めるため、Markdown(マークダウン)と呼ばれる記法を使っています。

Markdown 記法は覚えやすくテキストベースで加工が簡単なため、色々な場面で活用できます。
その記法をご紹介したいと思います。

Markdown 記法

以下、基本的な記法になります。

Markdown記法で書かれた文書はパーサで解析され、HTML へ変換されます。
そのため、パーサにより挙動が変わる可能性があることをご留意ください。

見出し

HTML : h1 – h6 (ヘッドライン)

書き方 HTML タグ 備考
# h1 シャープ1つ
## h2 シャープ2つ
### h3 シャープ3つ
#### h4 シャープ4つ
##### h5 シャープ5つ
###### h6 シャープ6つ

※ハイフンの後ろには半角スペースが必要です。

# 見出し1
## 見出し2

エスケープ処理

Markdown は HTML へ変換されまするため、文字として扱って欲しいテキストが Markdown の予約語と重複すると意図したとおりに表示されません。
そのため、半角バックスラッシュ(¥)でエスケープ処理を行えます。

# シャープと表示される

箇条書き

HTML : ul ol li dl (リスト)

書き方 HTML タグ 備考
* ul, ol, li, dl アスタリスク
+ ul, ol, li, dl プラス
- ul, ol, li, dl ハイフン

※3つとも同じですが、後ろには半角スペースが必要です。

- 箇条書き1
    - 箇条書き2```

引用

HTML : blockquote (引用文)

書き方 HTML タグ 備考
> blockquote greater than

※ハイフンの後ろには半角スペースが必要です。

> 引用1行目
> 引用2行目

リンク

HTML : a href

書き方 HTML タグ 備考
[titleValue](url)] titleValue
[神は細部に宿る](https://lubtech.geo.jp/)
書き方 HTML タグ 備考
[display][No.]] (以下参照) 本文表示用
[No.]:[No.] “titleValue”] display URL設定用
[神は細部に宿る][1]
[1]:https://lubtech.geo.jp/ "Lubtech"

強調

HTML : strong, em

書き方 HTML タグ 備考
**text** strong, em アスタリスク2つで囲む
__text__ strong, em アンダースコア2つで囲む
**太字**

斜体

HTML : italic

書き方 HTML タグ 備考
***text*** italic アスタリスク3つで囲む
___text___ italic アンダースコア3つで囲む
***斜体***

コードブロック

HTML : pre + code

書き方 HTML タグ 備考
```codeValue``` <pre><code>codeValue</code></pre> パーサによって CSS と連動するものあり
```
PHPソースがそのまま表示される。
```

画像

HTML : img

書き方 HTML タグ 備考
![altValue](url) <img src=’url’ alt=’altValue’>
![画像説明文](https://lubtech.geo.jp/pictures/1.jpg)

水平線

HTML : hr

書き方 HTML タグ 備考
*** hr アスタリスク3つ
___ hr アンダースコア3つ
hr ハイフン3つ
---

以前、プレゼン資料作成ツールとして Marp をご紹介しましたが、Marp では [Preview Style] に [1:1 Slide] を指定すると水平線を改ページとして認識します。
(Marp で文字通りの水平線を描くには hr タグを使う必要があります)。