Comment faire la coloration de code source sur un blog ? [Résolu]

Signaler
-
 busenu21 -
bonjour mes chers amis tout d'abord mes vœux les meilleurs a tous

j'ai un problème qui m'agace vraiment et je ne trouve toujours pas des solutions, voici mon problème :

comment faire la coloration de code source sur une page web ?
quand je rédige par exemple un tuto qui explique comment crée une page web que le code soit coloré quand le visiteur lut le tuto.

merci d'avance mes chers amis

3 réponses

Messages postés
2075
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
16 mars 2020
289
Bonjour,

Pour simplifier à outrance, un système de colorisation syntaxique va substituer un mot du langage par ce même mot mais en lui ajoutant un style. Par exemple admettons que ton code soit stocké dans la variable $code :

$colCode = replace_str('function', '<span style="color:blue;">function</span>', $code);

$colCode contiendra le code avec le mot function colorisé en bleu. Ceci n'a de pour but que te montrer simplement comment faire mais il est préférable de passer par un CSS au lieux de mettre le style en dur, rien que pour la maintenance, ça sera plus simple ^^

Après, je suis sur que des classes PHP voire même JS existent pour faire le taf

Cordialement,
Messages postés
5385
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
13 juillet 2020
885
Salut busenu21,

Pour la coloration syntaxique, des bibliothèques JavaScript comme :

https://highlightjs.org/
https://highlightjs.org/usage/

sont communément utilisées

Dal
bonjour Dal merci pour la réponse , je veut voir ces bibliothèques tout suite.

si non est ce que tu connais un tuto qui illustre celà ?

merci cordialement
Messages postés
5385
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
13 juillet 2020
885
Le lien que j'ai donné https://highlightjs.org/usage/ comporte un tutoriel "Getting started" qui explique comment utiliser la bibliothèque JavaScript dans le code de ton site.

Tu n'indiques rien sur ton site, ou ton système de blog, ni sur tes propres contraintes techniques.

Cette bibliothèque peut être utilisée de multiples façons, y compris sur un serveur Node.js

Pour une utilisation côté client, en gros, tu as le choix d'héberger la bibliothèque sur ton site, ou d'utiliser une bibliothèque packagée disponible sur un serveur CDN hébergeant la bibliothèque pour toi.

Tu trouves ces informations sur la page précitée et la partie "Getting the Library", et sur le lien "download" tu vas obtenir aussi les URL à utiliser si tu optes pour un CDN, vois :

https://highlightjs.org/download/

qui comporte les liens vers jsdelivr

Par exemple, pour utiliser le package standard sur le CDN jsdelivr qui supporte tous les langages mentionnés dans la section "Common", tu peux faire :

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet"
      href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.0/build/styles/default.min.css">
  <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.0/build/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>

<h1>This is an example of use of highlight.js</h1>
<p>for C code:</p>
<pre><code class="c++">
#include <stdio.h>

int main(void) {
    printf("hello, world\n");
    
    return 0;
}
<∕code></pre>

</body>
</html>


en ligne 21 j'ai été obligé de remplacer le slash de
<∕code>
par un caractère UTF8 y ressemblant pour que la coloration de syntaxe du forum affiche le code jusqu'au bout. Dans ton code à toi, met un vrai slash
/
.

Dal
bonsoir Dal

merci beaucoup pour tous ces information pratique cher ami