このページではZennで記事や本を作成するときの執筆環境について紹介します。
<h1 id="zenn-%E3%81%AE%E5%9F%B7%E7%AD%86%E6%96%B9%E6%B3%95%E3%81%AF-2-%E7%A8%AE%E9%A1%9E">
<a class="header-anchor-link" href="#zenn-%E3%81%AE%E5%9F%B7%E7%AD%86%E6%96%B9%E6%B3%95%E3%81%AF-2-%E7%A8%AE%E9%A1%9E" aria-hidden="true"></a> Zenn の執筆方法は 2 種類</h1>
Zennのコンテンツは次のいずれかの方法で作成します。
<h2 id="1.-web%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%83%BC">
<a class="header-anchor-link" href="#1.-web%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%83%BC" aria-hidden="true"></a> 1. Webエディター</h2>
<img src="https://storage.googleapis.com/zenn-user-upload/tb04ri7f5v9mdccsehi5jppvfpm3" alt="Zennのエディター" loading="lazy" class="md-img">
ブラウザ上で動くエディターです。Zennにログインした状態で使用します。
<details><summary>ショートカットを使用しよう</summary><div class="details-content">
オンラインのmarkdownエディターでは、以下のショートカットを使用できます。
<ul>
<li>
Ctrl + P（プレビュー）：markdownがどのように表示されるかをチェックできます。もう一度ショートカットを実行すると、エディターに戻ります。</li>
<li>
Ctrl + S（内容の保存）：変更内容を保存します。</li>
<li>
Ctrl + I（埋め込み）：ツイートや YouTube、CodePen、SpeakerDeck などの埋め込みコンテンツを挿入するためのモーダルが表示されます。</li>
</ul>
※ Mac の場合は<code>Ctrl</code>の代わりに<code>⌘</code>キーを使用します。
</div></details>
<h2 id="2.-%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%AE%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%83%BC-%2B-cli">
<a class="header-anchor-link" href="#2.-%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%AE%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%83%BC-%2B-cli" aria-hidden="true"></a> 2. ローカルのテキストエディター + CLI</h2>
<img src="https://storage.googleapis.com/zenn-user-upload/n0tufad6ruthuy0j2hxhffg87hpz" alt="VS code" width="660" loading="lazy" class="md-img">
<img src="https://storage.googleapis.com/zenn-user-upload/ve1rve2rb3yvvcat974fxt2rftc1" alt loading="lazy" class="md-img">
自分の好きな環境で執筆したい方はGitHub リポジトリとの連携機能を利用することをおすすめします。リポジトリ連携をすると、特定のブランチに変更があったときに自動でコンテンツがzenn.devに反映されるようになります。
📘 <a href="https://zenn.dev/zenn/articles/connect-to-github" target="_blank">Zenn と GitHub リポジトリを連携する →</a>
リポジトリ連携時には、ローカルでmarkdownファイルを作成し、好きなテキストエディターで編集を行います。Zenn CLIを使うことでブラウザでプレビューしながら執筆することが可能になります。
📘 <a href="https://zenn.dev/zenn/articles/install-zenn-cli" target="_blank">Zenn CLI を導入する →</a>
<hr>
オンラインエディターを使う場合も、CLIを使う場合もmarkdownの書き方は変わりません。具体的な記法は下記のリンク先をご覧ください。
📘 <a href="https://zenn.dev/zenn/articles/markdown-guide" target="_blank">Zenn のmarkdown記法 →</a>

Zennの2種類の執筆方法について

2. ローカルのテキストエディター + CLI

Discussion