← Blog

Eine professionelle Rechnung mit Markdown gestalten

Professionelle und elegante Dokumente wie Rechnungen zu erstellen, ist für Unternehmen wie für Freelancer eine häufige Notwendigkeit. Werkzeuge wie LaTeX und HTML werden dafür oft genutzt, können aber komplex und mühsam zu pflegen sein. Hier kommen Pandoc, ein universeller Dokumentkonverter, und Markdown, eine schlanke Auszeichnungssprache, ins Spiel. Zusammen bilden sie eine einfache, aber leistungsfähige Lösung für eine anpassbare Rechnungsvorlage.

In diesem Beitrag sehen wir uns an, wie Sie mit Pandoc-Markdown, Fenced Divs und CSS eine professionelle Rechnung erstellen. Ausserdem schauen wir, warum dieser Ansatz im Vergleich zu LaTeX oder vollständigen HTML-Dateien besser wartbar und vielseitiger ist.

Die Rechnungsvorlage

Hier ist die Rechnungsvorlage, die ich mit Hilfe von ChatGPT entwickelt habe und die für solche Anwendungen sehr gut funktioniert.

PDF-Datei

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

LLM-Prompt:

Eventuell braucht es mehrere Schritte, aber der folgende Prompt kann als Anhaltspunkt dienen:

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

So funktioniert es

Fenced Divs mit Pandoc

Mit Fenced Divs lassen sich in Pandoc Blockelemente mit bestimmten Klassen erstellen. In dieser Vorlage haben wir für verschiedene Abschnitte unterschiedliche Klassen verwendet, etwa bill-to, ship-to, items und notes. Dieser modulare Ansatz erlaubt es, diese Abschnitte separat zu gestalten.

Fenced Divs in Pandoc verstehen

Fenced Divs gehören zur erweiterten Markdown-Syntax von Pandoc. Damit können Sie einen oder mehrere Absätze, Überschriften, Listen oder andere Blockelemente in einen Container mit einer bestimmten Klasse oder ID packen. Das ist besonders nützlich, wenn Sie einen Abschnitt Ihres Dokuments gezielt gestalten möchten.

Syntax

Die Grundsyntax eines Fenced Div sieht so aus:

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

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

Anwendungsbeispiel

So könnten Sie ein Fenced Div verwenden, um einen Abschnitt mit einer bestimmten Klasse zu erstellen:

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

In diesem Beispiel erhält der Inhalt des Fenced Div die Klasse warning. Diese Klasse können Sie dann mit CSS gestalten, etwa den Text rot färben oder ein Warnsymbol hinzufügen.

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

Mehrere Klassen oder IDs zuweisen

Sie können einem Fenced Div auch mehrere Klassen oder sogar eine ID zuweisen. Die Syntax:

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

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

Verwendung in der Rechnungsvorlage

In der Rechnungsvorlage wurden Fenced Divs genutzt, um getrennte Abschnitte wie bill-to, ship-to, items und notes zu erstellen. Mit unterschiedlichen Klassen für diese Abschnitte können Sie jedem eigene Stile zuweisen, was Gestaltung und Pflege des Layouts erleichtert.

Gestaltung mit CSS

Das mitgelieferte CSS gestaltet die Rechnung, einschliesslich Layoutanpassungen, Rahmen und druckspezifischer Stile. So sieht die Rechnung professionell aus und ist bereit zum Drucken.

Das enthaltene <style>-Tag enthält CSS, das die Rechnung gestaltet, einschliesslich Layoutanpassungen, Rahmen und druckspezifischer Stile. Sie können es an Ihr Branding oder Ihre Designvorlieben anpassen.

Warum Markdown statt LaTeX oder vollständigem HTML?

Einfachheit und Lesbarkeit

Wartbarkeit und Flexibilität

Einfache Konvertierung in andere Formate

Konvertierung in HTML

Mit Pandoc können Sie diese Markdown-Datei in HTML oder jedes andere von Pandoc unterstützte Format umwandeln. Ein einfacher Befehl für die Umwandlung in HTML:

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

Konvertierung in PDF

Wandeln Sie die HTML-Datei mit der Druckfunktion des Browsers oder mit Pandoc in ein PDF um:

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

Fazit: eine vielseitige Lösung

Markdown mit Pandoc für eine Rechnungsvorlage zu wählen, bietet Einfachheit, Wartbarkeit und Flexibilität. Der Prozess wird auch für Leute zugänglich, die keine LaTeX- oder HTML-Profis sind, und die Konvertierung in verschiedene Formate, auch PDF, ist einfach.

Wenn Sie also das nächste Mal eine Rechnung erstellen müssen, probieren Sie Pandoc und Markdown aus. Vielleicht wird es Ihre bevorzugte Lösung für professionelle und anpassbare Dokumente.

Besonderen Dank an die Tokyo Builders für die Inspiration. Frohes Rechnungsstellen!