Markdownの使い方(Zenn版)

はじめに

こんにちは！
技術記事を書くにあたり、記載することは決まっているのにMarkdownで記述する方法がパッと出てこない...なんてことありませんか？
そんなとき、この記事を見れば基礎的な記載部分が把握できるようチートシート兼、自身が覚えるという意味も兼ねて、まとめていきたいと思います。

Markdownとは

Markdownは、テキストベースの軽量マークアップ言語で、読みやすさと書きやすさを重視しています。ウェブコンテンツの作成に広く使用され、技術文書やブログ投稿に適しているとされています。

ZennのMarkdownでできること

1. 見出し

• 例文

# 見出し1
## 見出し2
### 見出し3

• 結果

  見出し1

  見出し2

  見出し3

• 用途
  文章の構造を整理し、読み手にとってわかりやすい形式となります。

2. 強調

• 例文

  *斜体*
  **太字**
  

• 結果
  斜体
  太字
• 用途
  文章内の特定の部分に強調を加え、読み手の注意を引きます。

3. リスト

• 例文

  - 箇条書き1
  - 箇条書き2
    - サブリスト1
    - サブリスト2
  

• 結果
  • 箇条書き1
  • 箇条書き2
    • サブリスト1
    • サブリスト2
• 用途
  情報を整理し、視覚的にわかりやすく提示します。

4. リンク

• 例文

  [OpenAI](https://www.openai.com)
  

• 結果
  OpenAI
• 用途
  外部リソースへの参照を提供し、情報源へのアクセスを容易にします。

5. 画像の挿入

• 例文

  ![altテキスト](画像URL =(画像サイズ)x)
  

• 結果
  

• 用途
  視覚的な情報を記事に追加し、内容の理解を深めます。
  また、記事を記載するページにて以下箇所より画像のアップロードも可能となっていますのでご活用ください。
  

6. コードブロック

• 例文

  ```
  print("Hello, World!")
  ```
  

  ~~~
  print("Hello, World!")
  ~~~
  

• 結果

  print("Hello, World!")
  

  print("Hello, World!")
  

• 用途
  プログラムコードやコマンドを整形して表示し、読みやすくします。様々なプログラミング言語のシンタックスハイライトに対応しています。
  コードブロックの中で` や ~ を使用する場合は、使用したものと逆の文字でさらに外側に追記することで対応できます。

7. 引用

• 例文

  > これは引用です。
  

• 結果

  これは引用です。

• 用途
  他の文献や発言を参照する際に使用し、文脈を明確にします。

8. 水平線

• 例文

  ---
  

• 結果

• 用途
  セクションの区切りとして使い、文章の構造を明確にします。

9. チェックボックス

• 例文

  - [ ] 未完了タスク
  - [x] 完了タスク
  

• 結果
  • 未完了タスク
  • 完了タスク
• 用途
  タスクリストを作成し、進捗状況を視覚的に追跡します。

10. テーブル

• 例文

  | ヘッダー1 | ヘッダー2 |
  |-----------|-----------|
  | 内容1     | 内容2     |
  

• 結果

  ヘッダー1	ヘッダー2
  内容1	内容2

• 用途
  情報を表形式で整理し、比較や要約に便利です。

11. 絵文字

• 例文

  😀 🚀
  

• 結果
  😀 🚀
• 用途
  感情や行動を表現するために使用し、記事に親しみやすさを加えます。

12. カスタムブロック（情報、注意、警告）

• 例文

  :::message
  これは情報メッセージです。
  :::
  :::message alert
  これは警告メッセージです。
  :::
  

• 結果

  これは情報メッセージです。

  これは警告メッセージです。

• 用途
  特定の情報や警告を強調表示し、読者の注意を引きます。

14. フットノート

• ■例文

  テキスト[^1]
  [^1]: フットノートの内容
  

• ■結果
  テキスト^[1]
• ■用途
  補足情報や参照を文末に配置し、本文の流れを妨げません。

15. インラインコード

• ■例文

  `インラインコード`
  

• ■結果
  インラインコード
• ■用途
  小規模なコードやコマンドを文中に挿入し、強調表示します。

16. 取り消し線

• ■例文

  ~~取り消し線~~
  

• ■結果
  取り消し線
• ■用途
  訂正や変更を視覚的に示します。

17. HTMLエンティティ

• ■例文

  © € < >
  

• ■結果
  © € < >
• ■用途
  特殊文字を安全に使用するためにHTMLエンティティを利用します。

最後に

上記以外にも様々な記述方法や表現がありますが、初学者向けには以上が活用例になるかと思います。
他にもこのような記事はいっぱいありますし、記事を書いたことがある人はわかるかと思いますが、右側に「？」のボタンが有りそちらを押すと記載方法が出てきますが、まずは書いて覚えるという意味で今回まとめさせていただきました。
https://zenn.dev/zenn/articles/markdown-guide#zenn独自の記法

また、質問や要望などは今後下記のリンク先から確認いただけるとよいかもしれないです。
https://github.com/zenn-dev/zenn-community/projects/1

脚注

1. フットノートの内容