Code

Quick Reference

Schnellreferenz: Die wichtigsten Syntaxen für Code-Highlighting.

Sprache	Class Name	HTML Syntax
JavaScript	`language-javascript` oder `language-js`	`<pre><code class="language-js">...</code></pre>`
HTML	`language-html`	`<pre><code class="language-html">...</code></pre>`
CSS	`language-css`	`<pre><code class="language-css">...</code></pre>`
PHP	`language-php`	`<pre><code class="language-php">...</code></pre>`
Python	`language-python` oder `language-py`	`<pre><code class="language-python">...</code></pre>`
Auto-Detection	Keine Klasse nötig	`<pre><code>...</code></pre>`

Best Practices

Empfohlen

Verwende immer <pre><code> für Code-Blöcke
Gib die Sprache explizit an für bessere Performance
Escape HTML-Zeichen in Code-Beispielen
Nutze semantische HTML5-Struktur
Kombiniere mit Bootstrap Utilities für Layout
Teste auf verschiedenen Bildschirmgrößen

Vermeiden

Keine <code> ohne <pre> für Blöcke
Vermeide Auto-Detection bei bekannten Sprachen
Nicht escapen führt zu Parsing-Fehlern
Keine Custom CSS für Syntax-Farben
Überlade nicht mit zu langen Code-Blöcken
Vergiss nicht die Accessibility

Grundlagen

highlight.js ist automatisch in unser Webpack-System integriert und erkennt Code-Blöcke automatisch bei Seitenaufruf.

Standard HTML5 Syntax

Die Basis aller Code-Blöcke folgt dem HTML5-Standard:

<pre><code class="language-javascript">
function helloWorld() {
    console.log('Hello, World!');
    return true;
}
</code></pre>

Resultat:

function helloWorld() {
    console.log('Hello, World!');
    return true;
}

Automatische Erkennung

Ohne Sprachklasse versucht highlight.js die Sprache automatisch zu erkennen:

<pre><code>
const myArray = [1, 2, 3];
myArray.forEach(item => console.log(item));
</code></pre>

Resultat (Auto-Detection):

const myArray = [1, 2, 3];
myArray.forEach(item => console.log(item));

Unterstützte Sprachen

Unser System unterstützt die wichtigsten Programmier- und Markup-Sprachen.

Web-Technologien

Sprache	Klasse	Alias	Beispiel
HTML	`language-html`	`language-xml`	Markup, Templates
CSS	`language-css`	-	Stylesheets, SCSS
JavaScript	`language-javascript`	`language-js`	ES6+, Node.js
TypeScript	`language-typescript`	`language-ts`	Angular, React
JSON	`language-json`	-	APIs, Config

Backend-Sprachen

Sprache	Klasse	Alias	Verwendung
PHP	`language-php`	-	Web Development
Python	`language-python`	`language-py`	Data Science, Web
Java	`language-java`	-	Enterprise Apps
C#	`language-csharp`	`language-cs`	.NET Development
SQL	`language-sql`	-	Datenbank Queries

Beispiele verschiedener Sprachen

CSS Beispiel

.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(6, 1fr);
    }
}

PHP Beispiel

<?php
class DatabaseConnection {
    private $pdo;
    
    public function __construct($dsn, $username, $password) {
        $this->pdo = new PDO($dsn, $username, $password);
        $this->pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    }
    
    public function query($sql, $params = []) {
        $stmt = $this->pdo->prepare($sql);
        $stmt->execute($params);
        return $stmt->fetchAll(PDO::FETCH_ASSOC);
    }
}
?>

Python Beispiel

import pandas as pd
from sklearn.model_selection import train_test_split

def prepare_data(dataframe, target_column):
    """
    Bereitet Daten für Machine Learning vor
    """
    X = dataframe.drop(target_column, axis=1)
    y = dataframe[target_column]
    
    X_train, X_test, y_train, y_test = train_test_split(
        X, y, test_size=0.2, random_state=42
    )
    
    return X_train, X_test, y_train, y_test

Responsive Verhalten

Code-Blöcke sind automatisch responsive und funktionieren mit unserem Grid-System.

Standard responsive Code-Block

Mobile ansicht (1 Spalte):

// Kurzer Code für Mobile
const mobile = true;
console.log('Mobile View');

Desktop Ansicht (2 Spalten):

// Längerer Code für Desktop
const desktop = {
    width: 1200,
    responsive: true
};
console.log('Desktop View');

