Construisez votre propre thème atome avec CSS

Atom, cet "éditeur de texte personnalisé" du 21e siècle est devenu le premier choix pour des milliers de développeurs à travers le monde. Il est facile à développer et à personnaliser le rend populaire. Les développeurs partagent de nouvelles fonctionnalités avec la communauté Atom en publiant des forfaits et des thèmes d'extension. Après avoir lu cet article, vous pourrez publier votre propre thème de grammaire Atom - une excellente première étape pour vous lancer dans votre parcours de personnalisation des atomes!

Court examen des points clés

• Atom est un éditeur de texte personnalisable qui permet aux développeurs de créer et de partager leurs propres thèmes de syntaxe à l'aide de CSS.
• Créer un thème de syntaxe, vous devez d'abord télécharger l'éditeur de texte Atom, puis utiliser la fonction de génération automatique pour créer un package de thème de syntaxe.
• L'atome utilise moins (un superset de CSS) pour style, y compris des fonctions telles que les variables, les styles imbriqués et les opérateurs. Après avoir changé le thème, rechargez la fenêtre de l'atome pour afficher l'effet.
• Une fois le thème créé et affiné, il peut être partagé avec la communauté Atom via le Gestionnaire de packages Atom (APM).

Qu'est-ce qu'un thème grammatical?

Le thème de syntaxe est utilisé pour styliser les zones de texte / code de l'éditeur. Le thème de l'interface est utilisé pour définir d'autres aspects de l'éditeur de texte Atom (tels que la barre latérale, la barre d'état, l'onglet, etc.). Cet article ne se concentre que sur la création de sujets de grammaire, il suffit de avoir la connaissance de base du CSS.

Guide du débutant

Téléchargez simplement l'éditeur de texte Atom et commencez! Atom utilise moins, ce qui est un superset de CSS avec des caractéristiques pratiques telles que les variables.

Générer le package de thème de grammaire d'atomes

La création d'un thème grammatical était autrefois une tâche fastidieuse, mais maintenant Atom a des fonctionnalités de génération automatique puissantes intégrées:

1. Ouvrez l'atome et appuyez sur CMD Shift P (en utilisant Ctrl Shift P pour Windows).
2. Entrez générer.
3. Sélectionnez l'option "Générateur de packages: Générer le thème de syntaxe".

ATOM vous invitera à choisir l'emplacement où enregistrer le package, vous pouvez choisir comme vous le souhaitez.

Nommez votre sac

ATOM ouvrira le package généré en tant que projet et vous pouvez commencer l'édition. Atom recommande que les noms de package se terminent par "-Syntax" et soient nommés en utilisant les minuscules et les traits d'union. Par exemple, j'ai nommé mon package blue-everywhere-syntax et l'ai mis sur le thème bleu.

Structure du package

La structure de package générée automatiquement est claire et facile à comprendre:

• La feuille de style principal est située dans index.less.
• Le style de base est situé dans styles/base.less et la définition de couleur se trouve dans styles/colors.less.
Les fichiers
• package.json sont utilisés pour définir le nom, la description et d'autres métadonnées du package.
• README.md Le fichier décrit votre sujet au format Markdown, si vous publiez un sujet, cette lecture sera affichée sur la page de téléchargement.

Exemple de code

Le moteur de rendu de l'atome est basé sur le chrome (Comprendre l'électron vous donne une compréhension approfondie de son fonctionnement), vous pouvez donc utiliser CSS pour les paramètres de style. Atom utilise moins, qui a des fonctionnalités pratiques telles que les variables et les importations imbriquées.

Pour voir l'effet de changement, rechargez simplement l'atome (en utilisant CMD Alt Ctrl L ou "View" & gt; "Developer" & gt; "Reload"). Dans ATOM Paramètres (CMD,) & gt; "thème", définissez le thème de syntaxe de l'éditeur sur le thème nouvellement créé.

Définissez le thème sur le bleu

Ouvrez le fichier colors.less (styles & gt; colors.less). Vous pouvez voir une variable nommée @very-dark-gray avec une valeur de #1d1f21. Changez-le en bleu foncé #1d1f33. Recharger l'atome (CMD Alt Ctrl l ou "View" & gt; "développeur" & gt; "recharger"). La couleur d'arrière-plan de la zone de texte aurait dû être modifiée.

Explication du code détaillé

index.less import base.less. base.less similaire à CSS, moins la variable (en commençant par le symbole @) est utilisée.

L'éditeur La couleur de l'arrière-plan est définie par le code suivant:

<code class="language-less">@import "syntax-variables";

atom-text-editor, :host {
  background-color: @syntax-background-color;
}</code>

@syntax-background-color Définition dans syntax-variables.less:

<code class="language-less">@import "colors";

// ...

@syntax-background-color: @very-dark-gray;</code>

@very-dark-gray est défini dans colors.less, c'est pourquoi nous modifions la valeur colors.less dans @very-dark-gray pour modifier la couleur d'arrière-plan de l'éditeur.

Organisation de feuille de style

La façon dont les variables de feuille de style sont organisées dépend de la préférence personnelle. Le modèle généré automatiquement de l'ATOM recommande le regroupement des éléments avec la même couleur, en utilisant des variables de syntaxe dans base.less et en attribuant des valeurs à chaque variable dans syntax-variables.less. Mais la couleur peut également être définie directement dans base.less.

Style avancé

En plus des variables et des importations, moins a d'autres fonctionnalités:

1. style imbriqué
2. et opérateur

Style imbriqué

moins prend en charge les styles imbriqués. Par exemple:

<code class="language-less">.container {
  .red-block {
    a {
      color: red;
    }
  }
}</code>

Cela équivaut à:

<code class="language-less">a.container .red-block {
  color: red;
}</code>

et opérateur

Le

& l'opérateur simplifie le sélecteur parent.

Nom de la variable bleue

Définissez tous les noms de variables sur le bleu foncé et ajoutez des traits de soulignement lors de la volonté:

Atom ajoute automatiquement les classes .variable à toutes les variables de l'éditeur de code. Par conséquent, nous devons modifier le style de la classe .variable:

<code class="language-less">.variable {
  color: #336699;
  &:hover {
    text-decoration: underline;
  }
  // ...
}</code>

Numéro de ligne actuel

Définissez le numéro de ligne actuel sur Blue:

Ajouter colors.less dans @deep-sky-blue: #009ACD;. Utilisez cette couleur dans base.less:

<code class="language-less">.gutter {
  // ...

  .line-number {
    &.cursor-line {
      background-color: @syntax-gutter-background-color-selected;
      color: lighten(@deep-sky-blue, 10%);
    }

    &.cursor-line-no-selection {
      color: @deep-sky-blue;
    }
  }
}</code>

Résumé

Avec des exemples simples et des bases CSS, nous avons créé un tout nouveau thème de syntaxe atomique. Vous pouvez continuellement améliorer votre thème et le partager avec le monde via Atom Package Manager (APM).

Ressources

1. Fonction de fonctionnement des couleurs en moins
2. Publier le thème de l'atome
3. Manuel d'utilisation de l'atome

FAQ

(La section FAQ dans le texte d'origine est omise ici car ces questions ne correspondent pas aux objectifs pseudo-originaux du sujet et sont plus longs.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!