web-dev-qa-db-ja.com

Atomエディターでのコメントの色の変更

Atomエディターでコメントの色を変更したいです。ちょっとしたグーグルから、.atom/styles.lessファイルに次のコードを挿入できることがわかりました。

atom-text-editor::shadow .comment {
    color: #ffffaa;
}

それは素晴らしいです-今、私は背景にフェードインするのではなく、気づかれることを要求する明るい黄色のコメントを持っています。問題は、次のようになることです

enter image description here

ご覧のとおり、コメントのテキストの色は変更されていますが、コメントの区切り記号とコメント内のリンクはデフォルトのほぼ不可視の灰色のままで、少しおかしく見えます。

私の質問は、（1）これらのアイテムの色をどのように変更できますか？（2）これらのアイテムの色を変更する方法はどこで調べられますか？

私はWebプログラマーではなく、CSSや関連技術については何も知らないことに注意してください。したがって、たとえば、 この質問 への答えに見られる解決策とは対照的に、かなり段階的な解決策を探していますもの。

cssatom-editor
24
Nathaniel

スタイルを設定する要素のCSSクラスを見つけるには、エディターで次の手順を実行します。

  1. カーソルを使用して、検査する要素を強調表示します。ここでは、二重スラッシュ（つまり、コメント）の例をフォローしています。
  2. 押す Ctrl+Alt+Shift+P （または Cmd+Alt+P OS Xで）。ポップアップにより、その要素のすべてのクラスが表示されます。通常、私たちにとって興味深いのは、その通知の最後の行です。 //の場合、comment.line.double-slash.jsです。
  3. 最後のドットとそれに続くすべてを無視します。これを維持すると、特定のファイルタイプ（この場合はjs）にのみ変更が適用されます。次に、ドットを追加します。残りの文字列は、スタイルを設定する要素.comment.line.double-slashです。

コマンドパレットを開いて.atom/styles.lessを開きます（Ctrl+Shift+P Windows/Linuxまたは Cmd+Shift+P OSXで）、「アプリケーション：スタイルシートを開く」を検索します。

まだ存在しない場合は、これらの行を.atom/styles.lessに追加します。

atom-text-editor::shadow {
    // custom comment styling goes here
}

括弧内に、カスタマイズする要素のCSS/LESSコードを配置できます。

atom-text-editor::shadow {
    .comment.line.double-slash {
        color: #ffffaa;
    }
}

追加のアドバイス：同じ変更を適用する必要がある場合は、要素識別子をカンマとスペースで区切られたリストとして列挙できます。したがって、リンクをコメントと同じ色にしたい場合、2つの可能性があります。

.comment.line.double-slash {
    color: #ffffaa;
}
.markup.underline.link.hyperlink { // I removed the '.https' to apply this to all protocols
    color: #ffffaa;
}

または

.comment.line.double-slash, .markup.underline.link.hyperlink {
    color: #ffffaa;
}

ここで使用されている長いクラス名では、読みやすさの最初のオプションを好むでしょう。しかし、それはあなたの選択次第です。

17
Hexaholic

1.14.4を使用：

// This styles comment text
atom-text-editor .syntax--comment {
    color: #53FFA1;
}

// This styles comment punctuation (i.e. //, and /*...*/)
.syntax--punctuation.syntax--definition.syntax--comment {
    color: #008C3F;
}
26
basiphobe

構文は1.14で変更されました。さて、これを使用してコメントの色を変更する必要があります

atom-text-editor .syntax--comment {
         color: #228B22;
}
13
Mojtaba Komeili