web-dev-qa-db-fra.com

Modification de la couleur des commentaires dans Atom editor

Je voudrais changer la couleur des commentaires dans l'éditeur Atom. À partir d'un peu de recherche sur Google, j'ai trouvé que je peux mettre ce qui suit dans mon fichier .atom/styles.less:

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

C'est super - maintenant, j'ai des commentaires jaune vif qui demandent à être remarqués plutôt que de disparaître en arrière-plan. Le problème est qu'il ressemble maintenant à ce qui suit

enter image description here

Comme vous pouvez le voir, la couleur du texte des commentaires a changé, mais les délimiteurs de commentaires et les liens dans les commentaires restent dans le gris presque invisible par défaut, ce qui semble un peu idiot.

Mes questions sont (1) comment puis-je changer la couleur de ces articles, et plus important encore (2) où puis-je trouver comment changer la couleur de ces articles?

Veuillez noter que je ne suis pas un programmeur Web et que je ne connais rien du CSS ou des technologies connexes. Je suis donc à la recherche d'une solution assez étape par étape, contrairement aux solutions trouvées, par exemple, dans les réponses à cette question , qui supposent une quantité substantielle de fond dans le fonctionnement interne de cette des trucs.

cssatom-editor
24
Nathaniel

Pour connaître les classes CSS de tout élément que vous souhaitez styliser, procédez comme suit dans l'éditeur:

  1. Utilisez votre curseur pour mettre en surbrillance l'élément que vous souhaitez inspecter. Je suis votre exemple d'une double barre oblique (c'est-à-dire un commentaire) ici.
  2. Presse Ctrl+Alt+Shift+P (ou Cmd+Alt+P sous OS X). Une fenêtre contextuelle vous indiquera toutes les classes de cet élément. Habituellement, c'est la dernière ligne de cette notification qui nous intéresse. Pour //, il est comment.line.double-slash.js.
  3. Ne tenez pas compte du dernier point et de tout ce qui le suit, car le conserver appliquerait uniquement vos modifications à un type de fichier spécifique (js dans ce cas). Maintenant, ajoutez un point. La chaîne restante est l'élément que nous voulons styliser: .comment.line.double-slash.

Ouvrez le .atom/styles.less en ouvrant la palette de commandes (Ctrl+Shift+P sous Windows/Linux ou Cmd+Shift+P sous OSX) et en recherchant "Application: Ouvrez votre feuille de style".

Ajoutez ces lignes à .atom/styles.less, s'il n'est pas déjà présent:

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

À l'intérieur des crochets, vous pouvez placer du code CSS/LESS pour tout élément que vous souhaitez personnaliser.

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

Conseils supplémentaires: vous pouvez énumérer les identifiants d'élément sous la forme d'une liste séparée par des virgules et des espaces, si les mêmes modifications s'appliquent à eux. Donc, si vous voulez faire des liens de la même couleur que les commentaires, il y a deux possibilités:

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

ou

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

Avec les noms de classe longs tels qu'ils sont utilisés ici, je préférerais la première option pour la lisibilité. Mais cela dépend de votre choix.

17
Hexaholic

Utilisation de 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

La syntaxe est modifiée en 1.14. Maintenant, vous devez l'utiliser pour changer la couleur du commentaire

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