Étape 3 : Coloration et Labels de Langue

Cette étape est le cœur visuel de l’implémentation. Elle permet de transformer un bloc de code brut en un composant stylisé avec le nom du langage et un bouton de copie.

1. Extension Torchlight

Créez app/Markdown/Extensions/TorchlightExtension.php pour étendre BaseExtension :

namespace App\Markdown\Extensions;

use App\Markdown\BaseExtension;
use League\CommonMark\Environment\EnvironmentBuilderInterface;
use League\CommonMark\Extension\CommonMark\Node\Block\FencedCode;

class TorchlightExtension extends BaseExtension
{
    // C'est ici que nous définissons le rendu HTML personnalisé
    protected function renderCodeBlock($content, $language, $id)
    {
        $label = strtoupper($language ?: 'code');

        return "
        <div class='code-block-wrapper group'>
            <div class='code-block-header'>
                <span class='code-lang'>{$label}</span>
                <button class='copy-button' onclick='copyToClipboard(this)'>
                    <svg>...</svg> <!-- Icône de copie -->
                </button>
            </div>
            <pre><code>{$content}</code></pre>
        </div>";
    }
}

2. Configuration du Thème GitHub Dark

Dans config/torchlight.php, assurez-vous d’activer les fonctionnalités premium :

'theme' => 'github-dark',

// Activation des numéros de ligne (optionnel)
'line_numbers' => true,

3. Le Script de Copie

Ajoutez ce petit script Alpine.js ou Vanilla JS à votre mise en page globale (app.blade.php) pour faire fonctionner le bouton de copie :

function copyToClipboard(button) {
    const wrapper = button.closest('.code-block-wrapper');
    const code = wrapper.querySelector('pre').innerText;

    navigator.clipboard.writeText(code).then(() => {
        // Feedback visuel de copie
        button.classList.add('copied');
        setTimeout(() => button.classList.remove('copied'), 2000);
    });
}

Prochaine Étape

Dans l’étape suivante, nous allons mettre en place l’UI minimaliste pour les likes, les commentaires et le partage social.