ObsiViewer/docs/MARKDOWN/QUICK_START_MARKDOWN.md

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

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

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

3. Définir le contenu

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

@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

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

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

> [!NOTE]
> Information importante

> [!WARNING]
> Attention à ceci

Math

Inline: $E = mc^2$

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

Mermaid

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

WikiLinks

[[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 :

# 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

# 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
2. ✅ Explorer les exemples avancés
3. ✅ Consulter l'API Reference
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