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

文章の書き方の1つ「マークダウン」はWebメディアの記事を作成する方にとって親しみ深いものでしょう。
今回はマークダウンに対応した テキスト エディタとマークダウンを自動で生成するジェネレーターを紹介します。
マークダウン対応の テキスト エディタを利用すれば、自分の記述しているマークダウンでホームページに公開した時に、どのような見え方になるのかリアルタイムでチェックできます。
また、ジェネレーターを使えば作成したい図をテーブルに変換したり、ホーム ページ そのものをマークダウン記法に変換したりといった作業の効率化が図れます。
ぜひ紹介する ツール を使いこなして、スムーズな記事作成に役立てましょう。

マークダウンとは

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

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

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

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

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

1.Atom

https://atom.io/

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

2.Visual Studio Code

https://www.microsoft.com/ja-jp/dev/products/code-vs.aspx

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

3.Kobito

http://kobito.qiita.com/

「Kobito」はプログラマの技術情報共有サービ「Qiita」が開発した テキスト エディタです。
マークダウンにも対応しており、リアルタイムでプレビュー画面を確認できます。
「Qiita」の会員登録を行っておけば、誰でも自由に利用できます。

4.Brackets

http://brackets.io/

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

5.Markable.in

https://markable.in/

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

6.Dillinger

https://dillinger.io/

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

参考：
Markdownで記述できる無料のテキストエディタ15選 | UX MILK

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

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

1.Tables Generator

http://www.tablesgenerator.com/markdown_tables

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

2.Mark It Down

http://markitdown.medusis.com/

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

3.to-markdown

https://domchristie.github.io/to-markdown/

「to-markdown」はホームページを表現する記述方法である HTML を、マークダウンへ自動変換する ツール です。
過去に HTML で作成した記事をマークダウンとして書き直したい場合などに活用できるでしょう。

4.Heck Yes Markdown

http://heckyesmarkdown.com/

「Heck Yes Markdown」は URL で指定したホームページを自動でマークダウンに変換する ツール です。
HTML によるプレビュー画面も合わせて確認でき、 ページ 内でどのように見出しや太字が使われているかを確認できます。

まとめ

マークダウンはシンプルな符号を追加するだけで、見出しや太字といった装飾効果を与えられるので比較的扱いやすいのが特徴です。

ですが、ちょっとした記号の違いで見出しの内容が変わってしまったり、スペースの数を間違えると図が崩れてしまったりといった難点もあります。そのため、常に テキスト の見え方を確認できるマークダウン対応のエディタや自動の変換 ツール を活用して、業務の効率化をはかるようにしましょう。