Exemple Complet de Document Markdown

← Retour aux exemples Markdown

Bienvenue dans Raziel.MD ! 🚀

Ce document présente les principales fonctions de rendu disponibles dans l'application.

Fonctions principales

• ✅ Rendu Markdown : prise en charge de Markdown avec GFM
• 📊 Diagrammes Mermaid : organigrammes, séquences et autres diagrammes
• 🎨 Coloration syntaxique : code dans plusieurs langages
• 🌙 Thèmes : modes clair et sombre
• 💾 Utilisation hors ligne : documents stockés localement

Exemples de mise en forme

Listes

Liste non ordonnée

• Élément 1
• Élément 2
  • Sous-élément 2.1
  • Sous-élément 2.2
• Élément 3

Liste ordonnée

1. Premier élément
2. Deuxième élément
3. Troisième élément

Code

Code en ligne : const hello = "world"

Bloc de code JavaScript :

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

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

Bloc de code Python :

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]))

Tableaux

Citations

La simplicité est la sophistication suprême.

• Léonard de Vinci

Liens

Documentation Markdown

Diagrammes Mermaid

Organigramme

graph TD
    A[Importer des fichiers] --> B{Fichier .md ?}
    B -->|Oui| C[Traiter le contenu]
    B -->|Non| D[Ignorer]
    C --> E[Enregistrer dans IndexedDB]
    E --> F[Effectuer le rendu]
    F --> G[Afficher le Markdown]

Diagramme de séquence

sequenceDiagram
    participant U as Utilisateur
    participant A as Application
    participant DB as IndexedDB

    U->>A: Importer un fichier
    A->>A: Valider le format
    A->>DB: Enregistrer le fichier
    DB-->>A: Confirmer
    A-->>U: Afficher la réussite
    U->>A: Sélectionner un fichier
    A->>DB: Obtenir le contenu
    DB-->>A: Renvoyer le contenu
    A->>A: Effectuer le rendu Markdown
    A-->>U: Afficher le document

Diagramme de classes

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

Diagramme circulaire

pie title Répartition des fonctions
    "Importation des fichiers" : 20
    "Navigation" : 25
    "Rendu" : 30
    "Recherche" : 15
    "Utilisation hors ligne" : 10

Navigation par liens

Wiki-links

Les wiki-links créent des connexions entre les documents. Sélectionnez un exemple :

Lien simple vers ce document

[[./example]]

Lien avec un texte personnalisé

[[./example|Retour à cet exemple]]

Lien vers une section d'un autre document

[[mermaid-examples.md#chronologie|Aller à la chronologie]]

Lien vers une section de ce document

[[#code|Aller à la section Code]]

Wiki-link dans un bloc de code

Le contenu du bloc ne doit pas devenir un lien :

[[ce/lien/ne/doit/pas/devenir/html]]

Liens Markdown internes

Les liens internes s'ouvrent dans le même onglet. Utilisez Ctrl+Clic ou le bouton central pour ouvrir un nouvel onglet.

• Ce document
• Section Tableaux
• Section Citations
• Exemples Mermaid avancés

Conseil : faites un clic droit sur un lien pour afficher des actions telles qu'ouvrir, ouvrir dans un nouvel onglet et copier le lien.

Liens externes

Les liens externes affichent une confirmation avant de s'ouvrir :

• Documentation Markdown
• GitHub
• Vue.js

Fonctions avancées

Listes de tâches

• Importer des fichiers
• Créer une navigation en arbre
• Effectuer le rendu Markdown
• Effectuer le rendu Mermaid
• Ajouter la recherche
• Créer mes propres notes
• Organiser une bibliothèque personnelle

Mise en forme du texte

Gras, italique, barré et code en ligne.

Gras et italique combinés

Séparateur horizontal

Exemples de nettoyage

Raziel.MD nettoie le contenu HTML potentiellement dangereux. Les exemples suivants doivent être affichés sans exécuter de scripts.

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

<img src="x" onerror="alert('XSS via un attribut')">

<div onclick="alert('XSS via un événement')">Sélectionner ici</div>

<iframe src="javascript:alert('XSS via une iframe')"></iframe>

Conclusion

Ce document présente des fonctions essentielles de Raziel.MD. Créez vos propres documents et organisez votre base de connaissances personnelle.

Continuer l'exploration

• Exemples Mermaid avancés
• Retour aux exemples Markdown