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