当ブログでは生産性を高めるため、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://ararabo.jp/)
書き方 | HTML タグ | 備考 |
---|---|---|
[display][No.]] | (以下参照) | 本文表示用 |
[No.]:[No.] "titleValue"] | display | URL設定用 |
[神は細部に宿る][1]
[1]:https://ararabo.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://ararabo.jp/pictures/1.jpg)
水平線
HTML : hr
書き方 | HTML タグ | 備考 |
---|---|---|
*** | hr | アスタリスク3つ |
___ | hr | アンダースコア3つ |
--- | hr | ハイフン3つ |
---
以前、プレゼン資料作成ツールとして Marp をご紹介しましたが、Marp では [Preview Style] に [1:1 Slide] を指定すると水平線を改ページとして認識します。
(Marp で文字通りの水平線を描くには hr タグを使う必要があります)。