Snippet Manager Demo

Organisieren Sie Ihre Code-Snippets – mit Kategorien, Tags und Syntax-Highlighting

1. Neues Snippet hinzufügen

Titel:

Kategorie:

Python JavaScript HTML CSS SQL

Code:

Tags (kommagetrennt):

2. Meine Snippets

Statistiken

Snippets

5

Kategorien

4

Snippet Detail

Über den Snippet Manager

Organisieren Sie Ihre Code-Snippets mit:

Python JavaScript HTML CSS SQL – Kategorisierung nach Sprache
Tags – Für feinere Filterung (z.B. "schleife", "funktion")
Syntax-Highlighting – Bessere Lesbarkeit des Codes
Suche & Filter – Schnelles Finden Ihrer Snippets

Hinweis: Dies ist eine Demo – Ihre Snippets werden nur im Browser gespeichert und gehen beim Neuladen der Seite verloren.

\n', tags: ['html5', 'template', 'grundgerüst'], date: '2024-01-12' }, { id: 5, title: 'SQL SELECT Abfrage', category: 'sql', code: '-- SQL SELECT Abfragen\n\n-- Einfache Abfrage\nSELECT * FROM users WHERE age > 18 ORDER BY name;\n\n-- Join\nSELECT u.name, o.order_date, o.total\nFROM users u\nLEFT JOIN orders o ON u.id = o.user_id\nWHERE o.order_date >= \'2024-01-01\';\n\n-- Group By\nSELECT category, COUNT(*) as count, AVG(price) as avg_price\nFROM products\nGROUP BY category\nHAVING COUNT(*) > 5;', tags: ['select', 'join', 'group-by'], date: '2024-01-11' } ]; let nextId = 6; // System Preference (falls kein Eintrag) function prefersDarkMode() { return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; } if (!localStorage.getItem('darkMode') && prefersDarkMode()) { document.body.classList.add('dark-mode'); updateDarkMode(); } // ============================================ // SNIPPET MANAGER LOGIK // ============================================ // Kategorie-Tags initialisieren const categoryTags = document.querySelectorAll('.category-tag'); categoryTags.forEach(tag => { tag.addEventListener('click', function() { categoryTags.forEach(t => t.classList.remove('active')); this.classList.add('active'); activeCategory = this.dataset.category; }); }); // Syntax-Highlighting (vereinfacht) function highlightCode(code, language) { let highlighted = code; // Einfaches Highlighting für Python if (language === 'python') { highlighted = highlighted .replace(/\b(def|class|if|else|elif|for|while|return|import|from|as|try|except|finally|with|lambda|print|range|enumerate)\b/g, '$1') .replace(/\b(True|False|None)\b/g, '$1') .replace(/#.*$/gm, '$&') .replace(/\b\d+\b/g, '$&') .replace(/'[^']*'|"[^"]*"/g, '$&'); } // Für JavaScript else if (language === 'javascript') { highlighted = highlighted .replace(/\b(function|const|let|var|if|else|for|while|return|import|export|default|class|extends|super|try|catch|finally|throw|new|this|typeof|instanceof)\b/g, '$1') .replace(/\b(true|false|null|undefined)\b/g, '$1') .replace(/\/\/.*$/gm, '$&') .replace(/\b\d+\b/g, '$&') .replace(/'[^']*'|"[^"]*"|`[^`]*`/g, '$&'); } // Für SQL else if (language === 'sql') { highlighted = highlighted .replace(/\b(SELECT|FROM|WHERE|JOIN|LEFT|RIGHT|INNER|OUTER|ON|AND|OR|GROUP BY|HAVING|ORDER BY|LIMIT|OFFSET|UNION|INSERT|INTO|VALUES|UPDATE|SET|DELETE|CREATE|ALTER|DROP|TABLE|INDEX|VIEW)\b/gi, '$1') .replace(/--.*$/gm, '$&') .replace(/\b\d+\b/g, '$&') .replace(/'[^']*'/g, '$&'); } return highlighted; } // Snippets rendern function renderSnippets() { let searchTerm = searchSnippets.value.toLowerCase(); let categoryFilter = filterCategory.value; let filtered = snippets.filter(s => { // Kategorie-Filter if (categoryFilter !== 'all' && s.category !== categoryFilter) return false; // Such-Filter if (searchTerm) { return s.title.toLowerCase().includes(searchTerm) || s.code.toLowerCase().includes(searchTerm) || s.tags.some(t => t.includes(searchTerm)); } return true; }); let html = ''; filtered.forEach(s => { let preview = s.code.split('\n').slice(0, 3).join('\n'); html += `

