editor - mejores - Guía de resaltado de sintaxis para Atom

mejores plugins para atom editor

Question

Estoy muy satisfecho con el nuevo editor de Github. Desafortunadamente, no es exactamente fácil de personalizar. Quería crear mi propio tema de resaltado de sintaxis, porque no estoy contento con los que están disponibles para descargar (al menos no parece que les vaya bien con Java)

Ahora los archivos (sintaxis-variables, color.less, etc.) al estilo parecen estar en:

~/.atom/ .../packages (if you want to change existing themes)

El problema es que no sé qué clases (CSS) diseñan qué elementos de la sintaxis. ¿Hay algún lugar donde pueda ver cómo cambiar el color de, por ejemplo, las declaraciones de tipo variable?

Answer 1

Para otros que vienen aquí porque el resaltado para un tipo de archivo no se reconoce para su idioma:

• abra el archivo ~/.atom/config.cson (mediante CTRL + MAYÚS + p: escriba `` configuración abierta '''')

• agregue / edite una sección customFileTypes debajo del core por ejemplo, como la siguiente:

  core:
    customFileTypes:
      "source.lua": [
        "conf"
      ]
      "text.html.php": [
        "thtml"
      ]

(Encontrará los nombres de ámbito de los idiomas ("source.lua", "text.html.php" ...) en la configuración del paquete de idiomas, consulte aquí )

Answer 2

Puede usar la consola web de cromo presionando Ctrl+Shift+I (probado en Linux) y resaltando cualquier elemento. Luego, abra su hoja de estilo presionando Edit->Open Your Stylesheet y agregue estilo para el elemento con la sintaxis MENOS.

Por ejemplo:

Quieres negrita resaltando la clase y el nombre de la función. Si selecciona la clase con la consola de cromo, puede ver que tiene la clase .name

Que debería agregar en su archivo de hoja de estilo algo como esto:

atom-text-editor::shadow .name{
    font-weight: bold
}

Y puedes crear tu propio tema. En Atom no es difícil: presiona Ctrl+Shift+P y escribe "Generate Syntax Theme" . En tema nuevo puedes copiar código de otro tema. Si no sabes CSS / LESS, ¡no te preocupes! Tu nuevo tema tiene un archivo en la carpeta de style llamada colors.less . Puede cambiarlo o escribir una nueva regla de color en el archivo base.less.

Atom tiene documentos geniales, puedes leer sobre la creación de temas en esta página https://atom.io/docs/v1.4.2/hacking-atom-creating-a-theme

Answer 3

Sí, puede iniciar Atom en modo de desarrollador usando el comando atom --dev o usando el menú View > Developer > Open in Dev Mode ... Cuando lo haga, puede hacer clic con el botón derecho en cualquier elemento de la interfaz de usuario y seleccionar Inspect Element en el menú contextual, tal como lo haría en su navegador web.

Además, para los elementos de sintaxis puede:

1. Coloque el cursor de texto en el elemento que desea estilizar.
2. Presione Cmd + Alt + P en OS X, Ctrl + Alt + Shift + P en otras plataformas, o busque "Editor: Log Cursor Scope" en la paleta de comandos para mostrar los ámbitos del elemento de sintaxis

Los ámbitos del elemento de sintaxis se traducen directamente en clases CSS.