<div class="grid grid-cols-1 grid-lg-cols-2 gap-4">
    <div>
        <pre><code class="language-javascript">
// Mobile Code
        </code></pre>
    </div>
    <div>
        <pre><code class="language-javascript">
// Desktop Code
        </code></pre>
    </div>
</div>

Horizontal Scrolling bei langen Zeilen

// Diese sehr lange Zeile wird horizontal scrollbar wenn sie die Container-Breite überschreitet
const sehrLangeVariableName = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";

Bootstrap Integration

Code-Highlighting funktioniert seamless mit allen Bootstrap-Komponenten und Utilities.

Mit Bootstrap Cards

JavaScript Beispiel

function initializeApp() {
    const config = {
        api: '/api/v1',
        timeout: 5000
    };
    
    return new App(config);
}

CSS Beispiel

.card {
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.card-header {
    background: var(--bs-primary);
    color: white;
}

<div class="card">
    <div class="card-header">
        <strong>Code Titel</strong>
    </div>
    <div class="card-body p-0">
        <pre class="mb-0"><code class="language-javascript">
// Dein Code hier
        </code></pre>
    </div>
</div>

Mit Bootstrap Tabs

<div class="grid grid-cols-3 gap-4">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
</div>

.card {
    padding: 1rem;
    background: white;
    border-radius: 0.5rem;
}

document.querySelectorAll('.card').forEach(card => {
    card.addEventListener('click', () => {
        console.log('Card clicked');
    });
});

<!-- Bootstrap Tabs mit Code Highlighting -->
<ul class="nav nav-tabs" id="codeTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="html-tab" data-bs-toggle="tab" 
                data-bs-target="#html" type="button" role="tab">HTML</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="css-tab" data-bs-toggle="tab" 
                data-bs-target="#css" type="button" role="tab">CSS</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="js-tab" data-bs-toggle="tab" 
                data-bs-target="#js" type="button" role="tab">JavaScript</button>
    </li>
</ul>

<div class="tab-content" id="codeTabContent">
    <div class="tab-pane fade show active" id="html" role="tabpanel">
        <pre><code class="language-html">
&lt;div class="grid grid-cols-3 gap-4"&gt;
    &lt;div class="card"&gt;Card 1&lt;/div&gt;
    &lt;div class="card"&gt;Card 2&lt;/div&gt;
    &lt;div class="card"&gt;Card 3&lt;/div&gt;
&lt;/div&gt;
        </code></pre>
    </div>
    
    <div class="tab-pane fade" id="css" role="tabpanel">
        <pre><code class="language-css">
.card {
    padding: 1rem;
    background: white;
    border-radius: 0.5rem;
}
        </code></pre>
    </div>
    
    <div class="tab-pane fade" id="js" role="tabpanel">
        <pre><code class="language-javascript">
document.querySelectorAll('.card').forEach(card => {
    card.addEventListener('click', () => {
        console.log('Card clicked');
    });
});
        </code></pre>
    </div>
</div>

💡 Tipp: Verwende eindeutige IDs für mehrere Tab-Gruppen auf derselben Seite. Ersetze codeTab durch codeTab1, codeTab2 etc.

Utility-Klassen Kombination

Zweck	Bootstrap Utilities	Code Beispiel
Rounded Corners	`.rounded, .rounded-3`	`<pre class="rounded"><code>...</code></pre>`
Shadow	`.shadow, .shadow-sm`	`<pre class="shadow-sm"><code>...</code></pre>`
Margin/Padding	`.p-3, .m-2, .mx-auto`	`<pre class="p-3 mx-auto"><code>...</code></pre>`

Praktische Beispiele

Vollständiges HTML-Dokument

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid System Demo</title>
    <link href="bootstrap.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="grid grid-cols-12 gap-4">
            <header class="col-span-12">
                <h1>Meine Website</h1>
            </header>
            <main class="col-span-8">
                <p>Hauptinhalt hier</p>
            </main>
            <aside class="col-span-4">
                <p>Sidebar hier</p>
            </aside>
        </div>
    </div>
</body>
</html>

API Integration Beispiel

// Modern Fetch API mit async/await
async function fetchUserData(userId) {
    try {
        const response = await fetch(`/api/users/${userId}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${getAuthToken()}`
            }
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const userData = await response.json();
        
        // Update UI mit Grid System
        updateUserProfile(userData);
        
        return userData;
        
    } catch (error) {
        console.error('Fehler beim Laden der Benutzerdaten:', error);
        showErrorMessage('Daten konnten nicht geladen werden.');
    }
}

function updateUserProfile(user) {
    const profileContainer = document.querySelector('.user-profile');
    profileContainer.innerHTML = `
        <div class="grid grid-cols-1 grid-md-cols-2 gap-4">
            <div class="card">
                <div class="card-body">
                    <h5>${user.name}</h5>
                    <p>${user.email}</p>
                </div>
            </div>
        </div>
    `;
}

SCSS/CSS Erweiterte Beispiele

/* Custom Grid Erweiterungen */
.grid-custom {
    display: grid;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: 1rem;
}

/* Responsive Grid Areas */
@media (max-width: 768px) {
    .grid-custom {
        grid-template-areas: 
            "header"
            "main"
            "sidebar"
            "footer";
        grid-template-columns: 1fr;
    }
}

/* Grid Item Placement */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* Bootstrap Integration */
.grid-custom .card {
    background: var(--bs-light);
    border: 1px solid var(--bs-border-color);
    transition: transform 0.2s ease-in-out;
}

.grid-custom .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--bs-box-shadow-lg);
}

