PICK UP

Atom で Windows でも快適 Markdown 環境!

TIPS

山本 允葵

GitHubQiita を始め、 MarkdownText を使えると便利な場面が増えております。
MAC の場合は KobitoMou のようなマルチバイト住民に強いエディタがあるのですが、
Windows の場合、 Markdown テキストと、マルチバイト、シンタックスハイライトに
対応したエディタがなかなかありませんでした。
HaroopadMarkdownpadSublineTextにプラグインで対応 という選択肢もあります。

そんな中、 GitHub が新しいエディタ Atom をリリースしました。

Atomとは

Atom
Linux, FreeBSD, MAC OSX, Windows に対応したテキストエディタで、
カスタマイズ性の高さやデフォルトでの対応ファイルの多さが特徴です。
GitHub が開発した エディタというだけあり、 Markdownテキストにおいては、GitHub Markdown が標準で使用可能となっており、 GistQiita との親和性が高いのも利点です。

セットアップ

Windows 版の Atom は、パッケージ管理ソフト Chocolatey をインストールする必要があります。

1. インストール

1.1Chocolatey のインストール

参考:Installation

今回の例では、 C:\tools\Chocolatey にインストールする想定で説明します。
※1.1.1 および 1.1.2 の手順をスキップすると、標準ディレクトリ C:\ProgramData\Chocolatey
にインストールされます。インストール先は任意です。

1.1.1 Chocolatey をインストールするディレクトリを作成する

コマンドプロンプトから

mkdir C:\tools\Chocolatey
1.1.2 Chocolatey をインストールするディレクトリを環境変数に設定する

システムのプロパティから、環境変数を設定します。

変数名 変数値
ChocolateyInstall C:\tools\Chocolatey

下記、環境変数の設定方法です。
すでにご存じの方は先へ進んでください。

コントロールパネルの
システムセキュリティ > システム > システムの詳細設定
と進みます。

詳細設定タブをクリックし、ウィンドウ下部にある環境変数ボタンをクリックします。

下半分のシステム環境変数内にある新規ボタンをクリックします。

先ほどの表にあった変数名・変数値を入力します。

下の図のように追加できていたら設定成功です。

1.1.3 Chocolatey をコマンドプロンプトでインストール

コマンドプロンプトを管理者権限で起動します。

管理者権限で起動

以下を実行します。

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%systemdrive%\ProgramData\chocolatey\bin

これで実行・・・!

入りました!

1.2 Atom のインストール

Chocolateyをインストールした後に新しくコマンドプロンプトを起動し 以下のコマンドを実行する。

cinst Atom

コマンドを入れて

待つ・・・

完了!
インストールできました!

入ってます

初回起動

2. MarkdownText の編集

新規ファイルを MarkdownText として編集したい場合、
ctrl + Shift + M または、画面左下のステータスバーをクリックします。
GitHub Markdown を選択すると、MarkdownText の文法で解釈してくれます。

ctrl + Shift + M で MarkdownPreview を呼び出すことが出来ます。

0020

3. スタイルの編集

エディタのフォント等の見た目は、cssの変更によって行うことが出来ます。

ctrl + , で設定画面を呼び出します。 開きましたら、左側のナビ部分にあるThemesをクリックします。

ウィンドウ上部にある

You can also style Atom by editting your stylesheet

のリンクからスタイルシートの変更ができます。

スタイルシートはless形式に対応しています。

たとえば、Markdown Preview のフォントがかっこ悪いので、フォントを変更したい場合、
.markdown-preview クラスに定義すれば適用されますので、以下のように編集します。
詳しくは、以下のスタイルをオーバーライドしています。
markdown-preview.less
※参考:Export CSS with HTML · Issue #70 · atom/markdown-preview · GitHub

完成!

Before

default font

After

フォント変えました

まとめ

新しいテキストエディタ Atom を(Windows ユーザ視点で)紹介しました。
使いやすいMarkdown編集環境がなく悔しい思いを強いられていたWindowsユーザにとっては、状況を打破する有力な選択肢です。