Cambiar / agregar resaltado de sintaxis para un idioma en Sublime 2/3


94

Quiero cambiar / agregar resaltado de sintaxis para un idioma en Sublime 2/3.

Por ejemplo, quiero que la palabra clave se thiscoloree en JavaScript.

¿Cómo puedo hacer eso?

Sé que hay un archivo de preferencia de JavaScript C:\Program Files\Sublime Text 3\Packages, pero no sé qué cambiar o si tengo que crear un nuevo archivo de preferencia de JavaScript en algún lugar de esta carpeta %APPDATA%\Sublime Text 3.

Respuestas:


95

El resaltado de sintaxis está controlado por el tema que utiliza, accesible a través de Preferences -> Color Scheme. Los temas resaltan diferentes palabras clave, funciones, variables, etc. mediante el uso de ámbitos, que se definen mediante una serie de expresiones regulares contenidas en un .tmLanguagearchivo en el directorio / paquete de un idioma. Por ejemplo, el JavaScript.tmLanguagearchivo asigna los ámbitos source.jsy variable.language.jsla thispalabra clave. Dado que Sublime Text 3 utiliza el .sublime-packageformato de archivo zip para almacenar todas las configuraciones predeterminadas, no es muy sencillo editar los archivos individuales.

Desafortunadamente, no todos los temas contienen todos los ámbitos, por lo que tendrá que jugar con diferentes para encontrar uno que se vea bien y le brinde el resaltado que está buscando. Hay una serie de temas que se incluyen con Sublime Text, y muchos más están disponibles a través de Package Control , que recomiendo encarecidamente instalar si aún no lo ha hecho. Asegúrese de seguir las instrucciones de ST3 .

Da la casualidad de que he desarrollado el Neon Color Scheme, disponible a través de Package Control, que tal vez quiera echarle un vistazo. Mi objetivo principal, además de tratar de hacer que una amplia gama de idiomas se viera lo mejor posible, era identificar tantos ámbitos diferentes como pudiera, muchos más de los que se incluyen en los temas estándar. Si bien la definición del lenguaje JavaScript no es tan completa como la de Python, por ejemplo, Neontodavía tiene mucha más diversidad que algunos de los valores predeterminados como Monokaio Solarized.

jQuery resaltado con Neon Theme

Debo señalar que utilicé la Better JavaScriptdefinición de lenguaje de @ int3h para esta imagen en lugar de la que viene con Sublime. Se puede instalar mediante Package Control.

ACTUALIZAR

En los últimos tiempos he descubierto otra definición del lenguaje JavaScript sustitución - JavaScriptNext - ES6 Syntax. Tiene más ámbitos que el JavaScript base o incluso mejor JavaScript. Se ve así en el mismo código:

JavaScriptSiguiente

Además, desde que escribí originalmente esta respuesta, @skuroda se lanzó a PackageResourceViewertravés de Package Control. Le permite ver, editar y / o extraer partes o .sublime-packagepaquetes completos sin problemas . Entonces, si lo desea, puede editar directamente los esquemas de color incluidos con Sublime.

OTRA ACTUALIZACIÓN

Con el lanzamiento de casi todos los paquetes predeterminados en Github , los cambios se han producido de forma rápida y furiosa. La antigua sintaxis JS se ha reescrito por completo para incluir las mejores partes de la sintaxis JavaScript Next ES6, y ahora es totalmente compatible con ES6. Se han realizado muchos otros cambios para cubrir las esquinas y los bordes de las cajas, mejorar la consistencia y, en general, hacerlo mejor. La nueva sintaxis se ha incluido en la última compilación de desarrollo 3111 (en este momento) .

Si desea utilizar cualquiera de las nuevas sintaxis con la versión beta actual 3103, simplemente clone el repositorio de Github en algún lugar y vincule el JavaScript(o cualquier idioma (s) que desee) en su Packagesdirectorio; búsquelo en su sistema seleccionando Preferences -> Browse Packages.... Luego, simplemente haga un git pullen el directorio de repositorio original de vez en cuando para actualizar cualquier cambio, ¡y podrá disfrutar de lo último y lo mejor! Debo señalar que el repositorio usa el nuevo .sublime-syntaxformato en lugar del anterior .tmLanguage, por lo que no funcionarán con versiones ST3 anteriores a 3084, o con ST2 (en ambos casos, debería haber actualizado a la última versión beta o dev build de todos modos).