Troubleshooting

Häufige Probleme und Lösungen

Code wird nicht hervorgehoben

Mögliche Ursachen:

Falsche HTML-Struktur: Verwende <pre><code>
JavaScript nicht geladen: Prüfe Webpack-Integration
Unbekannte Sprache: Verwende unterstützte Sprach-IDs

Lösung:

                                        
<!-- Korrekt -->
<pre><code class="language-javascript">console.log('Hello');</code></pre>

<!-- Falsch -->
<code class="language-javascript">console.log('Hello');</code>

HTML-Zeichen werden falsch dargestellt

Problem: HTML-Tags werden als HTML interpretiert statt als Text angezeigt.

Lösung: HTML-Zeichen müssen escaped werden:

<!-- Korrekt -->
<pre><code class="language-html">&lt;div class="container"&gt;&lt;/div&gt;</code></pre>

<!-- Falsch -->
<pre><code class="language-html"><div class="container"></div></code></pre>

Zeichen	HTML Entity	Escaped
<	`<`	<
>	`>`	>
&	`&`	&
"	`"`	"

Code-Block bricht Layout

Problem: Lange Code-Zeilen überlaufen Container oder brechen responsive Design.

Lösungen:

Verwende Bootstrap Utility .overflow-auto
Kombiniere mit Grid für responsive Layout
Setze maximale Breite mit .mw-100

<!-- Responsive Code Block -->
<div class="col-span-12 col-md-span-8">
    <pre class="overflow-auto mw-100"><code class="language-javascript">
// Sehr lange Zeile die horizontal scrollbar wird
const sehrLangeVariableName = "Lorem ipsum dolor sit amet consectetur adipiscing elit";
    </code></pre>
</div>

Performance bei vielen Code-Blöcken

Problem: Seite lädt langsam bei vielen Code-Beispielen.

Optimierungen:

Gib Sprachen explizit an (keine Auto-Detection)
Verwende Lazy Loading für große Code-Blöcke
Teile sehr lange Dokumentationen auf mehrere Seiten auf

// Performance Optimierung
document.addEventListener('DOMContentLoaded', function() {
    // Nur sichtbare Code-Blöcke initial highlighten
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                hljs.highlightElement(entry.target);
                observer.unobserve(entry.target);
            }
        });
    });
    
    document.querySelectorAll('pre code:not(.hljs)').forEach(block => {
        observer.observe(block);
    });
});

Debug-Tipps

Entwickler-Tools nutzen:

Prüfe Console auf JavaScript-Fehler
Inspiziere HTML-Struktur der Code-Blöcke
Teste verschiedene Sprach-IDs
Validiere HTML-Escaping

Webpack Integration prüfen

// Debug: Prüfe ob highlight.js geladen ist
console.log('highlight.js version:', hljs.versionString);
console.log('Geladene Sprachen:', hljs.listLanguages());

// Manuell highlighten testen
document.querySelectorAll('pre code').forEach((block) => {
    console.log('Highlighting block:', block);
    hljs.highlightElement(block);
});

Kontakt & Support

Bei weiteren Problemen:

Frontend-Team kontaktieren
Bug-Report im Issue Tracker erstellen
Offizielle highlight.js Dokumentation: highlightjs.org
Webpack Konfiguration im Repository prüfen