Intégrer le formatage automatique de codes sur votre site

Victorinox · 22 Déc. 2020

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 !

Prism

prismjs.com

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.

DaCode · 23 Déc. 2020

Pas mal du tout ce petit PRISM.
Question : est-ce qu'il met en évidence les erreurs de syntaxe également ?

Jack · 23 Déc. 2020

DaCode à dit:
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

Intégrer le formatage automatique de codes sur votre site

Victorinox

Membre

Prism

DaCode

Membre

Jack

Membre

Ces discussions pourraient vous intéresser...