Zennのよく使う記述方法まとめ
Zennのよく使う記述まとめ
これからZennで投稿していく上で、よく使いそうな記述方法だけをまとめてみました。
ほとんどが、Zenn公式の下記記事の抜粋です。
見出し
#を文頭につけることで、見出しを作ることができる。
#の数によって見出しの大きさを変えることができる。
#見出し1
##見出し2
###見出し3
####見出し4
リストの作成
-もしくは*を文頭につけると、リストを作成することができる。
- Hello!
- Hola!
- Bonjour!
* Hi!
上の記載をした時の表示↓
- Hello!
- Hola!
- Bonjour!
- Hi!
番号付きリストの作成
文頭に1.をつけると、以下のように番号付きリスストを表示できる。
＊2.以降は、改行時に自動で記述される。
1. First
2. Second
上の記載をした時の表示↓
1.First
2.First
テキストリンクの作成
[リンクとして表示させたい文字](遷移先のURL)
例
[Zenn公式](https://zenn.dev/zenn/articles/markdown-guide)
上の例のように記載すると、実際は下のようにリンクが表示される。
Zenn公式(Markdown記法一覧記事)
＊Ctrl + Kのショートカットキーでも挿入できる。
画像の挿入
＊altテキストには、何らかの理由で画像を表示できない際に、
代わりにテキストで画像を表現する情報を明示できるようにするため記述する。
例
例の実際の表示↓
＊画像は投稿画面の画像を貼るからも挿入できる。
画像の横幅を指定する
画像の表示が大きい場合は、画像のURLの後に半角スペースを空けて=〇〇xと記述すると、画像の幅をpx単位で指定できる。
例
＊URLの後に =250xを追記することで、画像幅を250pxに変更している。
例の実際の表示↓
キャプションをつける
画像のすぐ下の行に*で挟んだテキストを記載すると、キャプションのような見た目で表示される。
*キャプション*
例
*プログラミングをしている男性の画像*
例の実際の表示↓
プログラミングをしている男性の画像
画像にリンクを貼る（画像ごとリンクにする）
[](リンクのURL)
例
[](https://www.irasutoya.com/2018/12/blog-post_627.html)
例の実際の表示↓（画像元のページへのリンクになっているので、クリックしてみてください）
テーブルの作成
|Head|Head|Head|
|----|----|----|
|text|text|text|
|テキスト|テキスト|テキスト|
実際の表示↓
| Head | Head | Head |
|---|---|---|
| text | text | text |
| テキスト | テキスト | テキスト |
コードブロックの表示
「```」で挟んだ範囲をコードブロックとして表示できる。
conts = great = () => {
console.log("Awesome");
};
＊上の表示にはコードの前後に「```」を記述しています。
コードブロックにファイル名を表示する
言語:ファイル名と区切りで記載することで、ファイル名がコードブロックの上部に表示されるようになる。
「```言語:ファイル名」
表示したいコードを記述
「```」
const great = () => {
console.log("Awesome")
}
引用
>引用文
>引用文
実際の表示↓
引用文
引用文
注釈
注釈を指定すると、ページ下部にその内容が表示される。
脚注の例[^1]です。インライン^[脚注の内容その2]で書くこともできる。
[^1]: 脚注の内容その1
*脚注の内容を指定してあげる。
＊脚注はページの下部に表示される。
区切り線
-----
*---3つ以上で区切り線表示できる。
下のように区切り線が表示される、
インラインスタイル
*イタリック*
**太字**
~~打ち消し線~~
インラインで`code`を挿入する
実際の表示↓
イタリック
太字
打ち消し線
インラインでcodeを挿入する
インラインのコメント
自分用のメモをしたいときはHTMLのコメント記法を使用できる。
<!-- TODO: 〇〇について追記する -->
下には実際に上のコメントを記述しています。
Zenn独自の記法
メッセージ
:::message
メッセージをここに
:::
実際の表示↓
:::message alert
警告メッセージをここに
:::
実際の表示↓
アコーディオン（トグル）
::: details タイトル
表示したい内容
表示したい内容2
:::
実際の表示↓
タイトル
表示したい内容
表示したい内容2
要素をネストさせる方法
外側の要素の開始/終了に : を追加すると、要素をネストさせることができる。
::::details タイトル
:::message
ネストされた要素
:::
::::
実際の表示↓
タイトル
リンクカード
URLだけが貼り付けられた行は、その部分がカードとして表示される。
#URLだけの行
https://zenn.dev/zenn/articles/markdown-guide
Discussion