ひとりでのアプリ開発 - fineの備忘録 -

ひとりでアプリ開発をするなかで起こったことや学んだことを書き溜めていきます

StackEdit - ウェブブラウザで使えるMarkdownエディタ

初めに

 本記事は、ウェブブラウザ上で使うことができる Markdown エディタとして、StackEdit を紹介します。

StackEdit とは

stackedit.io

 StackEditとは、ウェブブラウザ上で使うことができるMarkdownエディタです。

 見出しやリスト、太字や斜体、リンク、引用、テーブルなど様々なものを簡単に記述できるため便利です。また、プレビュー機能がついており、確認しながら作業をすることができます。


Markdown 記法とは

 Markdownとは、文書を記述するための軽量マークアップ言語のひとつです。Markdownで使われる記法をMarkdown記法といいます。

Markdown 記法の例

見出し
# H1見出し
## H2見出し
### H3見出し


リスト
- 箇条書きリスト
  - インデント
    - ネストされたリスト
1. 番号付きリスト
2. 番号付きリスト


コードブロック
```言語名
コード
```

(例)

```markdown
# H1見出し
## H2見出し
### H3見出し
```


数式

 LaTex記法を用いて数式を記述することができます。文中に数式を入れる場合は $ で挟みます。複数行にわたるや数式のみを書きたい場合は $$ で挟みます。

文中に数式を入れたい場合は,  $ax + b$ のようになる. 
$$
\int_{- \infty}^\infty e^{-x^2} dx = \sqrt{\pi} 
$$


Markdown チートシート

 Markdown記法のチートシートがウェブ上にあります。書き方が分からない場合は参考にしましょう。

www.markdownguide.org

ツールバー

StackEditには、ツールバーがついており、Markdown記法を知らなくても使うことができます。

メニュー

メニューの開き方

 画面右上の Toggle side bar をクリックすると、サイドバーにあるメニュー画面が開きます。


Google Dirveと接続

 Sign in with Google をクリックし、Google アカウントを選択して、Google Drive と接続することができます。


Workspace

 Workspace を追加することができます。

 現在は、次を workspace に追加することができます。


Synchronize

 ファイルの同期ができます。

 Save on Google Drive をクリックすると、次の画面が表示されます。

 Folder IDを指定するか、Choose folder をクリックし、フォルダを直接選ぶと保存先が指定できます。すでにあるファイルに上書きしたい場合は Existing file ID にファイルIDを書きます。

 Synchronize now をクリックすると、同期され保存されます。

 同期先のファイルが開きたい場合は Open from 〇〇をクリックし、ファイルを開くことができます。

Table of Content

 Table of Content は目次です。見出しの位置に飛ぶことができます。

エクスポート・インポート

 HTMLやMarkdown形式にインポート、エクスポートできます。また、pdf形式などにエクスポートするには、$5でスポンサーになる必要があるようです。

 エクスポートをすると、指定した形式のファイルがダウンロードされます。

 Markdown形式のファイルをpdfに変換する方法は様々あるようです。Visual Studio Code であれば、拡張機能Markdown PDF」をインストールすれば、Markdown形式のファイルをpdfに変換することができます。

最後に

 他の Markdown エディタもありますが、選択肢に一つにはなるのではないでしょうか。かなり使いやすかったです。