Code Block Hilfsfunktionen

Die code_block Komponente zeigt Quellcode mit Syntaxhervorhebung an. Sie unterstützt nahezu alle gängigen Programmiersprachen und verfügt über eine Schaltfläche zum Kopieren in die Zwischenablage.

WCAG AA
JavaScript

Funktionen

  • Syntaxhervorhebung: Sprachabhängige Code-Einfärbung.

  • Kopieren-Schaltfläche: Mit einem Klick in die Zwischenablage kopieren.

  • Sprachunterstützung: Die gängigsten sowie viele weniger verbreitete Programmiersprachen.

  • Zeilennummern: Optionale Anzeige von Zeilennummern.

JS

Verwendung

Um die Komponente zu verwenden, muss lediglich ein HTML-Tag vorzugsweise ein <div> eingefügt werden. Das Element muss das Attribute data-insight-code-block besitzen, dessen Wert die gewünschte Programmiersprache ist. Innerhalb des Tags befindet sich dann ausschließlich der darzustellende Quellcode.

<div id="code" data-insight-code-block="javascript"> function greet(name) { return `Hello, ${name}!`; } </div>

Parameter

Laden…
Name Typ Beschreibung Standardwert Erforderlich
id str

Optionale, eindeutige Tag-ID für die Identifizierung des Elements im JavaScript.

 '' False
data-insight-code-block str

Identifiziert dieses Objekt als Code Block und die darin verwendete Sprache.

 '' False
data-filename str

Zeigt den Text als Hinweis für den Nutzer in der Kopfzeile des Code Blocks an.

 '' False

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Die Komponente ist mit der Tastatur bedienbar.

  • Der „Kopieren“ Button enthält neben dem Symbol einen beschreibenden Text („Kopieren“).

  • Das SVG-Symbol „Kopieren“ verfügt über die Eigenschaft aria-hidden='true', da es rein dekorativ ist.

  • Nach dem Kopieren wird eine visuelle Rückmeldung angezeigt („kopiert“ wird kurzzeitig eingeblendet).

Verwandte Themen

  • Keine verwandten Komponenten vorhanden.