Actualmente estoy ajustando mi esquema de color de neón para manejar todos los nuevos ámbitos en la nueva sintaxis JS, pero la mayoría ya debería estar cubierta.


Instalé el control de paquetes y su mejor JavaScript. ¿Cómo puedo configurar el esquema para el tuyo? No aparece en el esquema de colores.
Niklas

¿Instalaste "Neon Theme" a través de Package Control también? Una vez que lo haya hecho, vaya a Preferences -> Color Scheme -> Neon Themey elija Neon.
MattDMo

1
Si instala paquetes a través de Package Control, se almacenan automáticamente en el lugar correcto, en este caso %APPDATA%\Sublime Text 3\Installed Packages\Neon Theme.sublime-package. Si selecciona la opción de menú anterior, su Packages\User\Preferences.sublime-settingsarchivo también se actualizará automáticamente.
MattDMo

@MattDMo - wow, esto fue muy completo. Solo estoy tratando de hacer algo de color de sintaxis y refuerzo de edición para un marcado similar a XML. Pero tener algunos problemas para descubrir cómo comenzar con algo súper simple. ¿Dónde podría comenzar a realizar ingeniería inversa o, mejor aún, obtener un tutorial sobre cómo crear uno?
Timothy T.

1
@ nmz787 si todo lo que quieres es el .sublime-syntaxarchivo, descárgalo y cópialo en ~/.config/sublime-text-3/Packages/User. Entonces estará disponible en el menú de sintaxis en la parte inferior derecha de la ventana Sublime, ya sea solo (dirá "SystemVerilog") o bajo el Usersubmenú, dependiendo de su configuración. Si desea el paquete completo, asegúrese de que Package Control se haya instalado correctamente, abra la paleta de comandos, escriba pci , presione enter, busque SystemVerilogy presione enter. No debería tener que cambiar el nombre de ningún archivo ni nada, ¿por qué estaba haciendo eso?
MattDMo

31

Finalmente encontré una manera de personalizar los temas dados.

