# Quick Start - Markdown Viewer

## Installation rapide

Les composants sont déjà intégrés dans ObsiViewer. Aucune installation supplémentaire n'est nécessaire.

---

## Utilisation en 3 étapes

### 1. Importer le composant

```typescript
import { MarkdownViewerComponent } from './components/markdown-viewer/markdown-viewer.component';

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [MarkdownViewerComponent]
})
export class MyComponent {}
```

### 2. Ajouter dans le template

```html
<app-markdown-viewer
  [content]="markdownContent"
  [allNotes]="notes">
</app-markdown-viewer>
```

### 3. Définir le contenu

```typescript
export class MyComponent {
  markdownContent = `
# Mon Document

Ceci est un **document Markdown** avec du contenu *formaté*.

## Liste de tâches

- [x] Tâche complétée
- [ ] Tâche en cours

## Code

\`\`\`typescript
console.log('Hello World!');
\`\`\`
  `;
  
  notes: Note[] = [];
}
```

---

## Exemples rapides

### Exemple 1 : Viewer simple

```typescript
@Component({
  template: `
    <app-markdown-viewer [content]="content"></app-markdown-viewer>
  `
})
export class SimpleViewerComponent {
  content = '# Hello World\n\nCeci est un test.';
}
```

### Exemple 2 : Avec fichier Excalidraw

```typescript
@Component({
  template: `
    <app-markdown-viewer
      [content]="content"
      [filePath]="'drawing.excalidraw.md'">
    </app-markdown-viewer>
  `
})
export class ExcalidrawViewerComponent {
  content = ''; // Contenu chargé depuis le fichier
}
```

### Exemple 3 : Smart File Viewer (détection automatique)

```typescript
import { SmartFileViewerComponent } from './components/smart-file-viewer/smart-file-viewer.component';

@Component({
  imports: [SmartFileViewerComponent],
  template: `
    <app-smart-file-viewer
      [filePath]="file.path"
      [content]="file.content">
    </app-smart-file-viewer>
  `
})
export class AutoViewerComponent {
  file = {
    path: 'document.md', // ou .excalidraw.md, .png, .pdf, etc.
    content: '# Auto-detected content'
  };
}
```

---

## Fonctionnalités essentielles

### Callouts

```markdown
> [!NOTE]
> Information importante

> [!WARNING]
> Attention à ceci
```

### Math

```markdown
Inline: $E = mc^2$

Block:
$$
\int_{0}^{\infty} e^{-x^2} dx
$$
```

### Mermaid

```markdown
\`\`\`mermaid
graph LR
    A --> B
    B --> C
\`\`\`
```

### WikiLinks

```markdown
[[Note Example]]
[[Note Example#Section]]
[[Note Example|Custom Alias]]
```

---

## Tester rapidement

### Page de test intégrée

Accédez à `/markdown-playground` dans votre application pour tester toutes les fonctionnalités en temps réel.

### Exemple de contenu de test

Copiez ce contenu dans le playground :

```markdown
# Test Markdown

## Formatage de base

**Gras**, *italique*, ~~barré~~, `code inline`

## Callout

> [!TIP]
> Ceci est un conseil utile

## Code

\`\`\`typescript
function test() {
  console.log('Hello!');
}
\`\`\`

## Math

La formule $E = mc^2$ est célèbre.

## Tâches

- [x] Tâche 1
- [ ] Tâche 2

## Mermaid

\`\`\`mermaid
graph TD
    A[Start] --> B[End]
\`\`\`
```

---

## Démarrage serveur de développement

```bash
# Installer les dépendances
npm install

# Démarrer le serveur
npm run dev

# Ouvrir http://localhost:4200/markdown-playground
```

---

## Prochaines étapes

1. ✅ Lire le [Guide complet](./MARKDOWN_VIEWER_GUIDE.md)
2. ✅ Explorer les [exemples avancés](./MARKDOWN_VIEWER_GUIDE.md#exemples-avancés)
3. ✅ Consulter l'[API Reference](./MARKDOWN_VIEWER_GUIDE.md#utilisation)
4. ✅ Tester avec vos propres fichiers

---

## Support rapide

**Problème courant :** Le Markdown ne s'affiche pas
- ✅ Vérifier que `content` n'est pas vide
- ✅ Vérifier la console pour les erreurs
- ✅ Vérifier que le composant est bien importé

**Problème courant :** Excalidraw ne s'affiche pas
- ✅ Vérifier que `filePath` se termine par `.excalidraw.md`
- ✅ Vérifier que le contenu contient un bloc `compressed-json`

---

**Besoin d'aide ?** Consultez la [documentation complète](./MARKDOWN_VIEWER_GUIDE.md)