5566 sujets

Sémantique web et HTML

[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)
Modérateur
Bonjour,

Il faut utiliser un "highlighter" (un code en javascript fait par d'autres et qu'on va inclure dans la page web qu'on fait, et qui fera la coloration syntaxique). Ce forum-ci utilise Prism (https://prismjs.com/).

Il y a beaucoup d'autres "highlighters" (mots clés pour les rechercher : "syntax highlighter" ou "coloration syntaxique").

Pour les détails (quoi mettre dans la page et où), voir la documentation du "highlighter" que tu choisiras. Ça se fait au plus en quelques lignes de js, et éventuellement il faudra aussi ajouter une feuille de style du "highlighter". Mais tout ça dépend de ce que tu utilises pour faire ta page (code en direct, CMS, etc.).

Les bandeaux de couleur à gauche peuvent être ajoutés via css. Par exemple, pour le code en HTML que tu donnes en exemple, la propriété css du bandeau est juste un border-left sur la balise <pre> qui contient le code d'exemple :
pre {border-left: 1rem solid #f25e23;}


Amicalement,
Modifié par parsimonhi (07 Mar 2024 - 13:33)
Meilleure solution
Re, alors j'ai un souci, cela fonctionne avec le css et JS, mais pas avec html ? j'ai regardé dans l'inspecteur, il me supprime les balises donc, il ne sont pas pas pris en compte.
<p>test</p>
devient 
test


Si vous avez des idées, je suis preneur.
Merci
Modérateur
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 Smiley ohwell
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)
Modérateur
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. Smiley biggrin
Modérateur
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. Smiley biggrin
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 ! Smiley cligne

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)
bah, je verrais un peu plus tard avec une fonction regex en php, un peu comme du bcode
un exemple :
$texte = preg_replace('#\[b\](.+)\[/b\]#isU', '<b>$1</b>', $texte); // texte gras
pour le moment je vais me contenter de l'échapper.
Modifié par ricem (10 Mar 2024 - 16:36)
Modérateur
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 Smiley sourire
Modifié par ricem (10 Mar 2024 - 17:56)
Prévenir un modérateur
Répondre au sujet
Aller à