マークダウンを使いこなすならコレ！テキストエディタ8選+ジェネレーター4選

2018年08月16日

ビジネス

文章の書き方の1つ「マークダウン」はWebメディアの記事を作成する方にとって親しみ深いものでしょう。
今回はマークダウンに対応したテキストエディタとマークダウンを自動で生成するジェネレーターを紹介します。

マークダウン対応のテキストエディタを利用すれば、自分の記述しているマークダウンでホームページに公開した時に、どのような見え方になるのかリアルタイムでチェックできます。

また、ジェネレーターを使えば作成したい図をテーブルに変換したり、ホームページそのものをマークダウン記法に変換したりといった作業の効率化が図れます。

マークダウンとは

マークダウンとは、文章の構造をWeb上でわかりやすいように記載するための文書の書き方を指します。2004年にジョン・グルーバー（John Gruber）によって開発され、その後多くの開発者の手が加わって現在の形式となっています。

文章の構造とは、例えば記事のタイトルや見出し、箇条書きといった構造を指します。
マークダウンでは記事の見出しは「## 見出し」と記載し、箇条書きは「- 箇条書き」というように構造に合わせた記述をするのが特徴です。

参考：
Markdownとは｜日本語Markdownユーザー会

マークダウン対応のテキストエディタ10選

テキストエディタの中には、マークダウンで記述した内容をプレビュー画面でリアルタイムに確認できる機能を持ったものがあります。
自分が書いている記事の見え方を確認する際に役に立つので、ぜひ活用してみましょう。

1.Atom

Atom

「Atom」はGitHubが開発したテキストエディタです。
マークダウンで記載したテキストのプレビュー画面をリアルタイムで確認することができます。
プレビュー画面の起動も「Ctrl(Command)+Shift+M」というショートカットキーで立ち上げられるので、確認作業を素早く行えます。

2.Visual Studio Code

Visual Studio IDE、コードエディター、Team Services、Mobile Center

「Visual Studio Code」はWindowsで知られるMicrosoftが開発したテキストエディタです。
上部のタブをクリックし、「Open Preview」を選択すると、マークダウンで記述した内容のプレビュー画面が確認できます。

3.Brackets

Brackets___A_modern__open_source_code_editor_that_understands_web_design..png
Brackets - Web デザインを認識する最新のオープンソースコードエディター

「Brackets」はIllustratorやPhotShopで知られるAdobeが開発したテキストエディタです。
標準機能ではマークダウンには対応していませんが。「Markdown Preview」という拡張機能を使うとマークダウンで記載したテキストのプレビュー画面が確認できるようになります。

4.Markable.in

Markable.in.png
Markable.in

「Markable.in」はブラウザ上で起動するマークダウン対応のテキストエディタです。
マークダウンを利用して記述した内容がリアルタイムでプレビュー画面に表示され、見え方を確認できます。なお、登録にあたっては会員登録が必要となるので注意してください。

5.Dillinger

Online_Markdown_Editor___Dillinger__the_Last_Markdown_Editor_ever..png
Online Markdown Editor - Dillinger, the Last Markdown Editor ever.

「Dillinger」はブラウザ上で起動するテキストエディタです。
左側の画面にマークダウンで記述したテキストを入れると、リアルタイムで右側にプレビュー画面が表示されます。インストールや会員登録は不要なので、まずは気軽にマークダウンのプレビュー画面をチェックしたいという方は活用してみてください。

6. Byword

Byword

Bywordは、Mac OSで使えるシンプルなマークダウンエディタです。

Bywordは、一見すると普通のテキストエディタのように見えますが、マークダウンを打ち込む際に入力補助をしてくれます。例えば、リストを打つ時に「－」を打ち込んである項目を入力し、エンターボタンを押すと、次のアイテムを入力できるように「－」を自動でつけてくれます。

また、マークダウンで書いたものをHTML構造で保持してコピーする機能もついています。もちろんハイライト機能もバッチリです。

7. Sublime Text

Sublime Text

Sublime TextもAtomやVisual Studio Codeに似たテキストエディタです。デフォルトではプレビューやマークダウンのシンタックスハイライトはついてきませんが、下記のパッケージを導入することでそうした機能を追加することができます。

OmniMarkupPreview
マークダウンで書いた文書にプレビューを表示する機能

Markdown Extended
マークダウンのコード部分へのシンタックスハイライト機能

Sublime Textは、他のマークダウンエディタと比べると起動の速度は一番早く、入力支援も充実しています。プレビュー機能が標準でついてこないのは難点ですが、速度を求めるのであればこちらが便利です。

8. MWeb

MWeb

今まで出てきたマークダウンエディタのメリットを全て取り入れたといえるのが、MWebというMac用のマークダウンエディタです。画面のように、リアルタイムでプレビューも見つつ、フォルダの中身も確認でき、HTMLはもちろんPDFやリッチテキスト、Word形式でも出力できます。

マークダウンでは、画像を貼り付けるのにファイルパスを書かなければならず、面倒な作業になります。しかし、MWebでは画像をコピーしてエディタにペーストすると、ファイルパスが絶対パスで貼り付けられます。さらに、Google Photosから画像を持ってくることもできます。

そのほかにも、WordPressやBlogger、Mediumに直接投稿したり、Evernoteに書いたノートを同期させることもできます。バックアップ機能やテーマの色のカスタマイズもでき、スタイルシートでオリジナルのテーマを作ることも可能です。

マークダウンを使うのに役立つジェネレーター4選

見出しを表現する「##」や太字を表現する「**」といったシンプルな記述方法だけでなく、マークダウンでは表（テーブル）のような複雑な表現もあります。
ジェネレーターを使えば、自動マークダウンを生成する事ができるので、作業の短縮化につながるでしょう。

1.Tables Generator

Markdown_Tables_generator___TablesGenerator.com.png
Markdown Tables generator - TablesGenerator.com

「Tables Generator」はマークダウンの表（テーブル）を自動で生成するツールです。
表の中に文字を入力し「Ganerate」をクリックするだけで、マークダウンのテーブルが下のボックスに生成されます。

2.Mark It Down

Mark It Down: convert rich text to Markdown

「Mark It Down」はコピーしたホームページの文章を、構造はそのままマークダウンに変換するツールです。
例えば上記の画像では黒の背景に白文字で表示されている「まずは、Qiitaに登録してみよう！」文章が、見出しを示す「### まずは、Qiitaに登録してみよう！」という変換がされています。
他のメディアの記事がどのような構造になっているか調査する際などに活用できるでしょう。