8165 sujets

Développement web côté serveur, CMS

Bonjour,

Je suis en cours de codage d'une page WEB dans laquelle je voudrai présenter du code comme il est fait sur ce forum, c'est-à-dire en couleur, exemple :


<li>
     La personne qui m'a fait découvrir le monde souterrain
<br/>
     <a class="video" title="Vidéo" href="hobbys/Patrick/montage/Albert.php">Albert</a>
</li>


Comment faire ?
Appel à du Javascript, à du PHP, à du CSS etc ?
Je ne sais vraiment pas.

Merci pour votre aide.
Peut-être que le modérateur de ce forum pourrait m'apporter une aide particulière !

Patrick Mara
Résolu Résolu oui mais ...
Procèdes ainsi:
1) il y a plein de variantes de leur CSS et Javascript.,de ce superbe outils.
utilises donc ce code: tu as le lien sur les deux fichiers TOP, tu te les téléchargeras.

<!DOCTYPE html><html lang='fr'><head>
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<![endif]--> 
<meta name="robots" content="noindex">	
<title>Colorisation de code</title>
<style>
body { 	background-color:#ffffff;font-family:"Times New Roman", Times, serif;color:#000000; font-size:22px;margin:0;border:0;}
* {box-sizing: border-box;}
div.centre2blanc{height:auto;width:auto;max-width:900px;margin:auto;text-align:center;}
span.leTitre {font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size: 20px;color:#222224;}
img.bande2{width:100%;max-width:1000px;display: Flex;margin-left:auto;margin-right: auto; }
div.blog {height :auto;width :auto; max-width :900px; margin :auto; text-align :center;
border-bottom : 1px solid #000000;border-left : 1px solid #000000;border-top : 1px solid #000000;border-right : 1px solid #000000;
box-shadow : -1px -1px 0 #000000, -1px -1px 0 #000000 inset;border-top-left-radius : 20px;border-top-right-radius : 20px;
border-bottom-right-radius : 20px;border-bottom-left-radius : 20px;}
@media (max-width:750px){  
body {width:auto;margin : 0;}
textarea, pre, samp {overflow-wrap:break-word;hyphens:auto;}
img,blockquote, pre, textarea, input, iframe, object, embed, video {max-width:100%;}
pre, samp {white-space:pre-wrap;}
}
</style>
<link href="http://www.fox-infographie.com/lesw/prism.css" rel="stylesheet" />
</head><body>
<div class="centre2blanc">
<br /><br /><span class="leTitre">Test Colorisation</span>
<br /><br />	
<div class="blog"><pre><code class="language-html">
************TON CODE COMPILE ICI **************
</code></pre>
</div>
<br /><br /><img src='http://www.fox-infographie.com/logos/stmichel.jpg' alt=' ' class='bande2'  />
<br /><br />
<script src="http://www.fox-infographie.com/lesw/prism.js"></script>
</div></body></html>

2) converti ICI ton code
En effet il faut que le code soit ainsi, alors fais le ici, puis tu clic droit
et choisi afficher le code source et récupères le pour l'introduire la ou jr t"ais indiqué.
http://les-astuces-du-web.com/colorisation.php
Alors tu aura ceci !
http://les-astuces-du-web.com/Colorisation.htm
Voila !!
Modifié par Jean-Pierre-Bruneau (23 May 2020 - 11:07)
Bonjour,

Merci pour votre apport mais j'ai récupéré prism.css et prism.js sur le site original et l'utilisation que j'en fait me convient très bien.
En ce qui concerne le CSS, j'ai en fait récupéré celui de ce forum, la coloration me convenant aussi très bien.

Cordialement
Patrick MARA
Bonjour,

Comme je l'ai écrit, j'ai récupéré le CSS de colorisation à la ligne 48 du code de ce forum :

<link rel="stylesheet" href="//cdn.alsacreations.net/css/prism.min.css">

Click sur cette ligne, copier , coller dans une feuille CSS, faire le link avec cette feuille.

Cordialement
Patrick MARA