plbls-markdown

plbls-markdown est un service Angular permettant de convertir du texte Markdown en HTML sécurisé avec support pour plusieurs fonctionnalités avancées telles que les blocs de code, les listes, les tableaux, les images et les liens. Il gère également les formats de texte enrichis tels que les citations, le texte en gras, en italique, et les listes de tâches.

Fonctionnalités

• Conversion des titres, citations, liens, images, listes, tableaux et blocs de code Markdown.
• Prise en charge des listes de tâches avec checkbox.
• Gestion des blocs de code avec support pour le copier-coller du code et affichage de la langue.
• Liens internes avec scroll fluide vers les ancres définies dans le document.
• Gestion des styles des éléments Markdown.
• Sécurisation des contenus avec DomSanitizer d'Angular.

Installation

Installez la bibliothèque via npm en exécutant la commande suivante :

npm install plbls-markdown

Utilisation

1. Importer le service dans votre module

Assurez-vous que le service est bien injecté dans votre application Angular :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { PlblsMarkdownService } from 'plbls-markdown';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [PlblsMarkdownService],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Utilisation du service

Vous pouvez utiliser le service PlblsMarkdownService pour convertir du texte Markdown en HTML sécurisé dans vos composants Angular.

import { Component } from '@angular/core';
import { PlblsMarkdownService } from 'plbls-markdown';

@Component({
  selector: 'app-root',
  template: `<div [innerHTML]="markdownHtml"></div>`
})
export class AppComponent {
  markdownHtml: any;

  constructor(private markdownService: PlblsMarkdownService) {
    const markdownText = `
# Titre
Voici un exemple de **texte en gras**, *texte en italique* et un bloc de code:

\`\`\`js
console.log('Hello World');
\`\`\`
    `;
    this.markdownHtml = this.markdownService.convertMarkdown(markdownText);
  }
}

3. Directive PlblsMarkdownDirective

Pour simplifier l'utilisation, une directive PlblsMarkdownDirective est fournie, elle permet de convertir le contenu d'un élément DOM automatiquement en Markdown.

Exemple d'utilisation :

<div [PlblsMarkdown]="markdownContent"></div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div [PlblsMarkdown]="markdownContent"></div>`
})
export class AppComponent {
  markdownContent: string = `
# Exemple de Markdown
- **Bold** et *Italique*
- [Lien](https://example.com)
\`\`\`ts
console.log('Exemple de code');
\`\`\`
  `;
}

4. Pipe PlblsMarkdownPipe

En plus de la directive, un pipe plblsMarkdown est disponible pour être utilisé dans vos templates Angular pour transformer du Markdown en HTML. Cependant, ce pipe doit être utilisé avec [innerHTML] dans les templates.

Exemple d'utilisation avec plblsMarkdown pipe :

<div [innerHTML]="markdownContent | plblsMarkdown"></div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div [innerHTML]="markdownContent | plblsMarkdown"></div>`
})
export class AppComponent {
  markdownContent: string = `
# Exemple de Markdown avec Pipe
\`\`\`js
console.log('Code avec pipe');
\`\`\`
  `;
}

5. Thèmes supportés

Le service plbls-markdown supporte plusieurs thèmes pour styliser le contenu généré. Ces thèmes peuvent être appliqués en ajoutant une classe à l'élément parent contenant le HTML Markdown.

Thèmes disponibles :

• GitHub
• Dark
• Solarized Light
• Solarized Dark
• Monokai
• Dracula
• Nord
• Paperwhite
• Night Owl
• Cobalt
• Atom One Light
• Atom One Dark

Actuellement, l'utilisation ne se fait que via le service.

import { Component } from '@angular/core';
import { PlblsMarkdownService } from 'plbls-markdown';

@Component({
  selector: 'app-root',
  template: `<div [innerHTML]="markdownHtml"></div>`
})
export class AppComponent {
  markdownHtml: any;

  constructor(private markdownService: PlblsMarkdownService) {
    const markdownText = `
# Titre
Voici un exemple de **texte en gras**, *texte en italique* et un bloc de code:

\`\`\`js
console.log('Hello World');
\`\`\`
    `;
    this.markdownHtml = this.markdownService.convertMarkdown(markdownText, 'GitHub');
  }
}

6. Exemple de markdown supporté

Voici un aperçu des fonctionnalités Markdown supportées par plbls-markdown :

# Titre H1
## Titre H2
### Titre H3

Texte en **gras**, *italique*, ~~barré~~ et `code inline`.

\`\`\`js
// Bloc de code avec JavaScript
console.log('Hello World');
\`\`\`

- Liste non ordonnée
1. Liste ordonnée

| Colonne 1 | Colonne 2 |
|-----------|-----------|
| Valeur 1  | Valeur 2  |

> Bloc de citation

[Un lien](https://example.com)

Éléments pris en charge

| Nom de l'élément | Utilisation | Pris en charge par la lib | |----------------------|---------------------------------------------------------------|---------------------------| | Titres | # Titre H1, ## Titre H2, ### Titre H3, etc. | Oui | | Texte en gras | **texte en gras**, __texte en gras__ | Oui | | Texte en italique | *texte en italique*, _texte en italique_ | Oui | | Texte barré | ~~texte barré~~ | Oui | | Code inline | `code inline` | Oui | | Blocs de code | ```langage code``` | Oui | | Citations | > Bloc de citation | Oui | | Liens | [Texte du lien](URL) | Oui | | Liens internes | [Ancre interne](#ancre) | Oui | | Images | ![alt text](URL) | Oui | | Listes non ordonnées | - Élément, * Élément, + Élément | Oui | | Listes ordonnées | 1. Élément | Oui | | Listes de tâches | - [ ] Tâche incomplète, - [x] Tâche complète | Oui | | Tableaux | | Col 1 | Col 2 |, |-------|-------| | Oui | | Lignes horizontales | ---, ***, ___ | Oui | | Émojis | :emoji: | Pas encore |

Contributions

Les contributions sont les bienvenues ! N'hésitez pas à ouvrir une issue ou à soumettre une pull request si vous avez des idées d'amélioration ou des correctifs.

License

MIT © 2024 plbls-markdown