自動化厨のプログラミングメモブログ│CODE-LIFE

Python/ExcelVBA/JavaScript/Raspberry Piなどで色んなことを自動化

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

f:id:maru0014:20181028220319p:plain

今までMarkdownを書くのにCodePenBracketsVS 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」でした。