Zum Hauptinhalt springen
App öffnen
Geprüft am 22. Juli 2026Produktversion 1.8.2
Auf dieser Seite

Vollständiges Beispiel Eines Markdown-Dokuments

← Zurück zu den Markdown-Beispielen

Willkommen bei Raziel.MD! 🚀

Dieses Dokument zeigt die wichtigsten Darstellungsfunktionen der App.

Wichtigste Funktionen

  • ✅ Markdown-Darstellung: Unterstützung für Markdown mit GFM
  • 📊 Mermaid-Diagramme: Ablauf-, Sequenz- und weitere Diagramme
  • 🎨 Syntaxhervorhebung: Code in mehreren Sprachen
  • 🌙 Designs: heller und dunkler Modus
  • 💾 Offline-Nutzung: lokal gespeicherte Dokumente

Formatierungsbeispiele

Listen

Ungeordnete Liste

  • Element 1
  • Element 2
    • Unterelement 2.1
    • Unterelement 2.2
  • Element 3

Geordnete Liste

  1. Erstes Element
  2. Zweites Element
  3. Drittes Element

Code

Inline-Code: const hello = "world"

JavaScript-Codeblock:

function fibonacci(n) {
  if (n <= 1) return n
  return fibonacci(n - 1) + fibonacci(n - 2)
}

console.log(fibonacci(10)) // 55

Python-Codeblock:

def quicksort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quicksort(left) + middle + quicksort(right)

print(quicksort([3, 6, 8, 10, 1, 2, 1]))

Tabellen

FunktionUnterstützungBeschreibung
Markdown✅Darstellung mit GFM
Mermaid✅Diagramme und Ablaufdiagramme
Offline✅IndexedDB und Service Worker
Suche✅Suche in Namen und Inhalten

Zitate

Einfachheit ist die höchste Form der Raffinesse.

  • Leonardo da Vinci

Links

Markdown-Dokumentation

Mermaid-Diagramme

Ablaufdiagramm

graph TD
    A[Dateien hochladen] --> B{Ist es eine .md-Datei?}
    B -->|Ja| C[Inhalt verarbeiten]
    B -->|Nein| D[Ignorieren]
    C --> E[In IndexedDB speichern]
    E --> F[In der Oberfläche darstellen]
    F --> G[Markdown anzeigen]

Sequenzdiagramm

sequenceDiagram
    participant U as Benutzer
    participant A as App
    participant DB as IndexedDB

    U->>A: Datei hochladen
    A->>A: Format prüfen
    A->>DB: Datei speichern
    DB-->>A: Bestätigen
    A-->>U: Erfolg anzeigen
    U->>A: Datei auswählen
    A->>DB: Inhalt abrufen
    DB-->>A: Inhalt zurückgeben
    A->>A: Markdown darstellen
    A-->>U: Dokument anzeigen

Klassendiagramm

classDiagram
    class MarkdownFile {
        +number id
        +string path
        +string name
        +string content
        +Date createdAt
        +Date updatedAt
    }

    class IndexedDB {
        +saveFile()
        +getAllFiles()
        +getFileByPath()
        +searchFiles()
        +deleteFile()
    }

    class MarkdownViewer {
        +renderMarkdown()
        +renderMermaid()
        +exportFile()
    }

    IndexedDB --> MarkdownFile
    MarkdownViewer --> MarkdownFile

Kreisdiagramm

pie title Verteilung der Funktionen
    "Datei-Upload" : 20
    "Navigation" : 25
    "Darstellung" : 30
    "Suche" : 15
    "Offline-Nutzung" : 10

Wiki-Links verbinden Dokumente miteinander. Wähle ein Beispiel:

[[./example]]

[[./example|Zurück zu diesem Beispiel]]

[[mermaid-examples.md#zeitleiste|Zur Zeitleiste]]

[[#code|Zum Abschnitt Code]]

Der Inhalt im Block darf nicht in einen Link umgewandelt werden:

[[dieser/link/darf/nicht/zu/html/werden]]

Interne Links öffnen sich im selben Tab. Mit Strg+Klick oder der mittleren Maustaste öffnest du einen neuen Tab.

Tipp: Klicke mit der rechten Maustaste auf einen Link, um Aktionen wie Öffnen, in neuem Tab öffnen und Link kopieren anzuzeigen.

Externe Links zeigen vor dem Öffnen eine Bestätigung:

Erweiterte Funktionen

Aufgabenlisten

  • Dateien importieren
  • Baumnavigation erstellen
  • Markdown darstellen
  • Mermaid darstellen
  • Suche hinzufügen
  • Eigene Notizen erstellen
  • Persönliche Bibliothek organisieren

Textformatierung

Fett, kursiv, durchgestrichen und Inline-Code.

Fett und kursiv kombiniert

Horizontale Trennlinie

Beispiele für Bereinigung

Raziel.MD bereinigt potenziell gefährliche HTML-Inhalte. Die folgenden Beispiele müssen angezeigt werden, ohne Skripte auszuführen.

<script>alert("XSS")</script>

<img src="x" onerror="alert('XSS über ein Attribut')">

<div onclick="alert('XSS über ein Ereignis')">Hier auswählen</div>

<iframe src="javascript:alert('XSS über einen iframe')"></iframe>

Fazit

Dieses Dokument zeigt wichtige Funktionen von Raziel.MD. Erstelle eigene Dokumente und organisiere deine persönliche Wissenssammlung.

Weiter entdecken