Skip to content

Commit 512abe6

Browse files
StrudelcodeStrudelcode
authored
Add files via upload
1 parent 3e118fa commit 512abe6

4 files changed

Lines changed: 67 additions & 0 deletions

File tree

‎markdown-live-editor/README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Markdown Live Editor
2+
3+
Eine minimalistische, übersichtliche Webseite zum schnellen Schreiben & Vorschauen von Markdown-Dateien – läuft lokal im Browser, auch ohne Internetverbindung.
4+
5+
## 🚀 Features
6+
- **Live-Vorschau:** Sieh sofort, wie dein Text formatiert aussieht.
7+
- **Glassmorphism Design:** Modernes, lila-pinkes Glas-Interface.
8+
- **Offline-fähig:** Einmal im Browser geladen, funktioniert es ohne Internet.
9+
- **Datenschutz:** Deine Texte verlassen nie deinen lokalen Browser.
10+
11+
## 💻 Nutzung
12+
1. `index.html` im Browser öffnen.
13+
2. Links Markdown schreiben.
14+
3. Rechts das Ergebnis sehen.

‎markdown-live-editor/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="de">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Markdown Live Editor</title>
7+
<link rel="stylesheet" href="style.css">
8+
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<header>
13+
<h1>Markdown Live Editor</h1>
14+
</header>
15+
<main>
16+
<textarea id="editor" placeholder="Schreibe dein Markdown hier..."></textarea>
17+
<div id="preview" class="markdown-body"></div>
18+
</main>
19+
</div>
20+
<script src="script.js"></script>
21+
</body>
22+
</html>

‎markdown-live-editor/script.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const editor = document.getElementById('editor');
2+
const preview = document.getElementById('preview');
3+
4+
editor.addEventListener('input', () => {
5+
preview.innerHTML = marked.parse(editor.value);
6+
});

‎markdown-live-editor/style.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
body, html {
2+
margin: 0; padding: 0; height: 100%;
3+
font-family: 'Segoe UI', sans-serif;
4+
background: linear-gradient(135deg, #ff00cc 0%, #333399 100%);
5+
background-attachment: fixed;
6+
}
7+
8+
.container { display: flex; flex-direction: column; height: 100vh; padding: 20px; box-sizing: border-box; }
9+
10+
header { color: white; text-align: center; margin-bottom: 20px; }
11+
12+
main { display: flex; flex: 1; gap: 20px; overflow: hidden; }
13+
14+
#editor, #preview {
15+
flex: 1; height: 100%; padding: 20px; border-radius: 15px;
16+
background: rgba(255, 255, 255, 0.15);
17+
backdrop-filter: blur(15px);
18+
border: 1px solid rgba(255, 255, 255, 0.2);
19+
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
20+
overflow-y: auto;
21+
}
22+
23+
#editor { border: none; outline: none; resize: none; font-family: monospace; font-size: 16px; color: white; }
24+
#editor::placeholder { color: rgba(255, 255, 255, 0.6); }
25+
#preview { background: rgba(255, 255, 255, 0.9); color: #333; }

0 commit comments

Comments
 (0)