Intégrer le formatage automatique de codes sur votre site

Bonjour,

Si vous avez un site ou un blog qui parle de développement web alors vous serez sans doute amenés à intégrer du code dans vos pages.
Chaque code à son propre formatage, sa propre mise en valeur de la syntaxe par la couleur.
Ici sur Cocoriweb par exemple lorsque vous intégrer du code dans les messages ils sont automatiquement colorés suivant le langage utilisé.
HTML
<img src="/images/image.png" alt="mon image" />
CSS
#image {border: 3px solid red;}
JavaScript
var a = 1, b = 2, c = 3;

Et bien il y a un petit script gratuit à télécharger et que vous pouvez intégrer simplement sur votre site : PRISM !

Il y a 2 fichiers à télécharger sur votre serveur prism.css et prism.js ensuite il suffit simplement de les appeler dans votre fichier HTML
prism.css entre les balises <head>
HTML
<!DOCTYPE html>
<html>
<head>
    ...
    <link href="prism.css" rel="stylesheet" />
</head>
et prism.js à la fin du fichier HTML (comme tout fichier JavaScript en règle générale).
HTML
<body>
    ...
    <script src="prism.js"></script>
</body>
</html>

Le tour est joué.
Lorsque vous voulez intégrer du code dans vos pages il suffit d'encadrer les lignes de code entre les balises <code> et en y affectant la classe correspondante au langage utilisé, par exemple:
  • class="language-css" : concerne le code css.
  • class="language-markup" : concerne le HTML ou le XML.
  • class="language-javascript" : concerne le code JavaScript.
  • class="language-java" : concerne le code Java.
HTML
<code class="language-html">votre code html ici</code>
Prism permet de télécharger des fichiers sur mesure, il y a pratiquement tous les langages de développement et de programmation disponibles ainsi qu'une multitude de plug-ins gratuits également.

(y)
 

Jack

Membre
Question : est-ce qu'il met en évidence les erreurs de syntaxe également ?
A priori oui, puisqu'il s'il ne reconnait pas une fonction, une variable, un attribut, la coloration ne devrait pas s'appliquer donc visuellement cela devrai se repérer assez facilement.
Comme sur le forum d'ailleurs, ici il manque un r à border et le code est en rouge ;)

Capture d’écran 2020-12-23 150819.png
 

Ces discussions pourraient vous intéresser...

  • Question
Hello, je cherche à indenter la première ligne de chaque paragraphe d'un long texte. Alors je me suis lancé dans du bricolage avec des margin-left sur des span mais au niveau html c'est pas très beau. <span class="retrait_20">Il</span><span>était une fois une princesse dans...
  • Question
Salut, Juste pour vous faire découvrir un site intéressant sur JavaScript via un jeu de mots croisés sur la thématique de ce langage. Vous pouvez vous y essayer à cette adresse: http://odyssey.sdlm.be/javascript/95/cross.htm
  • Résolue
Salut, J'ai une erreur PHP que je n'arrive pas à résoudre, voici le code simplifié <!DOCTYPE html> <html> <head> <title>Cours PHP & MySQL</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body>...
Haut