Modifica del colore del commento nell'editor Atom

Question

Vorrei modificare il colore dei commenti nell'editor di Atom. Da un po 'di googling, ho trovato posso mettere il seguente nel mio .atom/lima styles.less:

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

È fantastico - ora ho brillanti commenti gialli che richiedono di essere notato, piuttosto che in dissolvenza sullo sfondo . Il problema è che ora sembra il seguito

Come si può vedere, il colore del testo dei commenti è cambiata, ma i delimitatori di commento e link all'interno di commenti rimangono nel predefinito quasi-invisibile-grigio , che sembra un po 'sciocco.

Le mie domande sono (1) come posso cambiare il colore di questi elementi, e soprattutto (2) dove posso cercare come cambiare il colore di questi elementi?

Si prega di notare che non sono un programmatore web e non so nulla di CSS o di tecnologie correlate. Sto quindi cercando una soluzione abbastanza graduale, in contrasto con le soluzioni trovate, ad esempio, nelle risposte a this question, che presuppongono una notevole quantità di background nel funzionamento interno di questa roba.

Answer 1

a scoprire la classi CSS di qualsiasi elemento che si desidera stile, attenersi alla seguente procedura nell'editor:

1. utilizzare il cursore per evidenziare l'elemento che si desidera esaminare. Sto seguendo il tuo esempio di una doppia barra (cioè un commento) qui.
2. Press Ctrl +Alt +Maiusc +P (o Cmd +Alt +P su OS X). Un pop-up ti dirà tutte le classi di quell'elemento. Di solito, è l'ultima riga di quella notifica che ci interessa. Per //, è comment.line.double-slash.js.
3. Ignora l'ultimo punto e tutto ciò che lo segue, dal momento che mantenerlo applica le modifiche solo a un tipo di file specifico (js in questo caso). Ora anteporre un punto. La stringa rimanente è l'elemento che vogliamo modellare: .comment.line.double-slash.

Aprire il .atom/styles.less aprendo il comando pallette (Ctrl + Maiusc + P su Windows/Linux o Cmd + Maiusc + P su OSX) e la ricerca di "Applicazione : Apri il tuo foglio di stile ".

Aggiungi i seguenti linee di .atom/styles.less, se non è già presente:

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

All'interno delle staffe è possibile inserire il codice CSS/meno per ogni elemento che si desidera personalizzare.

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

---

Ulteriori suggerimenti: è possibile enumerare identificatori elemento come un elenco delimitato-and-separati da spazi, se le stesse modifiche dovrebbero applicarsi a loro. Quindi, se si vuole fare i collegamenti dello stesso colore come i commenti, ci sono due possibilità:

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

o

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

Con i nomi delle classi lunghi in cui sono utilizzati qui, preferisco la prima opzione per leggibilità. Ma dipende dalla tua scelta.

Answer 2

La sintassi è stata modificata in 1.14. Ora, è necessario utilizzare questo per cambiare il commento di colore

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

Answer 3

Utilizzando 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; 
}