Comment faire la coloration de code source sur un blog ?

Résolu
busenu21 -  
 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
A voir également:

3 réponses

Réponse 1 / 3
cs_PaTaTe Messages postés 2126 Date d'inscription   Statut Contributeur Dernière intervention   497
 
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,
0
Réponse 2 / 3
[Dal] Messages postés 6205 Date d'inscription   Statut Contributeur Dernière intervention   1 105
 
Salut busenu21,

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

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

sont communément utilisées

Dal
0
busenu21
 
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
0
Réponse 3 / 3
[Dal] Messages postés 6205 Date d'inscription   Statut Contributeur Dernière intervention   1 105
 
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
0
busenu21
 
bonsoir Dal

merci beaucoup pour tous ces information pratique cher ami
0