244 lines
4.0 KiB
Markdown
244 lines
4.0 KiB
Markdown
# 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)
|