${s.title}

${s.category}

${preview}...

`; }); snippetsGrid.innerHTML = html; // Klick-Handler für Snippet-Karten document.querySelectorAll('.snippet-card').forEach(card => { card.addEventListener('click', function() { let id = parseInt(this.dataset.id); showSnippetDetail(id); }); }); // Statistiken aktualisieren updateStats(); } // Snippet-Detail anzeigen function showSnippetDetail(id) { let snippet = snippets.find(s => s.id === id); if (!snippet) return; detailTitle.innerText = snippet.title; let highlighted = highlightCode(snippet.code, snippet.category); detailContent.innerHTML = `

Kategorie: ${snippet.category}

Tags: ${snippet.tags.join(', ')}

Hinzugefügt: ${snippet.date}

${highlighted}

`; snippetDetail.classList.add('active'); snippetDetail.scrollIntoView({ behavior: 'smooth' }); } // Neues Snippet hinzufügen function addSnippet() { let title = snippetTitle.value.trim(); let code = snippetCode.value.trim(); let tagsInput = snippetTags.value.trim(); if (!title || !code) { alert('Bitte Titel und Code eingeben!'); return; } let tags = tagsInput ? tagsInput.split(',').map(t => t.trim()) : []; let today = new Date(); let dateStr = today.toISOString().split('T')[0]; let newSnippet = { id: nextId++, title: title, category: activeCategory, code: code, tags: tags, date: dateStr }; snippets.push(newSnippet); renderSnippets(); // Formular zurücksetzen snippetTitle.value = ''; snippetCode.value = ''; snippetTags.value = ''; // Zurücksetzen auf Standard-Kategorie categoryTags.forEach(t => t.classList.remove('active')); document.querySelector('[data-category="python"]').classList.add('active'); activeCategory = 'python'; } // Formular zurücksetzen function resetForm() { snippetTitle.value = 'For-Schleife in Python'; snippetCode.value = '# For-Schleife in Python\nfor i in range(5):\n print(f"Durchlauf {i}")\n \n# Mit enumerate\nfruits = ["Apfel", "Banane", "Kirsche"]\nfor index, fruit in enumerate(fruits):\n print(f"{index}: {fruit}")\n\n# List Comprehension\nsquares = [x**2 for x in range(10)]'; snippetTags.value = 'schleife, enumerate, list-comprehension'; categoryTags.forEach(t => t.classList.remove('active')); document.querySelector('[data-category="python"]').classList.add('active'); activeCategory = 'python'; } // Statistiken aktualisieren function updateStats() { snippetCount.innerText = snippets.length; let categories = new Set(snippets.map(s => s.category)); categoryCount.innerText = categories.size; let tags = new Set(); snippets.forEach(s => s.tags.forEach(t => tags.add(t))); tagCount.innerText = tags.size; } // Event-Listener addSnippetBtn.addEventListener('click', addSnippet); resetFormBtn.addEventListener('click', resetForm); closeDetailBtn.addEventListener('click', function() { snippetDetail.classList.remove('active'); }); searchSnippets.addEventListener('input', renderSnippets); filterCategory.addEventListener('change', renderSnippets); // Initial rendern window.onload = function() { renderSnippets(); };