Abschnittsübersicht

◄H5P anzeigen
►Multimedia-Plugins

  • Standardeinstellung: Deaktiviert

    Syntax meint hier vor allem (Programm-) Code. Zur Darstellung von verschiedenem Code gehört - neben u.a. Monospace-Schritfart und Einrückungen auch oft eine farbige Kennzeichnung (Highlighting) verschiedener Bestandteile des Codes. So werden z.B. Parameter, Werte, Variablen und Tags jew. mit anderer Schriftfarbe gekennzeichnet:

    <h1>Headline</h1>
    <p>Paraghraph with <a href="#linktarget" target="_blank">hyperlink</a>.</p>

    • HTML:
      <h1>heading</h1>
      <p>paragraph</p>
      <ul>
        <li>list item</li>
        <li>list item</li>
      </ul>
      CSS:
      #id-selector {
        attribute:value;
      }

      .class-selector {
        attributeA:valueA;
        attributeB:valueB;
      }
      JavaScript:
      <?php
        $txt = "Hello world!";
        $x = 5;
        $y = 10.5;

        echo $txt;
        echo "<br>";
        echo $x;
        echo "<br>";
        echo $y;
      ?>
      jQuery:
      $(document).ready(function() {
          // comment
          $('#button').click(function() {
              $(this).toggleClass('active');
              alert('button clicked!');
          });
      });
      C++:
      #include <iostream>
      using namespace std;

      int main() {
        int number;

        cout << "Enter an integer: ";
        cin >> number;

        cout << "You entered " << number;    
        return 0;
      }
    • pre-code-Kombination für den Syntax Highlighting-Filter

      Der Filter Syntax Highlighting arbeitet in allen vorformatierten Textbereichen (HTML-Element <pre>), die zusätzlich mind. einen <code>-Tag beinhalten.

      Um so ein <pre><code>...</code></pre>-Element zu erzeugen, in dem der Filter greift, steht im Atto-Editor im Dropdown "Templates4U" der Eintrag "Code-Highlighting" zur Verfügung:

      Wenn der Filter aktiviert ist, werden verschiedene (Programmier-) Sprachen innerhalb des <pre><code>-Blocks automatisch erkannt und entsprechend eingefärbt (s. Beispiele oben).

      Hinweis:
      Das Code-Highlighting wird erst sichtbar, wenn die Editor-Eingabe einmal gespeichert wurde.

    • Alle Arten von Code-Darstellung hier einmal im Vergleich:

      Vorformatierter Text (<pre>)
      Das hier ist ein <pre>-Element,
      meint also einen - auch mehrzeiligen -
      Code-Bereich ("Block"-Element).

      Für vorformatierten Text steht im Atto-Editor im Dropdown "Absatzformate" der Eintrag "Vorformatiert" zur Verfügung:


      Inline-Code (<code>)

      Das hier ist ein Beispiel für ein <code>-Element, es kann innerhalb einer Zeile funktionieren ("Inline"-Element).

      Mehrzeiliger Code ohne <pre>
      sieht dagegen etwas schräg aus...

      Um einen Textteil als Code zu kennzeichnen, steht im Atto-Editor im Dropdown "Gestaltungsvorlagen" der Eintrag "Code" zur Verfügung:

      Code-Highlighting (<pre><code> + Filter)

      Bei aktiviertem Filter und entsprechender Einbindung sieht "gehighlighteter" Code so aus:

      <h1>Headline</h1>
      <p>Paraghraph with <a href="#linktarget" target="_blank">hyperlink</a>.</p>

      Wie oben erwähnt, gibt es dafür ein Template:


◄H5P anzeigen
►Multimedia-Plugins