Markdown: Markdown クイック スタートとエディターの選択

複雑なソフトウェアは必要ありません。どのテキスト エディタでも Markdown を作成できますが、適切なエディタを使用すると生産性が 2 倍になります。

1. 学ぶこと

• ニーズに合った Markdown エディタの選び方
• 最初の .md ファイルを作成して保存する
• ライブプレビューを使用する
• 基本的な Markdown ワークフロー
• 人気のあるエディタの長所と短所

2. 初心者向けの実話

(1) 問題点: どのソフトウェアを使用すればよいか分からなかった

マリーは Markdown を学びたかったのです。彼女は 3 つのエディタをダウンロードして試しましたが、それぞれがまったく異なるインターフェイスを持っていました。1 つはプレーン テキストを表示し、1 つはライブ フォーマットを表示し、もう 1 つはコード エディタのように見えました。彼女は一言も書かずにツールを比較する 2 日間を費やしました。

(2) 解決策: エディターを選んで書き始める

同僚は、「VS Code から始めて、Markdown 拡張機能をインストールし、プレビューしながら書いてください」と提案しました。マリーはセットアップに 10 分を費やし、その後 .md ファイルを開いて書き込みを開始しました。彼女は左側で入力し、右側に美しくレンダリングされた出力がリアルタイムで表示されるのを見て、すぐに Markdown の魅力を理解しました。初日、彼女は 3 つの技術的なメモを書きました。

3. Markdown エディターの種類

Markdown エディターは 3 つのカテゴリに分類され、それぞれが異なるユーザーに適しています。

graph TB
    A[Markdown Editors] --> B[Plain-Text Editors]
    A --> C[Dedicated Editors]
    A --> D[Online Editors]
    B --> E[VS Code / Sublime Text]
    C --> F[Typora / Obsidian]
    D --> G[StackEdit / Jianshu]

graph TB
    A[Markdown Editors] --> B[Plain-Text Editors]
    A --> C[Dedicated Editors]
    A --> D[Online Editors]
    B --> E[VS Code / Sublime Text]
    C --> F[Typora / Obsidian]
    D --> G[StackEdit / Jianshu]

(1) VS Code — 開発者の第一選択

VS Code は現在最も人気のあるコード エディターであり、拡張機能を使用すると強力な Markdown エディターになります。

Recommended extensions:
- Markdown All in One (shortcuts, table of contents, auto-formatting)
- Markdown Preview Enhanced (enhanced preview)
- Paste Image (auto-saves pasted images)

▶ 例: 3 人のエディターが同じ Markdown ファイルを開く

VS Code: Source on the left + live preview on the right (split view)
Typora: WYSIWYG, no split view (source hidden)
Notepad: Plain text, no formatting (source only)

さまざまなエディターがどのように機能するかを理解することは、ニーズに合った適切な執筆ツールを選択するのに役立ちます。

(2) Typora — エレガントな WYSIWYG の選択

Typora のユニークな点は、分割ペインがないことです。書式設定がレンダリングされる単一のインターフェイスに直接書き込むことができます。 # の見出しはすぐに大きく太字になり、*italic* のテキストはすぐに斜体になります。

# In Typora
Type # Heading → heading immediately becomes large and bold
Type **bold** → text instantly turns bold
Type --- → a divider line appears immediately

4. 最初のマークダウン ファイルの作成

(1) 新しいファイルの作成

.md ファイルを作成する最も簡単な方法:

# In the terminal
touch my-first-doc.md

# Or in VS Code:
# File → New File → Save with .md extension

▶ 例: Markdown への Python コード ブロックの埋め込み

## My First Code Block

\`\`\`python
print("Hello, Markdown!")
\`\`\`

▶ 例: VS Code でのマークダウンのプレビュー

Press `Ctrl+K V` to open side-by-side preview
Press `Ctrl+Shift+V` to open full-screen preview

Left pane: write Markdown source
Right pane: see rendered output in real time

5. マークダウンのワークフロー

(1) ローカルワークフロー

graph LR
    A[Create .md file] --> B[Write in editor]
    B --> C[Check with live preview]
    C --> D{Content looks good?}
    D -->|Yes| E[Save / commit to Git]
    D -->|No| B
    E --> F[Convert / publish]

graph LR
    A[Create .md file] --> B[Write in editor]
    B --> C[Check with live preview]
    C --> D{Content looks good?}
    D -->|Yes| E[Save / commit to Git]
    D -->|No| B
    E --> F[Convert / publish]

(2) 一般的なワークフロー

▶ 例: VS Code を使用した完全な作成ワークフロー

1. Open VS Code, create `note.md`
2. Write the title and body
3. Press Ctrl+Shift+V to open the preview
4. Edit until satisfied
5. Ctrl+S to save the file
6. Commit to GitHub with git

6. 完全な例: ゼロから Markdown ノートの公開まで

Note title: [Notes] CSS Flexbox Layout

Core concept: Flexbox is a one-dimensional layout model

Common properties cheatsheet:
  display → flex
  justify-content → center, space-between
  align-items → center, stretch

Sample code:
  .container { display: flex; justify-content: center; }

Reference: MDN Flexbox Guide

期待される結果: 概念、プロパティ チートシート、コード例、参照リンクを含む、よく構成された技術ノート。

❓ よくある質問

📖 まとめ

• エディターの選択: 開発者には VS Code、執筆には Typora、ナレッジ管理には Obsidian
• .md ファイルの作成: 基本的に .md または .markdown 拡張子を持つプレーン テキスト ファイル
• ライブ プレビュー: VS Code では Ctrl+Shift+V、Typora では自動
• 基本的なワークフロー: 書き込み → プレビュー → 保存 → 公開
• 命名規則: 小文字とハイフンを使用し、スペースや特殊文字は避けてください。

📝 練習問題

1. 初心者: VS Code で hello-markdown.md ファイルを作成します。 H1 見出し、H2 見出し、段落、およびコード ブロックを記述します。次に、Ctrl+Shift+V を押して結果をプレビューします。

2. 中級: VS コードと強化された Markdown プレビューを Obsidian と比較します。それぞれに短いメモを書き、どのツールを好むか、そしてその理由を説明します。

3. チャレンジ: Typora トライアル版をインストールするか、StackEdit (オンライン) を使用します。画像とリンクを含む Markdown 記事を作成し、それを PDF と HTML の両方としてエクスポートして、書式が一貫していることを確認します。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて