Étape 1 : Installation et Dépendances (Stack TAILL)

Ce guide détaille l’implémentation d’un système de rendu Markdown riche pour la stack TAILL (Tailwind CSS, Alpine.js, Inertia/Interactivity via Livewire, et Laravel).

1. Installation des Paquets

Backend (Composer)

Lancez les commandes suivantes pour installer les moteurs de rendu et l’éditeur :

composer require spatie/laravel-markdown:^2.7
composer require torchlight/torchlight-laravel:^0.6.1
composer require torchlight/torchlight-commonmark:^0.6.0
composer require mckenziearts/livewire-markdown-editor:^1.1

Frontend (NPM)

Installez les dépendances nécessaires pour Vite, Tailwind CSS 4 et les éléments de texte enrichi de GitHub :

npm install @github/markdown-toolbar-element:^2.2.3 @github/text-expander-element:^2.9.4

2. Publication des Configurations

Publiez les fichiers de configuration pour pouvoir les personnaliser :

php artisan vendor:publish --provider="Spatie\LaravelMarkdown\MarkdownServiceProvider" --tag="markdown-config"
php artisan vendor:publish --provider="Torchlight\Laravel\TorchlightServiceProvider" --tag="torchlight-config"

3. Configuration Initiale

Spatie Markdown (config/markdown.php)

Désactivez le surlignage par défaut de Spatie pour laisser Torchlight prendre le relais plus tard de manière plus fine.

// config/markdown.php
'code_highlighting' => [
    'enabled' => false, // Nous utiliserons Torchlight via une extension personnalisée
],

Torchlight (config/torchlight.php)

Configurez votre jeton API Torchlight (obtenu sur torchlight.dev) dans votre fichier .env.

# .env
TORCHLIGHT_TOKEN=tl_your_token_here

Dans le fichier de config, assurez-vous que le thème est défini sur github-dark pour un rendu premium :

// config/torchlight.php
'theme' => 'github-dark',

Prochaine Étape

Dans l’étape suivante, nous allons créer le moteur de rendu et la logique de base pour nos extensions Markdown.