Afficher du code HTML ou CSS dans une page web en conservant la structure des balises et les couleurs

Version imprimable

31/03/2020, 18h45
ab1to

Afficher du code HTML ou CSS dans une page web en conservant la structure des balises et les couleurs

Bonjour à tous,

Je suis débutant en programmation web et je voudrais me créer une page avec des exemples de mise en page et autres trucs et astuces.

Pour cela, j'aimerais pouvoir afficher dans la page web des bouts de code.

Un exemple :

Je veux créer une section avec un exemple d'animation en css.
Je vais donc afficher mon animation dans ma page, mais je voudrais aussi afficher le code html et le code css correspondant pour ne pas devoir chercher dans le code de la page entière si je veux m'en inspirer plus tard.

Existe-t-il un moyen d'afficher ce code proprement comme dans les sites de formation ?

Merci d'avance pour votre aide.

Anthony
31/03/2020, 21h45
NoSmoking

Bonjour,

Citation:

Existe-t-il un moyen d'afficher ce code proprement

pour ce faire il existe les balises <pre> et <code>, ensuite la coloration syntaxique peut être réalisé en utilisant des outils comme prism.js par exemple.

Exemple de mise en oeuvre : Effet ruban sur un titre
01/04/2020, 12h07
ab1to

J'ai essayé d'ajouter prism, mais si j'ajoute dans mon html :

Code:

<pre><code><h1>Cette balise représente un titre de niveau h1</h1></code></pre>

,<h1>Cette balise représente un titre de niveau h1</h1> n'est pas considéré comme du 'texte'. La balise <h1> est bien appliquée à mon texte.
01/04/2020, 16h35
NoSmoking

Il faut que tu utilises les entités HTML, < et > et mettre le type de coloration/langage que tu vises

Code:

<pre><code class="language-markup"><h1>Cette balise représente un titre de niveau h1</h1></code></pre>

Bonjour,

Citation:

Envoyé par NoSmoking

Il faut que tu utilises les entités HTML, < et >

Au lieu de tout "se cogner à la main", on peut (en PHP) utiliser htmlspecialchars() :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <h4>Structure basique HTML5 : </h4> <pre><code class="language-markup"><?php echo htmlspecialchars('<!doctype html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> '); ?></code></pre>

06/04/2020, 16h08
NoSmoking
Citation:

Au lieu de tout "se cogner à la main", ...

d'un autre côté, il n'est pas bien compliquer de faire un remplacement, certains outils sont même pourvus pour cela et il y à le simple fait de mettre le code en HTML dans la balise <pre> et de mettre un simple bout de JavaScript du type :
Code:

1 2 const oElem = document.querySelector("pre"); // ou autre cible oElem.textContent = oElem.innerHTML;
les solutions sont bien nombreuses en fait.