wake-up-neo.com

Syntax-Hervorhebungshandbuch für Atom

Ich bin sehr zufrieden mit dem neuen Editor von Github. Leider ist es nicht ganz einfach, es anzupassen. Ich wollte ein eigenes Syntax-Highlighting-Theme erstellen, da ich mit den zum Download verfügbaren nicht zufrieden bin (zumindest scheinen sie mit Java nicht gut zu sein).

Nun scheinen die Dateien (Syntax-Variablen, Color.less usw.), in denen style steht, zu sein:

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

Das Problem ist nur, dass ich nicht weiß, welche (CSS) Klassen welche Elemente der Syntax formatieren. Gibt es einen Ort, an dem ich nachschlagen kann, wie zum Beispiel Variablentypdeklarationen geändert werden können?

editorcustomizationsyntax-highlightingatom-editor
16
TomTom

Ja, Sie können Atom im Entwicklermodus mit dem Befehl atom --dev oder mit dem Menü View > Developer > Open in Dev Mode ... starten. Wenn Sie dies tun, können Sie mit der rechten Maustaste auf ein Element in der Benutzeroberfläche klicken und Inspect Element aus dem Kontextmenü auswählen, genau wie Sie es in Ihrem Webbrowser tun würden.

Darüber hinaus können Sie für Syntaxelemente folgende Aktionen ausführen:

  1. Stellen Sie den Textcursor auf das Element, das Sie stylen möchten
  2. Drücken Sie Cmd+Alt+P unter OS X Ctrl+Alt+Shift+P auf anderen Plattformen oder suchen Sie in der Befehlspalette nach "Editor: Log Cursor Scope", um die Bereiche des Syntaxelements anzuzeigen

Die Bereiche des Syntaxelements werden direkt in CSS-Klassen übersetzt.

25
Lee

Sie können die Chromium-Webkonsole verwenden, indem Sie Ctrl+Shift+I (getestet in Linux) drücken und ein beliebiges Element markieren. Öffnen Sie anschließend Ihr Stylesheet, indem Sie Edit->Open Your Stylesheet drücken, und fügen Sie den Stil für das Element mit der LESS-Syntax hinzu.

Zum Beispiel:

Sie möchten die Klassen- und Funktionsnamen fett hervorheben. Wenn Sie eine Klasse mit Chrom-Konsole auswählen, können Sie sehen, dass sie die Klasse .name hat.

Das sollten Sie in Ihrer Stylesheet-Datei wie folgt hinzufügen:

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

Und Sie können Ihr eigenes Thema erstellen. In Atom ist es nicht schwierig - drücken Sie Ctrl+Shift+P und geben Sie "Generate Syntax Theme" ein. In einem neuen Design können Sie Code aus einem anderen Design kopieren. Wenn Sie CSS/LESS nicht kennen - machen Sie sich keine Sorgen! Ihr neues Design hat eine Datei im style-Ordner mit dem Namen colors.less. Sie können sie ändern oder eine neue Farbregel in die Datei base.less schreiben.

Atom hat ein tolles Dokument, Sie können über das Erstellen eines Themas auf dieser Seite nachlesen https://atom.io/docs/v1.4.2/hacking-atom-creating-a-theme

6
Denis Savenko

Für andere, die hierher kommen, weil die Hervorhebung für einen Dateityp für Ihre Sprache nicht erkannt wird:

  • Öffnen Sie die ~/.atom/config.cson-Datei (mit STRG + UMSCHALT + p: Geben Sie `` open config '' ein).

  • einen customFileTypes-Abschnitt unter core hinzufügen/bearbeiten, zum Beispiel wie folgt:

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

(Sie finden die Namen der Sprachen ("source.lua", "text.html.php" ...) in den Sprachpaketeinstellungen siehe hier )

1
rubo77