Aktuelle Hinweise des Moodle-Teams

Schönerer Code mit Syntax Highlighting verfügbar

Schönerer Code mit Syntax Highlighting verfügbar

by Andreas Kempka -
Number of replies: 0

Liebe Moodle-Nutzer*innen,

ab sofort steht für Sie wahlweise eine optische Hervorhebung von Quellcode-Beispielen in Moodle bereit.

Was ist Syntax Highlighting?

Syntax Highlighting (dt. Syntaxhervorhebung) dient der optischen Hervorhebung von Programmcode, um diesen lesbarer und verständlicher zu gestalten. Die Syntax eines Programmcodes wird dabei automatisch nach bestimmten Regeln formatiert, damit Sie sich auf die Eingabe konzentrieren können und die Gestaltung einheitlich ausfällt.

Am folgenden Beispiel sehen Sie die automatische Hervorhebung in Aktion:

#include 

int main(void) {
        printf("Hello World\n");
        return 0;
}

Mehr Informationen: siehe Syntaxhervorhebung – Wikipedia.

Wie aktiviere ich Syntax Highlighting?

Damit Syntax Highlighting aktiv ist, müssen zwei kleine Schritte unternommen werden. Auf diese Weise soll sichergestellt werden, dass Sie die Kontrolle haben, ob sie die Hervorhebung einsetzen möchten oder nicht.

  1. Aktivieren Sie den Filter
  2. Formatieren Sie Ihren Code 

Wie aktiviere ich den Filter?

  1. Wechseln Sie in den Bearbeitungsmodus in Moodle (als Betreuer/in)
  2. Sie können den Filter für den ganzen Kurs, für einzelne Abschnitte oder Aktivitäten aktivieren. Klicken Sie das Zahnrad oben rechts an, um die Einstellungen (des Kurses, der Aktivität, des Abschnitts) zu aktivieren.
  3. Wählen Sie den Punkt "Filter" im Menü, das sich zu den Einstellungen öffnet.
  4. Schalten Sie den Filter "SynHi" (Syntax Highlighting) an:
    image%20%281%29.png
  5. Speichern Sie Ihre Änderungen

Wie formatiere ich den Code?

Damit Quellcode optisch hervorgehoben wird, müssen Sie Quellcode als solchen kennzeichnen. Hierzu existieren mehrere alternative Wege:

Markieren Sie Code mit dem Absatzformat "vorformatiert"

Dies funktioniert am besten mit einzeiligem Code.

  1. Fügen Sie Ihren Quellcode ohne Formatierung in den Moodle-Texteditor (im Forum, im Quiz, im Kurs) ein
  2. Markieren Sie den Code und wählen unter "Absatzformate" das Format "Vorformatiert:  aus
    Atto-Editor Formatvorlage vorformatiert
    Dadurch wird der HTML-Code zum markierten Text zwischen <pre> ... </pre>-Tags eingebettet, die signalisieren, dass darin vorformatierter Text erscheint.
  3. Speichern Sie den Text in Moodle wie gewohnt ab.
  4. Nach dem Speichern wird der Code z. B. so angezeigt:
    SELECT title FROM books WHERE author LIKE ''%King%';
Verwenden Sie den HTML-Modus

Dies ist zu empfehlen, wenn Ihr Code Zeilenumbrüche beinhaltet oder Sie Code in der Zeile anzeigen möchten:

  1. Öffnen Sie den Editor, um Text zu bearbeiten. Klicken Sie im Editor auf die Schaltfläche "Menüleiste umschalten" , um mehr Optionen zu sehen. Klicken Sie darauf auf , um den Text als HTML-Code anzuzeigen.
  2. Fügen Sie den Programmcode an geeigneter Stelle ein.
  3. Umgeben Sie den Programmcode mit <pre> ... </pre>, um einen Codeblock mit Zeilennummern zu erzeugen:
    <pre>
    SELECT
      title
    FROM books
    WHERE
      author LIKE '%King%';
    </pre>
    
    Dies ergibt folgende Ausgabe:
    SELECT
      title
    FROM books
    WHERE
      author LIKE '%King%';
    
  4. oder: Umgeben Sie den Programmcode mit <code> ... </code>, um kurzen Code innerhalb einer Zeile anzuzeigen:
    Hier ist ein Beispiel für eine SELECT-Abfrage: SELECT title FROM books WHERE author LIKE '%King%';, die ...
    Dies ergibt folgende Ausgabe:
    Hier ist ein Beispiel für eine SELECT-Abfrage: SELECT title FROM books WHERE author LIKE '%King%';, die ...

Einschränkungen und Nebenwirkungen

Bei der Verwendung von Syntax Highlighting gibt es ein paar Dinge zu beachten:

  • Die Hervorhebung sehen Sie erst, nachdem Sie den Text gespeichert haben, d. h. nicht im Editor.
  • Überlassen Sie die Formatierung dem Filter. Dekorieren Sie nicht Teile des Codes manuell, etwa mit fetter Schrift etc. In diesem Fall wird der Text nicht formatiert, sondern nur das dahinterliegende HTML buchstabengetreu dargestellt.
  • Verwenden Sie die Hervorhebung nur für Code. Syntaxhervorhebung funktioniert nicht in Kombination mit Lückentextfragen oder Auswahlfeldern in einem Quiz bzw. Test, wenn diese in Code eingebettet sind, da stattdessen der Code für die Felder wiedergegeben wird anstatt die Felder anzuzeigen. Falls Sie möchten, dass HTML interpretiert wird, müssen Sie den code- ooder pre-Tag unterbrechen.
  • Falls Sie Probleme mit Zeilenumbrüchen etc. haben, wechseln Sie in den HTML-Modus des Moodle-Editors und achten darauf, das sich nur der Quelltext entweder zwischen <code>...</code> oder <pre>...</pre>-Tags befindet und keine weiteren HTML-Anweisungen wie <br> <p> usw. darin befinden. Fügen Sie ansonsten den Quellcode im HTML-Modus ein, damit störende Formatierungen entfernt werden.
  • Das Moodle-Kursformat "Kachel" unterstützt die Anzeige von hervorgehobenem Code derzeit nicht.