AtomでMarkdownなテキストを書く

Markdownで文章を書く

私はブログを書く際、Markdown記法で書いています。
だって、いちいちタグ書いたりとか、メニューからhタグ選んだりとかめんどくさいんだもん、、、

たとえば、こんな感じでかけちゃいます。

見出し
#   h1
##  h2
### h3
 
水平線
 
強調
** 文字列 **
 
リンク
[Link Text](http://xxx.com “xxx”)

いくつかの例ですが、こんな感じで簡単にかけちゃうんです。
最初は覚えるのがめんどくさいですが、一度覚えてしまうとささっとある程度体裁が整った文章が作れるので、重宝します。

Markdownを何で書く

そんなMarkdownテキストですが、どのエディタで書くのかが重要になります。

こんな記法ですから、今書いている文章が本当に正しくレイアウトされているのか気になったりしてきます。
ひたすらMarkdownで書いていて、さて確認だ!と確認した時に体裁ボロボロなんて状態だったらめんどくさいです。

そこで、求める機能としては一つだけ

  • リアルタイムでHTMLプレビューが見れる

個人的にはもうこれだけできていれば問題なしです。

Atomという選択

Markdown文章専用のエディタとしてはHaroopadなんかが有名です。

しかし、私はシステムエンジニアなわけです。
普段から仕様書書いたり、ちょこっとコーディングしたり、結構エディタを使う機会は多いです。

そして、最近ではメインのエディタとしてAtomを使っています。
普段Atomを使っているのに、Markdownで物を書く時だけHaroopadを使うなんで面倒臭いわけです。

じゃあもう何も考えなくてもAtomで書けばいいじゃん

リアルタイムプレビュー

Atomでは標準機能でMarkdownのリアルタイムプレビューが可能です。

あ、解決してた!!

さっそく使い方

普段はこんな画面です。

[blog]月に吠えてる 2016-04-04 00-13-32

[Command] + [Shift] + P でコマンドパレットを開きましょう。
(Windowsの方は [Ctrl] + [Shift] + P です)

[blog]月に吠えてる 2016-04-04 00-13-46

コマンドパレットに「markdown」と入れてみましょう。

「Markdown Preview」というコマンドが出てきてたと思います。
こいつを選択すると、、、

[blog]月に吠えてる 2016-04-04 00-14-10

こんな感じで右っ側にプレビューが表示されます。

[blog]月に吠えてる 2016-04-04 00-14-45

なにこれ凄く便利!!

あ、[Ctrl] + [Shift] + M でもOKです。
この場合、一発でプレビューウィンドウが表示されます。

最近はWebAPIの仕様なんかを API Blueprint で記述したりもするので、Markdownを利用する機会がどんどん増えてきています。
Atomでこんなに快適に利用できるなんて、、、

もう、エディタはAtom一本でしばらく事足りそうです。