💻 TLD - tld_display_code - Composant d'Affichage de Code

📖 Introduction

tld_display_code est un Web Component qui utilise Prism.js pour afficher et colorer du code source.
Il prend en charge :

• La coloration syntaxique pour plusieurs langages.
• La numérotation des lignes.
• La mise en évidence des bonnes et mauvaises lignes.

---

⚡️ Installation / Prérequis

📦 Dépendances

Ce composant repose sur Prism.js, assurez-vous de l'installer :

npm install prismjs

Ajoutez les fichiers CSS nécessaires :

<link rel="stylesheet" href="8_indes.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">

---

🚀 Utilisation

🔹 Ajout du Composant dans une Page HTML

<tld-display-code language="javascript" name="Exemple JS">
    console.log("Hello, world!");
</tld-display-code>

🔹 Mise en Évidence des Lignes

Ajoutez good et bad pour marquer des lignes correctes ou erronées :

<tld-display-code language="javascript" name="Exemple JS" good="1,3" bad="2">
    console.log("Ligne correcte");
    consoole.log("Erreur de syntaxe !");
    console.log("Autre ligne correcte");
</tld-display-code>

🔹 Numérotation des Lignes

Utilisez data-line pour afficher certaines lignes :

<tld-display-code language="python" name="Exemple Python" data-line="1,3">
    print("Ligne importante")
    x = 5
    print("Autre ligne importante")
</tld-display-code>

🔹 Mise à Jour Dynamique

const codeBlock = document.querySelector("tld-display-code");
codeBlock.innerHTML = "console.log('Nouveau code !');";

---

🎨 Style CSS

Ajoutez ce fichier CSS (8_indes.css) pour assurer l'affichage correct du composant :

tld-display-code > div {
    padding: var(--padding-5);
}

tld-display-code pre {
    margin: unset !important;
}

tld-display-code p {
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    color: white;
}

/* Mise en évidence des lignes */
tld-display-code .line-highlight.good {
    background: linear-gradient(to right, hsl(114.06deg 100% 50% / 19%) 70%, hsla(24,20%,50%,0));
}

tld-display-code .line-highlight.bad {
    background: linear-gradient(to right, hsl(0deg 100% 60.6% / 24%) 70%, hsla(24,20%,50%,0));
}

---

📌 Détails du Code

🏗️ Définition de la Classe

class tld_display_code extends tld_custom_elements {
    public _language: string | null;
    public _name: string;
    public _bad: string;
    public _good: string;

    constructor() {
        super();
        this._language = null;
        this._name = "";
    }

    render() {
        this.innerHTML = `
        <div>
            <div>
                <p># ${this._name}</p>
                <div></div>
                <pre ${this["_data-line"] ? "data-line='" + this["_data-line"] + "'" : ""} class="line-numbers">
                    <code class="${this._language || ""}">${this.innerHTML}</code>
                </pre>
            </div>
        </div>`;

        Prism.highlightElement(this.querySelector("code"));
        window.addEventListener("resize", () => this.resize());
        this.resize();
    }
}

🎨 Méthodes Clés

🔄 render()

render() {
    this.innerHTML = `
    <div>
        <div>
            <p># ${this._name}</p>
            <div></div>
            <pre class="line-numbers"><code class="${this._language}">${this.innerHTML}</code></pre>
        </div>
    </div>`;
    
    Prism.highlightElement(this.querySelector("code"));
    this.resize();
}

🎨 resize()

resize() {
    if (this._good) {
        this._good.split(",").forEach(el => {
            let val = parseInt(el) - 1;
            this.querySelectorAll("pre > div")[val]?.classList.add("good");
        });
    }

    if (this._bad) {
        this._bad.split(",").forEach(el => {
            let val = parseInt(el) - 1;
            this.querySelectorAll("pre > div")[val]?.classList.add("bad");
        });
    }
}

---

📚 Exemples et Cas Pratiques

📌 Ajout Dynamique de Code

const codeBlock = document.createElement("tld-display-code");
codeBlock.setAttribute("language", "javascript");
codeBlock.innerHTML = `console.log("Code dynamique ajouté !");`;
document.body.appendChild(codeBlock);

📌 Mise en Évidence Dynamique

codeBlock.setAttribute("good", "1,3");
codeBlock.setAttribute("bad", "2");

---

🎯 Conclusion

tld_display_code est un Web Component puissant pour afficher du code avec Prism.js.
Il permet une coloration syntaxique avancée, la numérotation des lignes et la mise en évidence des erreurs.