質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%

Q&A

解決済

4回答

24092閲覧

AtomのSyntax Highlightの色を変更する方法について。

wh1tecat

総合スコア19

1グッド

5クリップ

投稿2015/07/14 09:44

編集2015/07/14 15:38

Atomでソースコードを表示している時、Syntax highlight機能によって、それぞれの言語のタグや変数が色づけされて表示されていると思います。
ですが、JavaScriptを勉強するためにAtomを使っている時、コメントの色が灰色で背景と被り、とても見づらいと思いました。
ですが、他の色や文字の視認性が良く、背景色は変えたくないのです。
そこで、Syntax Highlightの色を変更しようと思いましたがどのファイル内に記載されているのかがわかりません。
どなたか編集すべきファイルの位置についてご教授願えないでしょうか?
よろしくお願いします。

2015/7/15 12:35追記
どうやら、user名/appdata/local/atom/app-1.0.2/resouces/app.asarの中にデフォルトのテーマのファイルが入ってるみたいなので、そこをいじればどうにかなりそう・・・なのですが。
asarファイルはatom専用の.tarのようなものみたいで、atom公式からパック/リパックツールが出ているのですが、npmからインストールしようとすると
no license field.
となってしまい、インストールが出来ない(当方のみ?)ので、手詰まり中です。
引き続き他の解決方法も募集いたしますので、どなたかご存知でしたらご教授お願い致します。

mhashi👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

自分専用の Syntax テーマを作ってみてはいかがでしょうか。

詳しくは下記に載っています。
3.5 Hacking Atom : Creating a Theme

ざっくり説明すると……

  1. Control+Shift+P を押す
  2. Generate Syntax Theme と入力する
  3. 表示された "Package Generator: Generate Syntax Theme" を選択する
  4. テーマの保存パスを入力する(変更の必要がなければ my-theme のままで)
  5. 別ウィンドウで Atom が起動するので、styles/base.less の .comment 等を変更する
  6. 編集結果を保存する
  7. Control+, で Setting を開き、[Themes]から今作成したテーマ(4.でパスを変えていなければ My という名前)を選択する

個人的にコメントは緑系の色が好きなので、

.comment { color: @green; } /* (中略) */ .punctuation { &.definition { &.comment { color: @green; }

とすると、しっくりきました。

投稿2015/09/01 06:31

alg

総合スコア2019

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

UI Theme, Syntax
seti-ui
seti-syntax
パッケージありますよ!
デフォルトの色はどんな感じでしたか?

投稿2015/11/10 07:30

b1ackc0ffee

総合スコア267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

Settings -> Themes のページにあるyour stylesheetというリンクをクリックしてください。
styles.lessが開くと思います。
そこにスタイルを追加するとエディタ内のデザインを自由に変更できます。

less

1atom-text-editor::shadow { 2 .comment { 3 color: @red; 4 } 5}

上記のコードだと、コメントが赤になります。

投稿2015/09/03 13:20

cakecatz

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自己解決しましたが、返答をするのを失念していました。。。申し訳ないです。
今回はやったことが一番近かった方をBAとさせていただきました。
というより、そんな方法でオリジナルのテーマ作れたのかと驚きました(これを知ってれば面倒なことをしなくてすんだのに・・・)
一応私がやった方法を書きますと、
atomの本体や内部のモジュールは.asarでパッキングされていることに気づき、node.jsを導入し、node.jsのapmからasarを導入(参考文献
asarを使いappdata/local/atom/atom-(ver)/resourceのapp.asarをアンパックし、アンパックした中からテーマファイルを編集(場所は失念してしまいました・・・確かmodule/テーマ名とかだったような?)
し、再度asarを使いパッキングすることで変更できました。

3人の方々、せっかくお返事頂いたのに申し訳ありませんでした。
そして、ありがとうございました。

投稿2016/05/16 05:30

編集2016/05/16 05:31
wh1tecat

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問