2015年3月25日水曜日

GitHub提供のオープンソース・エディタ「Atom」がMarkdownエディタとして素晴らしい!

クリスマスローズ
SIGMA DP2 Merrill

 Atomは2014年にGithubから公開されたオープンソースのエディタです。
 GoogleのブラウザChromeのフォーク元であるChromiumをベースに造られたソフトウェアで、Windows、Mac、Linux版があります。
 ダウンロードは「https://atom.io/」からできます。

AtomのMarkdownエディタとして優れているところ

Marddownのプレビューが標準装備

 AtomはGithub製ということで、GFM(GitHub Flavored Markdown)というGithub用の拡張Markdownを標準でサポートしています。
 初めからmarkdown-previewというPackageが入っており、リアルタイムでのプレビューが可能です。Markdown文書を編集中に「Ctrl + Shift + M」で右側にプレビューが表示されます。
 編集はリアルタイムに反映されますが、残念ながらスクロールは連動しません。
 HTMLへの変換は、markdown-previewのプレビュー画面上で右クリックするとメニューが現れるのでそこから行います。「Ctrl + Shift + P」のコマンドから選択することもできます。

便利なファイルブラウザ

 左側でツリービューがファイルブラウザのように使えます。
 リネームもファイルの削除も簡単です。

数多くの拡張機能

 Packageと呼ばれる拡張機能を入れることで、ユーザーが機能を追加することができます。というか標準で装備されている機能もPackageで実現されています。

Markdownエディタとしての環境を整える

 以下、私の設定について書いてみます。
 私の場合、AtomをWindows環境でMarkdownエディタとして使用していますので、それを前提に読んでください。

エディタ上の改行を改行扱いにする

 標準設定ですとMarkdownの仕様のとおり半角スペース2つが改行となります。これだと使いづらいので、markdown-previewの設定で、エディタ上の改行がプレビューでも改行として表示されるように設定します。
 メニューバーの"File"から”settings”を選択し(ショートカットキーは「Ctrl + ,」)、設定画面を開きます。
 "Packages”で"markdown-preview"の"Settings"を開き、"settings"の"Break On Single Newline"をチェックします。

フォントの設定

 初期設定ですと、エディタ部分、Markdownのプレビューともいわゆる中国語フォントで表示されますので、好みのフォントに設定します。
 私は、エディタでは"Migu 1M"という等幅フォント、Markdownプレビューでは"メイリオ"を使用しています。
 "Migu 1M"というフォントは、(1)半濁点(ぱぴぷぺぽなどの右上の○)が大きく濁点と判別しやすい、(2)半角・全角とも0(ゼロ)にスラッシュが入っていてO(オー)と判別できる、(3)数字の1(イチ)・大文字のI(アイ)・小文字のl(エル)が判別しやすい、などの特徴がある使いやすいフォントです。
 「Miguフォント : M+とIPAの合成フォント」からダウンロードできます。

エディタ部分のフォントの設定

 メニューバーの"File"から”settings”を選択し(ショートカットキーは「Ctrl + ,」)、設定画面を開きます。
 設定画面の”Editor Settings”の"Font Family"のテキストボックスに「"Migu 1M"」と入力します(フォント名はダブルクォーテーションで囲んで入力)。   

markdown-previewのフォントの設定

 これは設定画面がないので、markdown-preview のPackage内のlessを直接書き換えます。
 まず設定画面から、"Packages”で"markdown-preview"の"Settings"を開き、"View Code"をクリックします。
 PackageのフォルダがAtomで開くので、stylesheets -> markdown-preview.less を開きます。
 3行目に"font-family"があるので、フォント名を記入する部分の先頭にメイリオを追加します(「Meiryo, 」と記入)。
 保存してAtomを再起動すれば反映されます。

お薦めPackages

 先程も書きましたが、Packageはいわゆる拡張機能、プラグインです。
 ユーザーの方々がいろいろと作られています。
 私が入れているのは次のPackageです。

atom-color-highlight

 入力した色名やカラーコードの色でハイライト表示する。

atom-html-preview

 HTMLのプレビュー。ショートカットキーは「Ctrl + P」。

autocomplete-paths

 オートコンプリートにパスやファイル名を表示。 

autocomplete-plus

 タイプ中にオートコンプリート候補を自動表示する。

autocomplete-snippets

 オートコンプリートにスニペットを表示。

color-picker

 カラーピッカーを追加する。

file-icons

 拡張子に応じたファイルアイコンを表示する。

highlight-column

 カーソル位置の縦列をハイライト表示する。

highlight-selected

 ファイル内の選択した言葉をハイライト表示する。

japanese-wrap

 日本語の折り返しを正しく機能をさせる。

markdown-pdf

 マークダウン文書をPDFに変換。細かい設定はできないが、簡易的に変換するには便利。PNGやJPEGにも変換できる。

markdown-toc

 マークダウン文書に目次を作成する。日本語のヘッダだとうまく機能しないのが残念。

minimap

 ミニマップを表示する。長文を作成する場合は便利。

open-recent

 最近使用したフォルダやファイルを表示する。ちなみにrecent-filesというPackageもありますが現在は開発が停止され動作しないので注意。

sort-lines

 選択部分をAscii順でソートする。

【追記】

 Atom もバージョンアップして色々と変わっていますので、その後の状況は「GitHub提供のオープンソース・エディタ「Atom」 の設定とお薦めパッケージなど その後」にまとめています。

3 件のコメント:

Takashi Uchiyama さんのコメント...
このコメントは投稿者によって削除されました。
Takashi Uchiyama さんのコメント...

参考になりました!ありがとうございます。

これを使うとプレビューと連動しました。
さほど試してませんが(汗

markdown-scroll-sync
ttps://atom.io/packages/markdown-scroll-sync

のんくり さんのコメント...

情報ありがとうございます。
早速試してみますね。