Hauptinhalt

Code-Highlight

letzte Aktualisierung der Seite: Version 2.17.1

JavaScript-Einbindung

Quellcode

window.additionalComponent.load('codehighlight', {
    el: '[data-component="51684684964"]'
});

Parameter und Attribute

Funktionsaufruf - Zeile 1:

Name Bedeutung Werte Obligatorisch
data-component Selector des HTML-Knotens, an dem die Code-Highlight-Komponente initialisiert wird. textuell, frei definierbar JA

 

HTML-Einbindung

Quellcode

<pre
    class="brush: js" 
    data-component="617816787" 
    data-highlight-add="1;2" 
    data-highlight-remove="3">
window.additionalComponent.load(
    'gallery', {el: '[data-component="523525"]'}
);
</pre>

Erläuterung

  • Die Umrahmung des Quellcodes mittels pre-Tag (Zeile 1 bis Zeile 6) sorgt dafür, dass vorgegebene Formatierungen beibehalten werden
  • Von Zeile 2 bis Zeile 5 wird das Aussehen des Quellcodes, das Highlighting, definiert
  • Von Zeile 6 bis Zeile 8 wird der anzuzeigende Quellcode angegeben. Ein Zeilenumbruch nach dem code-Tag in Zeile 2 hätte zur Folge, dass die erste Zeile als Leerzeile angezeigt würde. HTML- und XML-Tags müssen codiert angegeben. Ein Tag wie <br /> muss zur korrekten Darstellung wie folgt angegeben werden &lt;br /&gt;

Parameter und Attribute

CODE-Tag - Zeile 2:

Name Bedeutung Werte Obligatorisch
class

Beschreibt wie der Quellcode durch die Code-Highlight-Komponente dargestellt werden. Zur Auswahl der darzustellenden Sprach ist einer der folgenden Werte zu verwenden: brush: js, brush: css, brush: html.

 alphanumerischer Wert JA
data-component

Dient der Identifikation mittels JavaScript und muss dem Wert data-component aus dem JavaScript-Code entsprechen.

 alphanumerischer Wert JA
data-highlight-add

Beschreibt welche Zeilen der Quellcode-Darstellung als "hinzugefügt" markiert werden soll. Der Wert wird durch ein Semikolon separiert.

 alphanumerischer Wert NEIN
data-highlight-remove

Beschreibt welche Zeilen der Quellcode-Darstellung als "entfernt" markiert werden soll. Der Wert wird durch ein Semikolon separiert.

 alphanumerischer Wert NEIN
zurück zum Seitenanfang