Zennデビュー(マークダウン記法)

3 min read読了の目安(約3500字
はじめに

こんにちは、ダメおやじエンジニアです。
Zennの公式サイトにそって初めて投稿してみました。

マークダウン記法って何?の状態でしたが、Zennの公式サイトをみて投稿することができました。

サイトのレイアウト構成もきれい。
これからZennにいろいろ投稿したいと思います。

変更履歴

2021/3/18 初稿
2021/3/30 変更
区切り線、空行を追加
文字整形の位置を修正
番号付リストのコードを修正(字下げレベル確認)

このページでは、私が学んだマークダウン記法を紹介します。

  • 見出し
  • リスト(番号付きリスト)
  • 文字整形
    • 太字、イタリック、打消し線、Code、コメント
    • 空行、区切り線
  • テキストリンク
  • 画像と画像リンク
  • テーブル
  • コードブロック(ファイル名付)
  • メッセージ(注意、警告)
  • アコーディオン(トグル)

見出し

見出し
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

見出しは#の数で使いわけます。5段階まで設定できるようです。

見出し1

見出し2

見出し3

見出し4

見出し5

リスト(番号付リスト)

リストのアイテムには-もしくは*を使います。
タブで字下げができます。

リスト
- 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段落目まで有効のようですね。

  1. List1
  2. 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記法

画像と画像リンク

画像

画像
![altテキスト](https://画像のURL)

ダメおやじエンジニア

画像の横幅指定

URLの後に半角スペースを空けて =○○xと記述すると、画像の幅をpx単位で指定できます。
画像の表示が大きすぎる場合などに便利です。

画像(横幅指定)
![altテキスト](https://画像のURL =100x)

ダメおやじエンジニア

キャプション付け

画像のすぐ下の行に*で挟んだテキストを配置すると、キャプションのような見た目で表示されます。

画像(キャプション付)
![altテキスト](https://画像のURL)
*キャプション*

ダメおやじエンジニア
caption

画像リンク

画像リンク
[![altテキスト](画像のURL)](リンクのURL)

最後に、画像横幅=100x,キャプション,リンクを組み合わせて、
画像をクリックするとZennの公式サイトに飛ぶように設定してみました。
ダメおやじエンジニア
画像をクリックしてZenn公式サイトへ

画像リンクはキャプション不要ですね。対応してませんでした。

テーブル

テーブルの境界として|で挟んだテキストを配置します。
ヘッダーとテーブルの境界は---を使いましょう。
スペース等は自分で無くても、多くても整形してくれるようです。

table
| Head1 | Head2 | Head3 |
|  ---  | ---   |---|
| text1 | text2 |text3 |
| text4 | text5 | text6     |
Head1 Head2 Head3
text1 text2 text3
text4 text5 text6

コードブロック(ファイル名付)

コードは```で挟むことでブロックとして挿入できます。
言語を指定するとコードへ装飾(シンタックスハイライト)が適用されます。

` ``` `python: test.py ※\は表示の都合でつけてますが、実際はありません
print("Hello python")
` ``` `

結果はこちら

test.py
print("Hello python")

Zenn独自の記法

Zennではメッセージ(message)警告メッセージ(message alert)を表示することができます

メッセージ
:::message
メッセージをここに
:::

メッセージをここに

警告メッセージ
:::message alert
警告メッセージをここに
:::

警告メッセージをここに

アコーディオン(トグル)
:::details
さいごに であらわしたものがアコーディオン(トグル)です
:::
さいごに

マークダウン記法を学べただけでなくZennはとても見やすくレイアウトしてくれる最適な
ツールだなと感じました。

それより、GitにPushするのに苦しんだ~
ここは後で別で解説しよう。

人生はまだまだこれからだ!

参考サイト