← Articles

Créer une facture professionnelle avec Markdown

Créer des documents professionnels et élégants comme des factures est un besoin courant, pour les entreprises comme pour les indépendants. Si des outils comme LaTeX et HTML sont souvent utilisés à cette fin, ils peuvent être complexes et lourds à maintenir. C’est là qu’interviennent Pandoc, un convertisseur de documents universel, et Markdown, un langage de balisage léger. Ensemble, ils forment une solution simple mais puissante pour créer un modèle de facture personnalisable.

Dans cet article, nous verrons comment créer une facture professionnelle avec le Markdown de Pandoc, ses fenced divs et du CSS. Nous verrons aussi pourquoi cette approche est plus facile à maintenir et plus polyvalente que LaTeX ou des fichiers HTML complets.

Le modèle de facture

Voici le modèle de facture que j’ai développé avec l’aide de ChatGPT, qui fonctionne très bien pour ce genre d’usage

Fichier PDF

# Invoice

**Invoice Number:** INV-0001  
**Date:** YYYY-MM-DD  
**Due Date:** YYYY-MM-DD

::: bill-to
## Bill To

**Name:** Customer Name  
**Address:** Street Address  
**City:** City  
**State:** State  
**ZIP:** Postal Code  
**Country:** Country  
**Email:** email@example.com  
**Phone:** +00-000-0000
:::


::: ship-to
## Ship To

**Name:** Recipient Name  
**Address:** Street Address  
**City:** City  
**State:** State  
**ZIP:** Postal Code  
**Country:** Country
:::

::: items
## Items

| Description       | Quantity | Unit Price | Total      |
|-------------------|----------|------------|------------|
| Item 1            | 5        | $10.00     | $50.00     |
| Item 2            | 2        | $20.00     | $40.00     |
| Item 3            | 1        | $30.00     | $30.00     |
| **Subtotal**      |          |            | **$120.00**|
| **Tax**           |          |            | **$12.00** |
| **Total**         |          |            | **$132.00**|
:::

::: notes
## Notes

- Payment is due within 30 days from the date of the invoice.
- Please make checks payable to [Your Company Name].
- If you have any questions concerning this invoice, contact [Your Contact Information].
:::

---

Thank you for your business!

[Your Company Name]  
[Your Street Address]  
[Your City, State, ZIP]  
[Your Phone Number]  
[Your Email Address]  
[Your Website]

<style>
  body {
    font-family: Arial, sans-serif;
  }

  .section {
    margin-bottom: 20px;
  }

  .bill-to, .ship-to {
    display: inline-block;
    width: 48%;
  }

  .bill-to {
    float: left;
  }

  .ship-to {
    float: right;
  }

  .items::before {
    content: "";
    clear: both;
    display: table;
  }

  .items {
  	margin-top: 10px;
  }

  .items table {
    width: 100%;
    border-collapse: collapse;
  }

  .items th, .items td {
    border: 1px solid #000;
    padding: 5px;
  }

  .notes {
    font-style: italic;
  }

  @media print {
    .bill-to, .ship-to {
      width: 45%;
    }
  }
</style>
```## Prompt pour LLM

Une approche en plusieurs étapes peut être nécessaire, mais le prompt suivant peut servir de guide :

"Create html invoice with css that can be printed, but only output markdown with pandoc fenced_divs and also output the css."

## Comment ça marche

### Les fenced divs avec Pandoc

Les fenced divs de Pandoc permettent de créer des éléments de bloc dotés de classes spécifiques. Dans ce modèle, nous avons utilisé différentes classes pour les diverses sections, comme `bill-to`, `ship-to`, `items` et `notes`. Cette approche modulaire permet de styliser chaque section séparément.

## Comprendre les fenced divs dans Pandoc

Les fenced divs font partie de la syntaxe Markdown étendue de Pandoc. Elles permettent d'envelopper un ou plusieurs paragraphes, titres, listes ou autres éléments de bloc dans un conteneur doté d'une classe ou d'un identifiant spécifique. C'est particulièrement utile pour appliquer un style précis à une section de votre document.

### Syntaxe

La syntaxe de base d'une fenced div est la suivante :

```markdown
::: class-name
Content inside the fenced div
:::

<div class="class-name">
  <p>Content inside the fenced div</p>
</div>

Exemple d’utilisation

Voici comment utiliser une fenced div pour créer une section avec une classe spécifique :

::: warning
## Warning!
This section contains important information.
:::

Dans cet exemple, le contenu de la fenced div reçoit la classe warning. Vous pouvez ensuite styliser cette classe en CSS, par exemple pour afficher le texte en rouge ou ajouter une icône d’avertissement.

<div class="warning">
  <h2>Warning!</h2>
  <p>This section contains important information.</p>
</div>

Appliquer plusieurs classes ou un ID

On peut aussi appliquer plusieurs classes, voire un ID, à une fenced div. Voici la syntaxe :

::: {#my-id .class1 .class2}
Content inside the fenced div
:::

<div id="my-id" class="class1 class2">
  <p>Content inside the fenced div</p>
</div>

Utilisation dans le modèle de facture

Dans le modèle de facture, les fenced divs servent à créer des sections distinctes, comme bill-to, ship-to, items et notes. Grâce à des classes différentes pour ces sections, on peut appliquer un style propre à chacune, ce qui facilite la conception et la maintenance de la mise en page.

Le style CSS

Le CSS inclus met en forme la facture : ajustements de mise en page, bordures et styles spécifiques à l’impression. La facture a ainsi un aspect professionnel et est prête à être imprimée.

La balise <style> incluse contient le CSS qui met en forme la facture : ajustements de mise en page, bordures et styles spécifiques à l’impression. Vous pouvez l’adapter à votre identité visuelle ou à vos préférences.

Pourquoi choisir Markdown plutôt que LaTeX ou du HTML complet ?

Simplicité et lisibilité

Maintenabilité et flexibilité

Conversion facile vers d’autres formats

Conversion en HTML

Pandoc permet de convertir ce fichier Markdown en HTML ou dans tout autre format pris en charge. Voici une commande simple pour le convertir en HTML :

pandoc -s your-invoice.md -o your-invoice.html

Conversion en PDF

Convertissez le fichier HTML en PDF avec la fonction d’impression d’un navigateur ou avec Pandoc :

pandoc your-invoice.html -o your-invoice.pdf

Conclusion : une solution polyvalente

Choisir Markdown avec Pandoc pour un modèle de facture offre simplicité, maintenabilité et flexibilité. La démarche devient accessible, même à qui ne maîtrise pas LaTeX ou HTML, et la conversion vers divers formats, dont le PDF, est facile.

Alors, la prochaine fois que vous devrez rédiger une facture, essayez Pandoc et Markdown. Cela pourrait bien devenir votre solution de prédilection pour créer des documents professionnels et personnalisables.

Merci tout particulièrement aux Tokyo Builders pour l’inspiration. Bonne facturation !