ブラウザで動作するリアルタイムプレビュー付きの最強Markdownエディタ「StackEdit」

今までMarkdownを書くのにCodePenやBracketsやVS Codeなど色々使ってきましたが、ようやく「これは！」というMarkdownエディタにたどり着きました。超おすすめです。

StackEditが便利すぎて最近は会社で使う会議資料や文書も簡単なものはMarkdownで書くようにしています。

Google Driveに接続しておけばどこからでも書けるし読めるし。

Markdownとは

Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア（コンバータ）も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。 引用: https://ja.wikipedia.org/wiki/Markdown

Markdown記法についてはQiitaのチートシート記事が最強にまとまっているのでこちらを参照ください。

qiita.com

StackEditを使ってみる

StackEditを利用開始するにはhttps://stackedit.io/app#へアクセスするだけでOK。

Google Chromeを使っている方ならChromeウェブストアからウェブアプリとしてインストールしておくのもいいですね。

StackEditでできること

StackEditはブラウザ上で動作するMarkdownエディタアプリ。

シンプルで分かりやすいUIに加えてMarkdown記法を憶えていなくても入力補助機能があるのでMarkdown入門にもオススメです。

主に以下のような機能があります。

1. リアルタイムプレビュー
2. Markdown記法入力補助
3. GoogleドライブやDropboxへ保存
4. GitHubやWordPressへの投稿
5. .md/.html/.pdfなどでのエクスポート

欲しい機能全部詰まっていますね！

StackEditのMarkdown入力補助

左から順に解説していきます。

1. ファイル選択

ドロップボックスなどを接続していれば多分それもファイルツリーとして表示されるはず？

2. 戻る／進む

簡単にやり直し可能。ショートカットキーで使いたい場合は「Ctrl + Z」が戻る、「Ctrl + Shift + Z」が進むです。

3. 文字の装飾

4. リスト

5. 引用

6. コードブロック

ちなみにpython</code>で開始して<code>で閉じればPythonのシンタックスハイライトを適用できます。

その他の言語も同様に指定可能。

7. テーブル

初期状態では2×3のテーブルが挿入されます。

8. リンク

左側の[]で囲まれた範囲が表示されるテキスト。右側の()で囲まれた部分がリンクURLとなる。

9. 画像の挿入

URL欄に画像のURLを入力してOK。グーグルアカウントと連携していれば「Add Google Photos account」でGoogleフォトの画像を参照可能。

![]で囲まれた部分がimgタグのaltにあたります。

下段の()内が画像URL。

メニュー

エディター右上にあるStackEditアイコンを押すとメニューが表示されます。

特にファイルのエクスポートでPDF出力ができるというのは嬉しい。

以上、最もオススメしたいマークダウンエディタ「StackEdit」でした。