Site du zér0
Bonjour,
Pourriez vous me dire comment M@teo 21 fait sur son site ( https://openclassrooms.com/fr/ ) pour les zones de codes dans les tutos ???
merci
Pourriez vous me dire comment M@teo 21 fait sur son site ( https://openclassrooms.com/fr/ ) pour les zones de codes dans les tutos ???
merci
Configuration: Windows XP Internet Explorer 7.0
6 réponses
-
ContributeurPourquoi ne lui demandes-tu pas ?
-
ContributeurSALUT
Si ton site est en php tu peux le faire avec GeSHi
http://qbnz.com/highlighter/
si il est en html tu le fais avec syntaxhighlighter
https://code.google.com/archive/p/syntaxhighlighter
RAD -
ContributeurFranzux : Merci pour l'idée.Je lui ai envoyé un MP .
RAD ZONE :comment fait on pour utiliser syntaxhighlighter?? -
Contributeur;-))
1 il faut le telecharger !!
ensuite sur les pages ou tu veux mettre du code visible tu dois
1 mettre le css<link type="text/css" rel="stylesheet" href="SyntaxHighlighter/Styles/SyntaxHighlighter.css">
2 mettre tout en bas juste avant le </html> ces js<script language="JavaScript" src="SyntaxHighlighter/Scripts/shCore.js" type="text/javascript"></script> <script language="JavaScript" type="text/javascript">dp.SyntaxHighlighter.HighlightAll('code');</script>
tu ajoute a ces js celui qui corespond au code que tu vas presenter !
exemple si sur ta page tu vas presente du php et du html tu rajoute ces 2 js (shBrushXml c et pour le html et shBrushPhp est lui pour le php<script language="JavaScript" src="SyntaxHighlighter/Scripts/shBrushXml.js" type="text/javascript"></script> <script language="JavaScript" src="SyntaxHighlighter/Scripts/shBrushPhp.js" type="text/javascript"></script>
3 a l endrois ou tu veux voir le code tu le met dans un texte area et tu lui donne la class qui corespond class="php:collapse:" dans cette exemple car le code mis entre le texte area est du php tu met xmlsi c est du html<textarea name="code" class="php:collapse:"><?php TON CODE PHP ICI } ?> </textarea>
PS : si tu enleve colapse le code est toujours visible ; si tu le met il faut cliquer pour le voir !!
RAD -
Le sdz est passé sous Pygments depuis peu : https://pygments.org/
-
regarde le code source de la zone 'code'
<span class="cp"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></span> <span class="nt"><html</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/1999/xhtml"</span> <span class="na">xml:lang=</span><span class="s">"fr"</span> <span class="nt">></span> <span class="nt"><head></span> <span class="nt"><title></span>Bienvenue sur mon site !<span class="nt"></title></span> <span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=iso-8859-1"</span> <span class="nt">/></span> <span class="nt"></head></span> <span class="nt"><body></span> <span class="nt"><h1></span>Titre super important<span class="nt"></h1></span> <span class="nt"><h2></span>Titre important<span class="nt"></h2></span> <span class="nt"><h3></span>Titre un peu moins important (sous-titre)<span class="nt"></h3></span> <span class="nt"><h4></span>Titre pas trop important<span class="nt"></h4></span> <span class="nt"><h5></span>Titre pas important<span class="nt"></h5></span> <span class="nt"><h6></span>Titre vraiment pas important du tout<span class="nt"></h6></span> <span class="nt"></body></span> <span class="nt"></html></span>
