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

**ab1to** · 31/03/2020, 18h45

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

**NoSmoking** · 31/03/2020, 21h45

Bonjour,

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

**ab1to** · 01/04/2020, 12h07

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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.

**NoSmoking** · 01/04/2020, 16h35

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Invité · 06/04/2020, 12h09

Bonjour,

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**NoSmoking** · 06/04/2020, 16h08

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
const oElem = document.querySelector("pre"); // ou autre cible
oElem.textContent =  oElem.innerHTML;

les solutions sont bien nombreuses en fait.

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

Conception Web

Vue hybride

Discussions similaires

Partager

Partager