Vaya a C:\Program Files\Sublime Text 3\Packagesy copie + cambie el nombre Color Scheme - Default.sublime-packagea Color Scheme - Default.zip. Luego descomprímalo y copie el tema al que desea cambiar %APPDATA%\Sublime Text 3\Packages\User. (En mi caso, All Hallow's Eve.tmTheme).

Luego, puede abrirlo con cualquier editor de texto y cambiar / agregar algo, por ejemplo, para cambiar thisen JavaScript:

<dict>
    <key>name</key>
    <string>Lang Variable</string>
    <key>scope</key>
    <string>variable.language</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#FF0000</string>
    </dict>
</dict>

Esto marcará thisen rojo los archivos JavaScript. Puede seleccionar su tema en Preferences -> Color Scheme -> User -> <Your Name>.


1
sí, esta es la solución torpe a la que todos debemos acostumbrarnos a medida que nos acercamos al nuevo y valiente mundo de Sublime Text 3. Estoy seguro de que pronto habrá complementos que permitirán una .sublime-packageedición mucho más fácil ...
MattDMo

9
Ese complemento está aquí: se llama PackageResourceViewery se puede instalar a través de Package Control. Hace que trabajar con .sublime-packagearchivos Sublime Text 3 sea ​​mucho más fácil, y lo recomiendo encarecidamente si planea realizar algún tipo de personalización en ST3.
MattDMo

1
¿Dónde encontraste la referencia para estas reglas?
qodeninja

2
^ Lo que dijeron. Además, no entiendo cuándo / dónde "selecciona" la palabra clave "esto" en el código, por qué esto solo colorea la palabra clave "esto". ¿Puedes explicarlo?
Zelphir Kaltstahl


16

Utilice el complemento PackageResourceViewer instalado a través de Package Control (como lo menciona MattDMo ). Esto le permite anular los recursos comprimidos simplemente abriéndolos en Sublime Text y guardando el archivo. Guarda automáticamente solo los recursos editados en% APPDATA% / Roaming / Sublime Text 3 / Packages / o ~ / .config / sublime-text-3 / Packages /.

Específicamente para la operación, una vez que el complemento esté instalado, ejecute el PackageResourceViewer: Open Resourcecomando. Luego seleccione JavaScriptseguido de JavaScript.tmLanguage. Esto abrirá un archivo xml en el editor. Puede editar cualquiera de las definiciones de idioma y guardar el archivo. Esto escribirá una copia anulada del archivo JavaScript.tmLanguage en el directorio de usuario.

El mismo método se puede utilizar para editar la definición de idioma de cualquier idioma del sistema.


No veo nada allí sobre colores. Sin embargo, tu respuesta fue la más cercana a lo que necesitaba. En su lugar, edité Monokai.tmTheme según esta publicación del foro de SublimeText para que el resaltado de sintaxis JSON funcione.
jmort253

1
Las instrucciones específicas en esta respuesta fueron para editar la definición de idioma. Si bien esto no le permitirá editar directamente los colores de un esquema de color, le permitirá cambiar cómo se encuentran ciertos tipos de ámbitos y, por lo tanto, cómo el esquema de color interpreta (y colorea) el idioma. El complemento abrirá cualquier tipo de recurso en Sublime para que pueda editar de manera similar los esquemas de color directamente con la misma herramienta. Por ejemplo, me gusta el esquema de color de Tomorrow Night, así que abriría Tomorrow-Night.tmTheme con este complemento para editar ese esquema de color.
chawkinsuf

5

El "esto" ya está coloreado en Javascript.

Ver-> Sintaxis-> y elija su idioma para resaltar.


Justo lo que estaba buscando: View -> Syntax -> Open all with current extension as...configurar, por ejemplo, *.stanarchivos con colores de sintaxis C ++.
BoltzmannBrain

0

Esta es mi receta

Nota: Esto no es exactamente lo que pide OP. Estas instrucciones le ayudarán a cambiar los colores de los elementos (comentarios, palabras clave, etc.) que son reglas de coincidencia de sintaxis definidas. Por ejemplo, use estas instrucciones para cambiar de modo que todos los comentarios de código sean de color azul en lugar de verde.

Creo que el OP está preguntando cómo definir thiscomo un elemento para colorear cuando se encuentra en un archivo fuente de JavaScript.

  1. Instalar paquete: PackageResourceViewer

  2. Ctrl+Shift+P> [ PackageResourceViewer: Open Resource]> [ Color Scheme - Default]> [ Marina.sublime-color-scheme] (o cualquier esquema de color que uses)

  3. El comando anterior abrirá una nueva pestaña en el archivo " Marina.sublime-color-scheme".

    • Para mí, este archivo estaba ubicado en mi perfil móvil %appdata%( C:\Users\walter\AppData\Roaming\Sublime Text 3\Packages\Color Scheme - Default\).
    • Sin embargo, si busco esa ruta en el Explorador de Windows , [ Color Scheme - Default] no es un directorio secundario de [ Packages] dir. Sospecho que PackageResourceViewerestá haciendo algo de virtualización.

paso opcional: en la nueva pestaña de combinación de colores: Ctrl+Shift+P> [ Set Syntax: JSON]

  1. Busque la regla que desea cambiar. Quería que los comentarios fueran visibles en movimiento, así que busqué " Comment"

    • Lo encontré en la "rules"sección
 "rules":
    [
        {
            "name": "Comment",
            "scope": "comment, punctuation.definition.comment",
            "foreground": "var(blue6)"
        },
  1. Busque la cadena "blue6":para encontrar la sección de definiciones de variables de color. Lo encontré en la "variables"sección.

  2. Elija un nuevo color con una herramienta como http://hslpicker.com/ .

  3. Defina una nueva variable de color o sobrescriba la configuración de color para blue6.

    • Advertencia: la sobrescritura blue6afectará a todos los demás elementos de texto en ese esquema de color que también usan blue6 ("Puntuación" "Accesor").
  4. Guarde su archivo, los cambios se aplicarán instantáneamente a los archivos / pestañas abiertos.

NOTAS

Sublime manejará cualquiera de estos estilos de color. Posiblemente más.

hsla = tono, saturación, luminosidad, alfa rgba = rojo, verde, azul, alfa

hsla (151, 100%, 41%, 1) - el último parámetro es el nivel alfa (transparencia) 1 = opaco, 0.5 = semitransparente, 0 = completamente transparente

hsl (151, 100%, 41%) - sin canal alfa

rgba (0, 209, 108, 1) - rgb con canal alfa

rgb (0, 209, 108) - sin canal alfa

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.