Code Element

Mit dem Wert code für type in {value} können Sie ein Quelltext Element einbinden. Dies ist der selbe Editor wie der globale Datei Editor. Dieses kennt zudem folgende Parameter:

  • theme: Das verwendete Design (Standard: monokai, eine Liste aller Themes finden Sie auf der offiziellen Webseite).
  • mode: Verwendete Sprache (Standard: HTML).
  • label: Angezeigte Sprache (Standard: der Wert aus mode).
  • min: Minimale Anzahl an angezeigten Zeilen (Standard: 3).
  • max: Maximale Anzahl an angezeigten Zeilen (bei mehr erscheint ein Scrollbalken, Standard: 20).
  • languages: Eine (kommaseparierte) Liste an bekannten Sprachen, zwischen denen im Editor Modus gewechselt werden kann (Standard: leer, und damit keine).

Beispiel:

{value var="code1" type="code" title="Quelltext" languages="HTML,PHP,Smarty"}

Die Liste aus languages kann alternativ auch ein Array sein. So ist es möglich für die angezeigte Sprache einen anderen Wert zu verwenden, als technisch erwartet wird. Beispiel:

{value var="code1" type="code" title="Quelltext" languages.html="Standard HTML" languages.php="PHP für Einsteiger" languages.smarty="Template Engine Smarty"}

Das generierte HTML bietet Ihnen die Möglichkeit über das CSS Ihres Designs die verwendete Sprache hervorzuheben. Dafür wird das Attribut data-label im code Element gesetzt und kann z.B. so angezeigt werden:

code[data-label]::before {
    content: attr(data-label);
    position: absolute;
    z-index: 1000;
    top: 0;
    right: 16px;
    padding: 5px 10px;
    font-size: 14px;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0 0 8px 8px;
}