Comment faire la coloration de code source sur un blog ?
Résolu/Fermé
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
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:
- Comment faire la coloration de code source sur un blog ?
- Code ascii de a - Guide
- Comment déverrouiller un téléphone quand on a oublié le code - Guide
- Code puk bloqué - Guide
- Comment créer un qr code - Guide
- Code activation windows 10 - Guide
3 réponses
cs_PaTaTe
Messages postés
2126
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
19 février 2021
496
28 janv. 2020 à 12:16
28 janv. 2020 à 12:16
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,
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,
[Dal]
Messages postés
6203
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
29 janvier 2025
1 098
28 janv. 2020 à 13:10
28 janv. 2020 à 13:10
Salut busenu21,
Pour la coloration syntaxique, des bibliothèques JavaScript comme :
https://highlightjs.org/
https://highlightjs.org/usage/
sont communément utilisées
Dal
Pour la coloration syntaxique, des bibliothèques JavaScript comme :
https://highlightjs.org/
https://highlightjs.org/usage/
sont communément utilisées
Dal
[Dal]
Messages postés
6203
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
29 janvier 2025
1 098
Modifié le 29 janv. 2020 à 19:25
Modifié le 29 janv. 2020 à 19:25
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 :
en ligne 21 j'ai été obligé de remplacer le slash de
Dal
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