Comment faire la coloration de code source sur un blog ?
Résolu/Fermé
A voir également:
- Comment faire la coloration de code source sur un blog ?
- Comment faire un blog - Guide
- Code asci - Guide
- Comment créer un qr code - Guide
- Code puk bloqué - Guide
- Code de déverrouillage oublié - 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
493
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
6174
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
2 février 2024
1 083
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
6174
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
2 février 2024
1 083
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
