Dynamisches Syntax-Highlighting

Dynamisches Syntax-Highlighting hebt Code hervor, den man ändern kann. Das passiert an genau einer Stelle: im Online-Editor.

Note

Code-Schnipsel, Iterationen und Ähnliches sind statisch, da man den Code nicht spontan ändern kann. Wenn du mehr darüber erfahren möchtest, wie wir mit statischem Syntax-Highlighting umgehen, schau dir die Dokumentation zum statischen Syntax-Highlighting an.

Implementierung

Für das dynamische Syntax-Highlighting nutzen wir die CodeMirror-Bibliothek.

Wenn du Unterstützung für deine Sprache hinzufügst, hast du drei Möglichkeiten:

  1. Die Sprache wird von CodeMirror von Haus aus unterstützt (d. h. sie ist als unterstützte Sprache aufgeführt). Dann geht es weiter mit dem Abschnitt Sprache aktivieren.
  2. Die Sprache wird über ein vorhandenes CodeMirror-Plugin unterstützt. Dann geht es weiter mit dem Abschnitt Ein vorhandenes Plugin verwenden.
  3. Die Sprache wird nicht unterstützt. Dafür gibt es nun drei Möglichkeiten:
    1. Schreibe ein CodeMirror-Plugin von Grund auf, wie im Abschnitt Ein neues Plugin erstellen beschrieben.
    2. Die Syntax deiner Sprache ähnelt (stark) der Syntax einer anderen Sprache (z. B. ähnelt die Syntax von Unison der von Haskell). Dann kannst du darüber nachdenken, das Syntax-Highlighting dieser Sprache für deine Sprache zu verwenden. Mehr dazu im Abschnitt Sprache aktivieren.
    3. Auf dynamisches Syntax-Highlighting verzichten.

Sprache aktivieren

Um CodeMirror-Unterstützung für deine Sprache zu aktivieren, eröffne ein Thema im Forum. Wir (Exercism) erstellen dann einen Pull Request, der die CodeMirror-Unterstützung für deine Sprache auf der Website aktiviert.

Ein vorhandenes Plugin verwenden

Um ein vorhandenes Plugin zu verwenden, muss es auf NPM veröffentlicht sein.

Wenn das Plugin nicht auf NPM veröffentlicht ist, hast du folgende Möglichkeiten:

  1. Frage die Person, die das Plugin geschrieben hat, ob sie es auf NPM veröffentlichen möchte.
  2. Forke das Repository und veröffentliche es selbst.
  3. Lass uns (Exercism) das Repository forken, und wir veröffentlichen es. Eröffne dazu ein Thema im Forum mit dieser Bitte.
Note

Die CodeMirror-Website hat eine Liste von Sprach-Plugins aus der Community.

Als Nächstes musst du die Sprache aktivieren.

Ein neues Plugin erstellen

So legst du los:

  1. Prüfe unsere Repository-Liste auf ein bereits vorhandenes codemirror-lang-..., um sicherzugehen, dass es noch keins gibt.
  2. Eröffne ein neues Thema im Exercism-Forum und sag uns, für welche Sprache du ein CodeMirror-Plugin erstellen möchtest.
  3. Sobald für dich ein CodeMirror-Plugin-Repo erstellt wurde, implementiere die Grammatik für deinen Track.
Note

Damit du gut starten kannst, enthält das für dich erstellte Repo eine minimale Beispiel-Grammatik, auf der du aufbauen und die du anpassen kannst.

Wir haben eine unglaublich freundliche und hilfsbereite Community, die dir gerne zur Seite steht, während du dich hier durcharbeitest! Wenn du nicht weiterkommst, eröffne nach Bedarf ein neues Thema im Exercism-Forum oder erstelle neue Issues in exercism/exercism 🙂

Danach veröffentlichst du das Plugin auf NPM. Als Nächstes musst du die Sprache aktivieren.

Eine andere Sprache verwenden

Die Syntax deiner Sprache ähnelt (stark) der Syntax einer anderen Sprache. In diesem Fall kannst du das Syntax-Highlighting dieser Sprache für deine Sprache verwenden. Konfiguriere dazu den Track mit dem CodeMirror-Plugin der anderen Sprache. Mehr dazu im Abschnitt Sprache aktivieren.