マークダウンまとめ
記事カテゴリ 未分類
投稿日: 2020年02月06日
更新日: 2020年03月03日
本ブログの記事は、 Headless CMS Contentful で管理しています。
コンテンツタイプとしては、リッチテキストではなく、プレーンテキストであり、
マークダウンで書いています。記事データを取得し表示する際に、
各マークダウン記法に相当するhtmlタグに変換してレンダリングしています。
(markdown-it)
本ブログで使用しているマークダウンをまとめました。
Jump to heading 目次
目次を挿入したい箇所に下記を記入します。
[[toc]]
Jump to heading 結果
本ページの上部「目次」のようになります。
(markdown-it-table-of-contentsを使用しています)
Jump to heading 見出し
下記の通り、見出しの先頭文字に # を挿入します。
# の数により見出しのサイズを変更します。
# の数がn個の場合、hn 相当の見出しとなります。
(なお、n=1の場合、すなわちh1は、タイトルのみの使用となり、記事中では使用しません)
## h2 Headeing
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
Jump to heading 結果
Jump to heading h2 Heading
Jump to heading h3 Heading
Jump to heading h4 Heading
Jump to heading h5 Heading
Jump to heading h6 Heading
Jump to heading 強調されたテキスト
_テキストを強調する_
Jump to heading 結果
テキストを強調する
Jump to heading 打ち消し線
~~打ち消し線~~
Jump to heading 結果
打ち消し線
Jump to heading 強い重要性
__強い重要性__
Jump to heading 結果
強い重要性
Jump to heading 強調かつ強い重要性
___強調かつ強い重要性___
Jump to heading 結果
強調かつ強い重要性
Jump to heading リンク
Jump to heading 名前付きリンク
[google](https://www.google.com/)
Jump to heading 結果
Jump to heading テーブル
テーブルヘッダー1 | テーブルヘッダー2
------------- | -------------
テーブルコンテンツ1-1 | テーブルコンテンツ2-1
テーブルコンテンツ1-2 | テーブルコンテンツ2-2
Jump to heading 結果
| テーブルヘッダー1 | テーブルヘッダー2 |
|---|---|
| テーブルコンテンツ1-1 | テーブルコンテンツ2-1 |
| テーブルコンテンツ1-2 | テーブルコンテンツ2-2 |
Jump to heading リスト
Jump to heading 順序なしリスト
* 箇条書き1
* 入れ子
* 入れ子の入れ子
* 箇条書き2
Jump to heading 結果
- 箇条書き1
- 入れ子
- 入れ子の入れ子
- 入れ子
- 箇条書き2
Jump to heading 順序付きリスト
1. 順序付き箇条書き1
1. 入れ子1
2. 入れ子2
2. 順序付き箇条書き2
Jump to heading 結果
- 順序付き箇条書き1
- 入れ子1
- 入れ子2
- 順序付き箇条書き2
Jump to heading 引用
> 引用
>> 入れ子の引用
Jump to heading 結果
引用
入れ子の引用
Jump to heading 画像
Jump to heading 結果
Jump to heading 水平線
---
Jump to heading 結果
Jump to heading URL
https://www.google.com/
Jump to heading 結果
Jump to heading コード
¥`¥`¥ で囲む
```js
var foo = function (bar) {
return bar++;
};
console.log(foo(5));
```
Jump to heading 結果
var foo = function (bar) {
return bar++;
};
console.log(foo(5));
Jump to heading 絵文字
個人的にはあまり使用しないと思います。
:smile
Jump to heading 結果
:smile:
Jump to heading 注釈
注釈1へのリンク[^first].
[^first]: 注釈1 **注釈もマークアップできる**
Jump to heading 結果
注釈1へのリンク[1].
Jump to heading テキストのハイライト
highlight.jsを使用します。
==ハイライト==
Jump to heading 結果
==ハイライト==
Jump to heading チェックリスト
- [ ] 牛乳を買う
- [x] パンを買う
Jump to heading 結果
- [ ] 牛乳を買う
- [x] パンを買う
Jump to heading soundcloud
Jump to heading 今後
現在は、Contentfulのみで記事を管理していますが、そのうち、記事をpublishしたタイミングで
githubなどにバックアップする仕組みを構築したいと思います。その際には、リッチテキストよりも、やはりマークダウンで表現されていた方が行いやすいかと思います。
Jump to heading 参考
https://nansystem.com/what-is-markdown-it-and-frequently-used-plugins/
注釈1 注釈もマークアップできる ↩︎