[Résolu] Mettre du code dans une page html

Bonjour,
J'aimerais savoir comment on peut mettre un extrait de code dans sa page html comme sur ce site.
exemple :

<p>Je suis un paragraphe</p>

p {color: red;}

const myName = "Éric";

Avec les différences de couleurs en fonctions des codes html (orange), css (bleu), js (jaune) sur les cotés.
Merci
Modifié par ricem (07 Mar 2024 - 11:50)

Merci parsimonhi, je vais m'y pencher ce weekend...!!

Edit : J'ai vu qu'il y avait un super tuto https://www.alsacreations.com/astuce/lire/1476-prism-coloration-syntaxique.html (lien modifié par parsimonhi pour qu'il fonctionne)
Modifié par parsimonhi (10 Mar 2024 - 03:51)

Bonjour,

Normalement, ça marche. Est-ce qu'il n'y aurait pas une erreur dans ton html ? Passe-le dans un validateur !

Amicalement,

parsimonhi a écrit :

Passe-le dans un validateur !
Amicalement,

Heu, validateur, genre https://validator.w3.org/ ?

Apparemment, j'ai le même problème que sur ce sujet https://forum.alsacreations.com/topic-1-69228-1-Probleme-de-coloration-syntaxique-avec-Prism-.html

le navigateur interprète le code html, alors qu'il ne devrait pas, mais, il n'as pas indiqué de solution
j'ai lu 2/3 truc sur le web, mais rien de bien concret..il parle d'échapper les balises html
si je fais ça

<pre><code class="language-html"> &ltp&gttest&lt/p&gt </code></pre>

il me les transforme en chevrons, mais c'est pas très joli dans le code d'origine.
Modifié par ricem (10 Mar 2024 - 12:24)

Bonjour,

Je vois mieux. Quand tu mets du code html à l'intérieur d'une balise <code> dans une page (sans prism), ça reste du html qui sera interprété par le navigateur comme étant du html. Par exemple, essaie de mettre le code suivant dans une page :

<pre><code><button>Argh</button></code></pre>

Tu devrais voir apparaitre dans la page un bouton avec "Argh" écrit dessus, et non pas la chaine de caractère <button>Argh</button>. C'est le fonctionnement de base de la balise code. Elle n'empêche pas l'interprétation du html se trouvant dans son contenu.

Il est donc (plus ou moins) nécessaire d'utiliser au moins des "&lt;" à la place des "<" pour que ce qui est à l'intérieur d'une balise <code> soit considéré comme du texte qui ne doit pas être interprété par le navigateur comme étant du html. Personnellement, quand je mets du code html (qui ne doit pas être interprété comme étant du html, que ce soit dans une balise <code> ou ailleurs), je remplace tous les "<" et ">" par des "&lt;" et "&gt;" pour éviter toute embrouille.

Note au passage que la balise code ne doit contenir que du "phrasing content", c'est à dire du texte et un certain nombre de balise comme <a>, <span>, etc. La balise <p> n'est pas dans la liste des balises permises. Voir https://html.spec.whatwg.org/multipage/dom.html#phrasing-content (on ne peut pas mettre <p> dans une balise <code>, mais on peut y mettre &lt;p&gt; bien sûr).

Bref ton problème n'a rien à voir avec Prism, mais avec ta compréhension du fonctionnement de la balise <code>.

EDIT : je viens de faire une recherche rapide sur le net pour trouver où ça serait expliqué clairement. Il faut vraiment lire entre les lignes pour avoir la réponse.

Amicalement,
Modifié par parsimonhi (10 Mar 2024 - 13:44)

Ok, merci, y a t il un moyen de faire un truc avec un regex, quoique je pense que "prism" l'aurait déjà fait si c'était faisable.

Bonjour,

ricem a écrit :
Ok, merci, y a t il un moyen de faire un truc avec un regex, quoique je pense que "prism" l'aurait déjà fait si c'était faisable.

Prism ne l'a pas fait parce que quand il y a du html dans la balise <code>, il faut laisser le navigateur l'interpréter !

Tu veux transformer ton code (qui est sous quelle forme) en utilisant quel outil ou quel langage et à quel moment ? Parce que je ne vois pas trop ce que tu espères faire, là !

Amicalement,
Modifié par parsimonhi (10 Mar 2024 - 15:06)

Bonjour,

Tu connais donc a priori la chaine à traiter qui a toutes les chances d'être (et rien qu'elle) dans une variable php puisque tu es en train de construire la page (certes, ce n'est pas sûr à 100% que ce soit le cas). Il suffit alors d'utiliser la fonction php htmlentities() comme cela était d'ailleurs déjà conseillé dans le fil https://forum.alsacreations.com/topic-1-69228-1-Probleme-de-coloration-syntaxique-avec-Prism-.html avec les paramètres appropriés.

Exemple complet avec Prism :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Prism</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="prism.css" rel="stylesheet" />
</head>
<body>
<?php
echo "<pre><code class=\"language-html\">";
$s="<footer><p>Qu'il est beau, mon joli footer !</p><a href=\"#\">Haut</a></footer>";
echo htmlentities($s,ENT_NOQUOTES);
echo "</code></pre>";
?>
<script src="prism.js"></script>
</footer>
</body>
</html>

Sinon, remplacer "<" et ">" peut aussi être fait avec un str_replace(), mais l'intérêt n'est pas clair. Il suffit de remplacer dans le code ci-dessus

echo htmlentities($s,ENT_NOQUOTES);

par

echo str_replace(array("<",">"),array("&lt;","&gt;"),$s);

Si par contre tes chaines contenant le html à convertir sont déjà noyées dans ta page (pas de bol), c'est certes un peu plus compliqué. Mais en as-tu vraiment besoin ?

Amicalement,

Besoin, je ne sais pas, ça dépend pour le moment c'est pour me faire une sorte de cours en rappel pour le "js"(une sorte de "mémo"), avoir si je vais utiliser beaucoup de balise html
Modifié par ricem (10 Mar 2024 - 17:56)