css - personalizar - Cambiando el color del comentario en el editor Atom

install a theme in atom

Question

Me gustaría cambiar el color de los comentarios en el editor Atom. De un poco de googlear, encontré que puedo poner lo siguiente en mi archivo .atom / styles.less:

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

Eso es genial, ahora tengo comentarios de color amarillo brillante que requieren ser notados en lugar de desvanecerse en el fondo. El problema es que ahora se ve como el siguiente

Como puede ver, el color del texto de los comentarios ha cambiado, pero los delimitadores de los comentarios y los enlaces dentro de los comentarios permanecen en el gris casi invisible por defecto, que parece un poco tonto.

Mis preguntas son (1) cómo puedo cambiar el color de estos elementos y, lo que es más importante, (2) ¿dónde puedo consultar cómo cambiar el color de estos elementos?

Tenga en cuenta que no soy un programador web y no sé nada de CSS ni de ninguna tecnología relacionada. Por lo tanto, estoy buscando una solución bastante paso a paso, en contraste con las soluciones encontradas, por ejemplo, en las respuestas a esta pregunta , que suponen una cantidad sustancial de antecedentes en el funcionamiento interno de este material.

Answer 1

La sintaxis se modifica en 1.14. Ahora, necesitas usar esto para cambiar el color del comentario

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

Answer 2

Para conocer las clases de CSS de cualquier elemento que desee diseñar, siga estos pasos en el editor:

1. Usa el cursor para resaltar el elemento que quieres inspeccionar. Estoy siguiendo tu ejemplo de doble barra (es decir, un comentario) aquí.
2. Presione Ctrl + Alt + Shift + P (o Cmd + Alt + P en OS X). Una ventana emergente le dirá todas las clases de ese elemento. Por lo general, es la última línea de esa notificación que nos interesa. Para // , es comment.line.double-slash.js .
3. Ignore el último punto y todo lo que lo sigue, ya que mantenerlo aplicaría sus cambios solo a un tipo de archivo específico ( js en este caso). Ahora prepárese un punto. La cadena restante es el elemento que queremos .comment.line.double-slash : .comment.line.double-slash .

Abra .atom/styles.less abriendo la paleta de comandos ( Ctrl + Shift + P en Windows / Linux o Cmd + Shift + P en OSX) y busque "Aplicación: abra su hoja de estilo".

.atom/styles.less estas líneas a .atom/styles.less , si no está ya presente:

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

Dentro de los corchetes puede colocar el código CSS / LESS para cualquier elemento que desee personalizar.

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

Consejo adicional: puede enumerar los identificadores de elementos como una lista separada por comas y espacios, si los mismos cambios se aplican a ellos. Entonces, si quieres hacer enlaces del mismo color que los comentarios, hay dos posibilidades:

.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 nombres de clase largos como se usan aquí, prefiero la primera opción para facilitar la lectura. Pero eso depende de su elección.

Answer 3

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