テキストエディタ、コード記述用

エディタをいくつか試した。極めて初心者目線で評価した。開発した装置の取扱説明書風ホームページをつくることを思い立ったのがきっかけ。markdown形式で書いてmkdocs(説明書風レイアウト)を使うための一本道。評価項目は下記の4つのみ。結果、個人的には、Visual Studio Codeを選んだ。「このページの筆者に限っては」経験値は「20年前、HTMLを、Winメモ帳で書き、ダイアルアップで更新」していて、それ以来といったところ。

  1. 複数)複数ファイルを開くとき、ウィンドウ、タブ、リスト、どれがデフォルトか。タブやリストで整理整頓したい。
  2. 見た目)デフォルトの見た目。見た目はかえられるようだが、どれが機能的にいいのはわからない、いじりかたが分からないので、とにかくデフォルトで評価する。
  3. プレビュー)エディタ内でのmarkdownプレビュー機能。個々のmarkdownファイルを編集し、おおかたのレイアウトを確認しながら作業できる。スクロール同期するのがよさそう。これも設定できそうだが、よくわからないので、やっぱりデフォルト設定で評価。
  4. mkdocs)mkdocs serveでブラウザプレビューしてあるものへの反映。エディタで編集中「自動ただし5秒後」か、「手動でSaveした後」か。どちらでもよさそう。

最終的なレイアウトは、mkdocs serveでしか確認できない。最終的につかいたいテーマが反映され、リンクも押せる。ただし、ターミナルとエディタのふたつを開いておくので、ちょっと面倒。エディタ内プレビュー機能が使いやすのがうれしい。

TextEdit (macOS付属、Windowsではメモ帳 とにかくシンプル)

  • 複数)複数ウィンドウ。
  • 見た目)白バックに黒い文字。とくに工夫なし
  • プレビュー)なし
  • mkdocs)手動でSaveした後

Xcode (macOS付属、なんでもできるんやろうけど、さわったことない) ★

  • 複数)ひとつのウィンドウ、複数タブ。または複数ウィンドウ。
  • 見た目)白バックにカラー文字。大きさとかフォントとか濃い黄色のサインとか、なんか見慣れない。イラレのようなナビがでる、スクロールバーと合体。
  • プレビュー)機能はあるけど、コマンドを打つらしい、うわぁ。試してない。
  • mkdocs)自動ただし5秒後

CotEditor(日本製でシンプル)

  • 複数)複数ウィンドウ
  • 見た目)白バックにカラー文字、見やすい。
  • プレビュー)なし
  • mkdocs)自動ただし5秒後

Brackets (Adobeだけど無料、見た目シンプル、機能十分) ★★

  • 複数)ひとつのウィンドウ、左にリスト。または複数ウィンドウ。
  • 見た目)黒バックにカラー文字。みやすい。全体にシンプルで良い。
  • プレビュー)スクロール同期するけれど、ウィンドウを上下に分割するので、狭い。「ファイル」 > 「拡張機能マネージャー」 で、Brackets Markdown Preview (2017)をインストール。右にできたボタンでONOFF。またはMarkdown Preview (2015)。7つのテーマから選べる。とうぜん、めざすmkdocs風のテーマはないけれど。
  • mkdocs)手動でSaveした後

ATOM (GitHub、人気があるようなことが書いてはあるけど、ひとりでもがいている初心者にとって、人気ぶりを知れる環境ではない。使ってみないとわからない。) ★★

  • 複数)ひとつのウィンドウに、複数タブ。
  • 見た目)黒バックにカラー文字。みやすい。起動直後になんやかんやタブが開いて、どうしたらいいのか。
  • プレビュー)スクロール同期しない、control+shift+Mで表示。
  • mkdocs)手動でSaveした後

Visual Studio Code (Microsoft、利用者が多そう。初心者には難しそうな印象だったけど、そうでもない。)  ★★★

  • 複数)ひとつのウィンドウに、複数タブ。左にリストもできる。
  • 見た目)黒バックにカラー文字。みやすい。イラレのようなナビがでる、便利。
  • プレビュー)スクロール同期する。右上のボタンで表示。
  • mkdocs)手動でSaveした後

Visual Studio Codeの環境設定、ちょっとだけ

ぼちぼち老眼だから表示される文字を大きくした。

(Menu bar) Code > Preference > Settings > Commonly used > Font Size 12 >16

markdown形式ファイルのプレビューは、デフォルトで黒バック、白文字。これを、白バック黒文字にかえる。

(Menu bar) Code > Preference > Extensions (拡張機能)

Markdown Preview Enhanced、または、Markdown Preview Github Stylingをインストール。Enhancedがなんとなく気に入った、理由はデザインのちょっとしたシンプルさ。右上に、プレビューボタンがふえる(インストールしたプレビュー機能ボタンと、既存プレビュー機能ボタンが並んで、どっちも同じデザインのボタン)