Edited at

ATOMをMarkdownエディタ用に設定作り込んでみた

More than 1 year has passed since last update.


実現したかったこと。


  • Markdownメイン、スクリプトととかも

  • 黒系テーマ+シンタックスハイライト

  • 設定の同期

大体この3つ。

ATOMは何回か使おうと思いつつ、設定を作り込む時間がなかった。。。

ようやく納得行くのが作れたので設定保存も兼ねてまとめ。


この設定をやると出来るATOMのイメージ

Atom画面.PNG


インストールしたパッケージ

エディタの設定画面からインストールしていく形式になる。

入れたパッケージは以下の通り。

パッケージ名
概要

japanese-menu
メニューなどを日本語化

auto-encoding
文字コードを自動判別

atom-beauty

Ctrl+Alt+Bでインデントを自動整形

highlight-column
カーソル位置の列をハイライト

highlight-line
カーソル位置の行をハイライト

markdown-scroll-sync
マークダウンプレビューとエディタパネルのスクロールをシンクロ

minimap
Minimapを表示

show-ideographic-space
全角スペースを可視化

atom-clock
ウィンドウの右下に時計表示

sync-settings
gitのgistを使って設定を同期


  1. ATOMをダウンロードしてインストール

    公式:https://atom.io/


  2. Ctrl+,で設定を開いてinstallからSearch-packagesjapanese-menu

    入力してパッケージをインストール。これで日本語化される。


  3. 他のパッケージも探してインストール。



インストールしたテーマ

monokaiは良いぞ!👍

インストールはパッケージと同じ画面から。


インストールしたフォント



以降はjapanese-menuを導入した前提で記載

同期できない環境用にかなり細かく記載。完全に自分用。


1. エディタ設定


1.1. フォント設定

環境設定(Ctrl+,)からエディタ設定にフォントとフォントサイズ


1.2. 不可視文字の設定

不可視文字
設定文字

キャリッジ・リターン
↵ (キャリッジ・リターン)

改行 Eol
§ (セクション・マーク)

スペース
‡ (ダブルダガー)

タブ
▷ (右白三角)


1.3. その他の設定


  • 行の高さ:1.4

  • タブ幅:4、タブタイプ:soft

  • 無効化する設定
    アトミックソフトタブ自動インデントペースト時に自動インデント
    ソフトラップ右端ガイドの位置でソフトラップ
    ソフトラップ無効にしてもなるときは表示自動折り返しの設定で直る。


2. パッケージの設定


2.1. highlight-column

EnableLine Modeにチェック


2.2. hightlight-Line

Enable Selection Borderと¨Enable UnserLineを有効化

Underlinedottedに設定。

切り替えはしないのでKeybindingsは無効化。


2.3. auto-endocing

Always auto detectは無効化

偶に勝手に切り替わって邪魔くさいことがある。


3. Stylesheetの編集

ファイルからスタイルシートが開くので以下の通りに変更。

/*

* Your Stylesheet
*
* This stylesheet is loaded when Atom starts up and is reloaded automatically
* when it is changed and saved.
*
* Add your own CSS or Less to fully customize Atom.
* If you are unfamiliar with Less, you can read more about it here:
* http://lesscss.org
*/

/*
* Examples
* (To see them, uncomment and save)
*/

// style the background color of the tree view

// ツリービューの設定
.tree-view {
background-color: whitesmoke;
font-family: "Ricty Diminished Discord for powerline", "メイリオ",monospace;
}

// 不可視文字列の色指定
atom-text-editor.editor {
.indent-guide,
.invisible-character {
color: rgba(110, 180, 215, 0.3);
}

}

// 全角空白の色指定
atom-text-editor.editor {
.highlight.ideographic-space {
.region:after {
color: rgba(110, 210, 255, 1.0);
}
}
}

// 行番号の色指定
atom-text-editor .gutter {
color: #ff8820;
background-color: #353739;
}

atom-text-editor {
// color: white;
// background-color: hsl(180, 24%, 12%);

}
// style UI elements inside atom-text-editor

atom-text-editor .cursor {
// border-color: red;
}
//

// markdown-previewウィンドウの設定
.markdown-preview.markdown-preview {
background-color: #333;
color: #BBB;
//font-size: 16px
font-size: 14px;
}

// ######## atom-clock color settings ##########
.atom-clock-icon {
color: orange;
}

.atom-clock {
color: orange;
font-family: "Ricty Diminished Discord", "メイリオ",monospace;
}

.atom-clock.atom-clock-utc {
color: white;

&:after {
content: " (UTC)";
}
}

.atom-clock-tooltip.atom-clock-utc .tooltip-inner {
color: white;

&:before {
content: "(UTC) ";
}
}


4. sync-settingsによる設定同期


4.1. アクセストークンの作成

New personal access tokenからトークンを作成

gistにだけチェック入れてればOK。

Generation tokenをクリックしたらtokenが生成されるので保存しておく。

tokenは後から確認できないので同期用にどこかに保管しておくこと


4.2. gistの作成

githubのgist画面を開きdescription等に

適当な文章を入れてCreate secret gistを作成。

間違えてPublicで作らないように。

表示されたページのURLuser名/xxxxxxxxxxxxのuser名以降の文字列を保存しておく。

こちらは後でも確認できる。


4.3. パッケージにtoken設定

Personal Access Tokenに先程保存したtokenを入力。

GistID2. gistの作成で保存したユーザ名の後ろの文字列を入力


4.4. 設定の同期の仕方

Ctrl+Shift+pでコマンドパレットを呼び出して

Sync Settings: Backupでgistに保存

Sync Settings: Restoreで設定取ってくる。


5. よく使うショートカット


  • Ctrl+Shift+p:コマンドパレットの呼び出し

  • Ctrl+Shift+m:MarkdownプレビューのON/OFF

  • Ctrl+Shitf+u:文字コード選択

  • Ctrl+Alt+batom-beautyによる自動整形

  • Ctrl+Shift+n:新しいウィンドウ

  • Ctrl+n:新しいタブ



6. 追加で入れたパッケージ


2018/06/10追記

document-outline

Markdownのアウトラインを表示してくれる。

file-icons

タブにファイルタイプに応じたアイコンを付与する。