本ブログの記事は、 Headless CMS Contentful で管理しています。
コンテンツタイプとしては、リッチテキストではなく、プレーンテキストであり、
マークダウンで書いています。記事データを取得し表示する際に、
各マークダウン記法に相当するhtmlタグに変換してレンダリングしています。
(markdown-it)
本ブログで使用しているマークダウンをまとめました。

目次

目次を挿入したい箇所に下記を記入します。

[[toc]]

結果

本ページの上部「目次」のようになります。
(markdown-it-table-of-contentsを使用しています)

見出し

下記の通り、見出しの先頭文字に # を挿入します。
# の数により見出しのサイズを変更します。
# の数がn個の場合、hn 相当の見出しとなります。
(なお、n=1の場合、すなわちh1は、タイトルのみの使用となり、記事中では使用しません)

## h2 Headeing
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

結果

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading

強調されたテキスト

_テキストを強調する_

結果

テキストを強調する

打ち消し線

~~打ち消し線~~

結果

打ち消し線

強い重要性

__強い重要性__

結果

強い重要性

強調かつ強い重要性

___強調かつ強い重要性___

結果

強調かつ強い重要性

リンク

名前付きリンク

[google](https://www.google.com/)

結果

google

テーブル

テーブルヘッダー1  | テーブルヘッダー2
------------- | -------------
テーブルコンテンツ1-1  | テーブルコンテンツ2-1
テーブルコンテンツ1-2  | テーブルコンテンツ2-2

結果

テーブルヘッダー1 テーブルヘッダー2
テーブルコンテンツ1-1 テーブルコンテンツ2-1
テーブルコンテンツ1-2 テーブルコンテンツ2-2

リスト

順序なしリスト

* 箇条書き1
  * 入れ子
    * 入れ子の入れ子
* 箇条書き2

結果

  • 箇条書き1
    • 入れ子
      • 入れ子の入れ子
  • 箇条書き2

順序付きリスト

1. 順序付き箇条書き1
   1. 入れ子1
   2. 入れ子2
2. 順序付き箇条書き2

結果

  1. 順序付き箇条書き1
    1. 入れ子1
    2. 入れ子2
  2. 順序付き箇条書き2

引用

> 引用
>> 入れ子の引用

結果

引用

入れ子の引用

画像

![画像の代替テキスト](https://picsum.photos/200/50 "画像タイトル")

結果

画像の代替テキスト

水平線

---

結果


URL

https://www.google.com/

結果

https://www.google.com/

コード

¥`¥`¥ で囲む

```js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

結果

var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

絵文字

個人的にはあまり使用しないと思います。

:smile

結果

😄

注釈

注釈1へのリンク[^first].

[^first]: 注釈1 **注釈もマークアップできる**

結果

注釈1へのリンク[1].

テキストのハイライト

highlight.jsを使用します。

==ハイライト==

結果

ハイライト

チェックリスト

- [ ] 牛乳を買う
- [x] パンを買う

結果

soundcloud

@soundcloud

今後

現在は、Contentfulのみで記事を管理していますが、そのうち、記事をpublishしたタイミングで
githubなどにバックアップする仕組みを構築したいと思います。その際には、リッチテキストよりも、やはりマークダウンで表現されていた方が行いやすいかと思います。

参考

https://nansystem.com/what-is-markdown-it-and-frequently-used-plugins/


  1. 注釈1 注釈もマークアップできる ↩︎