web-dev-qa-db-fra.com

Guide de mise en évidence de la syntaxe pour Atom

Je suis très heureux avec le nouveau rédacteur en chef de Github. Malheureusement, il n'est pas facile de le personnaliser. Je voulais créer mon propre thème de mise en évidence de la syntaxe, car je ne suis pas satisfait des options disponibles pour le téléchargement (au moins, ils ne semblent pas bien fonctionner avec Java).

Maintenant, les fichiers (variables de syntaxe, color.less, etc.) à styler semblent être dans:

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

Le problème est simplement que je ne sais pas quelles classes (CSS) stylent quels éléments de la syntaxe. Y at-il un endroit où je peux chercher comment changer la couleur, par exemple, des déclarations de type variable?

editorcustomizationsyntax-highlightingatom-editor
16
TomTom

Oui, vous pouvez démarrer Atom en mode développeur à l'aide de la commande atom --dev ou du menu View > Developer > Open in Dev Mode .... Lorsque vous le faites, vous pouvez cliquer avec le bouton droit sur n’importe quel élément de l’UI et sélectionner Inspect Element dans le menu contextuel, comme vous le feriez dans votre navigateur Web.

De plus, pour les éléments de syntaxe, vous pouvez:

  1. Placez votre curseur de texte sur l'élément que vous souhaitez styler
  2. Presse Cmd+Alt+P sur OS X, Ctrl+Alt+Shift+P sur d'autres plates-formes, ou recherchez "Editeur: Log Cursor Scope" dans la palette de commandes pour afficher les étendues de l'élément de syntaxe.

Les portées de l'élément de syntaxe se traduisent directement en classes CSS.

25
Lee

Vous pouvez utiliser chrome web console en appuyant sur Ctrl+Shift+I (testé sous Linux) et en mettant en surbrillance tout élément. Ensuite, ouvrez votre feuille de style en appuyant sur Edit->Open Your Stylesheet et ajoutez un style pour l'élément avec la syntaxe LESS.

Par exemple:

Vous voulez mettre en surbrillance la classe et le nom de la fonction. Si vous sélectionnez la classe avec console chrome, vous pouvez voir qu'elle a la classe .name

Que vous deviez ajouter dans votre fichier Stylesheet quelque chose comme ceci:

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

Et vous pouvez créer votre propre thème. Dans Atom, ce n'est pas difficile - appuyez sur Ctrl+Shift+P et tapez "Generate Syntax Theme". Dans le nouveau thème, vous pouvez copier du code d’un autre thème. Si vous ne connaissez pas CSS/LESS - ne vous inquiétez pas! Votre nouveau thème contient un fichier dans le dossier style nommé colors.less. Vous pouvez le changer ou écrire une nouvelle règle de couleur sur le fichier base.less.

Atom a génial doc, vous pouvez lire sur la création de thème dans cette page https://atom.io/docs/v1.4.2/hacking-atom-creating-a-theme

6
Denis Savenko

Pour les autres qui viennent ici parce que la mise en surbrillance d'un type de fichier n'est pas reconnue pour votre langue:

  • ouvrez le fichier ~/.atom/config.cson (par CTRL + SHIFT + p: tapez `'open config' ')

  • ajoutez/modifiez une section customFileTypes sous core, par exemple, comme suit:

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

(Vous trouvez les noms de domaine de langues ("source.lua", "text.html.php" ...) dans les paramètres de package de langue voir ici

1
rubo77