Zennデビュー（マークダウン記法）
はじめに
こんにちは、ダメおやじエンジニアです。
Zennの公式サイトにそって初めて投稿してみました。
マークダウン記法って何？の状態でしたが、Zennの公式サイトをみて投稿することができました。
サイトのレイアウト構成もきれい。
これからZennにいろいろ投稿したいと思います。
変更履歴
2021/3/18 初稿
2021/3/30 変更
区切り線、空行を追加
文字整形の位置を修正
番号付リストのコードを修正（字下げレベル確認）
2021/8/12 コメント文追加
このページでは、私が学んだマークダウン記法を紹介します。
- 見出し
- コメント文
- リスト（番号付きリスト）
- 文字整形
- 太字、イタリック、打消し線、Code、コメント
- 空行、区切り線
- テキストリンク
- 画像と画像リンク
- テーブル
- コードブロック（ファイル名付）
- メッセージ（注意、警告）
- アコーディオン（トグル）
見出し
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
見出しは#の数で使いわけます。5段階まで設定できるようです。
見出し1
見出し2
見出し3
見出し4
見出し5
コメント文
HTMLと同様のコメント文<!-- コメント文 --> が利用できます。
<!-- これはコメント文 -->
コメント文なので、実際には表示されませんよ(^^)
リスト（番号付リスト）
リストのアイテムには-もしくは*を使います。
タブで字下げができます。
- List1
- List2
- List2-1
* List2-2
- List2-2-1
- List2-2-2
- List1
- List2
- List2-1
- List2-2
- List2-2-1
- List2-2-2
番号付リストのアイテムには、1.のように番号とピリオドの組み合わせを使います。
1. List1
2. List2
2.1 List2-1
2.2 List2-2
2.2.1 List2-2-1
2.2.2 List2-2-2
字下げは、2段落目まで有効のようですね。
- List1
- List2
2.1 List2-1
2.2 List2-2
2.2.1 List2-2-1
2.2.2 List2-2-2
文字整形
（太字、イタリック、打消し線、Code、コメント)
*イタリック*
**太字**
~~打消し線~~
インラインで`code`を挿入
<!-- コメント -->
イタリック
太字
打消し線
インラインでcodeを挿入
←---- ここにコメント：見えないけどね！
（空行、区切り線)
------ 区切り線
<br> 空行
この下に区切り線-----を書いています。
この下に空行<br>を書いてます
テキストリンク
[アンカーテキスト](リンクのURL)
私が参考にしたサイトです。
ZennのMarkdown記法
画像と画像リンク
画像
画像の横幅指定
URLの後に半角スペースを空けて =○○xと記述すると、画像の幅をpx単位で指定できます。
画像の表示が大きすぎる場合などに便利です。
キャプション付け
画像のすぐ下の行に*で挟んだテキストを配置すると、キャプションのような見た目で表示されます。
*キャプション*
caption
画像リンク
[](リンクのURL)
最後に、画像横幅=100x,キャプション,リンクを組み合わせて、
画像をクリックするとZennの公式サイトに飛ぶように設定してみました。
画像をクリックしてZenn公式サイトへ
画像リンクはキャプション不要ですね。対応してませんでした。
テーブル
テーブルの境界として|で挟んだテキストを配置します。
ヘッダーとテーブルの境界は---を使いましょう。
スペース等は自分で無くても、多くても整形してくれるようです。
| Head1 | Head2 | Head3 |
| --- | --- |---|
| text1 | text2 |text3 |
| text4 | text5 | text6 |
| Head1 | Head2 | Head3 |
|---|---|---|
| text1 | text2 | text3 |
| text4 | text5 | text6 |
コードブロック（ファイル名付）
コードは```で挟むことでブロックとして挿入できます。
言語を指定するとコードへ装飾（シンタックスハイライト）が適用されます。
` ``` `python: test.py ※\は表示の都合でつけてますが、実際はありません
print("Hello python")
` ``` `
結果はこちら
↓
print("Hello python")
Zenn独自の記法
Zennではメッセージ(message)と警告メッセージ(message alert)を表示することができます
:::message
メッセージをここに
:::
:::message alert
警告メッセージをここに
:::
:::details
さいごに であらわしたものがアコーディオン（トグル）です
:::
さいごに
マークダウン記法を学べただけでなくZennはとても見やすくレイアウトしてくれる最適な
ツールだなと感じました。
それより、GitにPushするのに苦しんだ～
ここは後で別で解説しよう。
人生はまだまだこれからだ！
Discussion