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:

Parameter-Name	Typ	Erforderlich	Beschreibung
theme	String	Nein	Das verwendete Design (Standard: merbivore, eine Liste aller Themes finden Sie auf der offiziellen Webseite).
mode	String	Nein	Verwendete Sprache (Standard: HTML).
font_size	String	Nein	Verwendete Schriftgröße (Standard: 16).
label	String	Nein	Angezeigte Sprache (Standard: der Wert aus mode).
min	String	Nein	Minimale Anzahl an angezeigten Zeilen (Standard: 3).
max	String	Nein	Maximale Anzahl an angezeigten Zeilen (bei mehr erscheint ein Scrollbalken, Standard: 20).
languages	String	Nein	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;
}