2019/09/11

Markdown を知ろう！

Dev

＊この記事は Markdown で書いています。

Contentful で記事など(長文)を書くフィールドに、Markdown (マークダウン)と Rich Text (リッチテキスト)という２種類のエディタがあります。この記事では Markdown について解説していきます。(＊サイトを作る際にどのエディタを使うか設定するので、後にエディタを変更することはできません。)

Markdown(マークダウン)とは？

マークダウンは文章を記述するための記法（マークアップ言語）の一つです。Web上に何かの情報(文章)などを表示するには、HTMLのような「マークアップ言語」を使いますが、表記が複雑で使いづらいという特徴があります。そこで、マークアップ言語を簡単にしたマークダウンという記法がうまれました。(下で比較しています。)

1// HTMLで記述すると複雑......
2<h1>お買い物リスト</h1>
3<ul>
4  <li>りんご</li>
5  <li>はちみつ</li>
6  <li>パン</li>
7</ul>

1// マークダウンで記述すると読みやすくて簡単！
2# お買い物リスト
3- りんご
4- はちみつ
5- パン

さらに、Contentful ではマークダウンのエディタを利用することで、SNS の一部の埋め込み(Twitter のツイートなど)やより文章をカスタマイズすることが可能です。それではマークダウンの表現集を見ていきましょう。

マークダウン表現集

見出し

1## Heading2
2### Heading3
3#### Heading4
4##### Heading5

Heading2

Heading3

Heading4

Heading5

テキストの装飾

1*イタリック*
2**太字**
3~~打ち消し線~~
4`コード`

イタリック 太字 ~~打ち消し線~~ コード

テーブル

1| Header     | Header     | Header     |
2| ---------- | ---------- | ---------- |
3| Cell       | Cell       | Cell       |
4| Cell       | Cell       | Cell       |
5| Cell       | Cell       | Cell       |

Header	Header	Header
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

水平線

1---

画像

1![マークダウンイメージ](//images.ctfassets.net/d43i7wzic99c/EfqcXdSCuOpMUKBRpDkvZ/dbde29cb904cceb2c2b71dbcdd133587/markdown-image.jpg)

マークダウンイメージ

ほとんどの SNS は記事やブログなどで共有できるように各投稿用のHTMLを用意しています。ツイッターを例にして説明すると、共有したい投稿までいき、端っこのボタンを押すと、埋め込みという選択肢があると思います(または共有 → 埋め込みの流れ)。埋め込み用のコードをコピーして貼り付けて、表示します。 (このサイトで利用するとよくエラーが起こり、表示されないことがあるので、私の場合、サイト専用のコンポーネントを作成し、利用しています。)

1// Spotify の埋め込み
2<iframe src="https://open.spotify.com/embed/track/5sBPYOkp1YgCo5GGHBNWqG" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

マークダウン記法どうでしたか？個人的にはマークダウンの方が自由度が高く、扱いやすいので基本的にこちらを利用してます。リッチテキストはシンプルではありますが、日本語の文章を書くにはやっぱり不便を感じますし、自由度も少ないため、あまり利用していません。それでもやはり、マークダウンに抵抗感があるひともいると思うので、Contentful が改善してくれるのを期待して待っています。より多くのマークダウン記法を知りたい方はこちらのページをご覧ください。

さて、今回はマークダウンを使った表現を紹介しましたが、今現在、マークダウンをさらに拡張したMDXという新しい技術が出ています。これを使うと、マークダウン記法に加え、コンポーネントといったものを記述できるようになり、よりカスタマイズすることが可能になります。このサイトはMDXで記述できるように作成したので、ところどころでコンポーネントを使っています。ぜひコンポーネントページに飛んで、試してみてください。