Help us understand the problem. What is going on with this article?

Github製エディタ ATOMをカスタマイズしてみた

More than 5 years have passed since last update.

先日ベータ版がローンチされたGithub製のエディタ、ATOM
Web開発に必要な知識でカスタマイズが可能なので、すこし試してみました。

スタイルの設定は CSS(less)
挙動の設定は Javascript(CoffeeScript)
で定義します。
ファイルは ~/.atom 下に style.less, init.coffee があるのでこのファイルを編集してください。

cmd+alt+i で Chrome の Webインスペクタが起動します。
編集対象のエレメントはこれで確認してください。

#ss 2014-03-01 at 23.25.56 .png

今回は以下のような感じでスタイルを変更してみました。

style.less
body, html {
  // 全体のフォントの設定
  font-family: 'Ricty';
}

.tree-view {
  ol.entries.list-tree li {
    // ファイルツリーのフォントサイズが大きすぎるので変更
    font-size: 8pt;

    span.icon:before {
      // フォルダ・ファイルアイコンは8ptだとつぶれるので 10pt に
      font-size: 10pt;
    }
  }
}

.vertical {
  // パネルを分割するとアクティブになっているパネルがわかりにくいので、非アクティブのパネルは透過
  .pane {
    opacity:0.40;

    &.active {
      opacity: 1.0;
    }
  }

  // パネルの境界がわかりにくいのでborderの色を変更
  .panes .pane-row > *,
  .panes .pane-column > * {
    border-right: 1px solid rgba(150, 150, 150, 0.2);
  }
}

.editor {
  .line.cursor-line {
    background: #1F2224;
  }

  .cursor {
  }
}

変更後は以下のようになります

#ss 2014-03-02 at 1.03.55 .png

簡単なので、皆さんも試してみてください


追記
ATOMおすすめパッケージ もご一緒にどうぞ

kng
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした