Highlightjs ne fonctionne pas trop ;)

aurelie -

Bonjour,

je voudrais faire appelle de votre petite lumière afin de m'aidé depuis 2 semaines je n'arrives pas à faire fonctionner

j'ai télécharger https://highlightjs.org/

j'ai bien mis en haut de la page

<link rel="stylesheet" href="includes/highlight/styles/agate.css"><script src="includes/highlight/highlight.pack.js"></script><script>hljs.initHighlightingOnLoad();</script>

quand je met le code via le formulaire

pour info les balise sont <code=html>code html</code pur colorere le cod version geshi

mais je n'arrives pas a colorer le code en javascript

es-ce que vous avez une idée

apparement leur tuto est pas bon

merci de m'aidé

Configuration: Windows / Chrome 73.0.3683.103

Afficher la suite

5 réponses

Résumé de la discussion

Problème rencontré : la coloration syntaxique avec highlight.js ne s'applique pas au code injecté dynamiquement via un formulaire, notamment pour JavaScript, malgré l'inclusion du CSS et du pack JavaScript. Plusieurs conseils expliquent qu'il faut réinitialiser ou relancer le processus de coloration après l'injection du code, en utilisant hljs.highlightBlock et en évitant d'attendre le chargement initial du document. Des échanges insistent sur la distinction entre le document.ready et l'instant où le code est inséré, et recommandent de déclencher hljs.initHighlighting ou de réinitialiser les indicateurs de highlight.js. En cas de tentative via divers exemples, il est aussi conseillé de vérifier la console pour d'éventuels messages, et de s'assurer que les langages et balises employés correspondent bien à la configuration.

Réponse 1 / 5
jordane45 Modérateur
Bonjour,

La console de ton navigateur contient des informations ?
As tu bien mis tes balises de code entre des balises <pre> </pre> tel qu'indiqué dans la documentation ?
Documentation : https://highlightjs.org/usage/
0
1. aurelie
  
  j'ai mis dans le textarea ce code
  
  <pre><code=css> @media (min-width: 75em) { .teste { background:#162277; } }
  </pre></code>
  
  je vois bien le code dans ma previsualisation
  
  mais il ne colore pas
  
  c'est la que je ne comprends pas
  
  0
2. jordane45 Modérateur
  
  De quelle prévisualisation parles tu ??
  Il serait bien de :
  - Nous montrer des captures écran afin que l'on comprenne
  - Que tu nous montres ton code COMPLET
  
  0
Réponse 2 / 5
aurelie
en faite voilà le code

je mets mon formulaire qui est une fenetre modale ;)
```
	  
	  <form id="global-annonce-programation-modale" class="popup_block" action="toto.php" method="post" >

	  <fieldset>

	  <legend>poster du code</legend>

   	  
	  <div class="global-annonce-programation-modale">
	  <label class="annonce-programation-modale-label">choisissez votre coloration :</label>
	  <div class="annonce-programation-modale-select">
	  <div id="select-annonce-programation-1" class="choix formulaire-cliquer">
	  <span id="select-annonce-programation-2" class="hida1 icon-select">programation</span>
	  <nav id="select-annonce-programation-3" class="mutliSelect1"><ul>
	  <li class="select-choix" data-role="php">php</li>
	  <li class="select-choix" data-role="html">html</li>
	  <li class="select-choix" data-role="css">css</li>
	  <li class="select-choix" data-role="javsscript">javasscript</li>
	  <li class="select-choix" data-role="jquery">jquery</li>
	  <li class="select-choix" data-role="bdd">bdd</li>
	  </ul></nav>
	  </div>	  
	  </div>
	  </div>
   	  

	  
	  <textarea id="annonce-programation-modale-textarea" data-autoresize spellcheck="false" placeholder="mettre votre code"></textarea>
	  
	  
   	  
      <ul id="global-button-annonce-programation"><li><button type="button" class="icon-button-ajouter" value="poster-code" id="poster-code">poster le code</button></li></ul>
   	  

	  </fieldset>
	  </form>
	  
```
si on sélectionne css en suite on met un code css dans le testarea de ce formulaire ensuite on click sur le button posté code

là je verais dans le textarea cette balise
```
<code=css>prev
	  {
	  width:60em;
	  border:#000000 1px solid;
	  color:#cccccc;
	  background:#000000;
	  position:relative;
	  } 
```
</code>

et ca me donne ça come resultat

https://www.noelshack.com/2019-15-3-1554889440-capture.png

jusqu'ici c'est bon

maintenant, je vais passer à l'étape previsualisation

si on prend le code du css que j'ai mis dans le textarea, normalement, ca devrais mettre un cadre pour englober le code avec la couleur du syntaxe css ou php html etc...

ca me donne ce résultat dans la previsualisation

https://www.noelshack.com/2019-15-3-1554889822-capture1.png

tu remarqueras, il ne se colore pas le code css et aussi, j'ai mis une class prev afin de mettre une bordure pour englober le code, il ne se mets pas ou il n'a pas compris le css du prev

en attendant ta réponse , je vas essayer de faire quelque chose afin de voir si je trouves

pour finir

je te done le code coloration syntaxe pour inserrer les balise
```
	  $(function()
	  {
	  var selcode
	  
	  $('.select-choix').on('click', function()
	  {
	  selcode= $(this).data('role')
	 // $("#sel").val( selcode);
	  });
	  
	  $("#poster-code").on('click', function()
	  {
	  $("#annonce-textarea").html( "<code=" +selcode + ">" +$('#annonce-programation-modale-textarea').val() +" 
```
" )
});
});
</code>

il met bien les balises que je veux par exemple
```
code php
```
```
code css
```
```
code html
```
je sais que highlightjs il faut mettre une balise<prev>
```
 <prev><code=css>code css
```
</prev></code>

mais j'aimerais supprimer cette balise <prev> pour affichage dans le textarea
0
1. jordane45 Modérateur
  
  pas PREV ... mais PRE
  <pre><code class="html">...
  </pre>
  </code>
  
  Sachant que le code ne se coloriera pas dans le textarea... mais uniquement dans une balise <pre></pre>
  
  0
2. aurelie
  
  je sais que dans le textarea se colore pas
  
  j'ai changé le prev par pre ou PRE
  
  mais il n'a pas colore
  
  <PRE><code=css>pre { width:60em; border:#000000 1px solid; color:#cccccc; background:#000000; position:relative; }
  </PRE></code>
  
  à mon avis c'est un truc tout bête
  
  0
3. jordane45 Modérateur
  
  @aurelieUne fois que tu as posté ton code via ton javascript........ tu ré-initialise le plugin higlightjs ? car il ne s'applique qu'aux éléments déjà présents dans la page lorsque tu le charges...
  Si tu ajoutes dynamiquement du contenu... il faut réactiver le plugin pour qu'il prenne en compte ces nouveaux éléments....
  
  0
4. aurelie
  
  je fait toujours controle f5 pour réactualiser
  
  mais il ne recupere pas le code pour les couleurs ;)
  
  0
5. jordane45 Modérateur
  
  @aurelieOn va reprendre dans l'ordre...
  
  On va commencer facile....
  
  1 - As tu des messages dans la CONSOLE de ton navigateur ??? (déjà demandé 100 fois ! )
  
  2 - Ton code... tu le sauvegardes en BDD ? Et donc le souci se trouve lors de son affichage lorsque tu recharges ta page ou bien tu ne fais que l'éditer "inline" dans ta page via du javascript ???
  
  0
Réponse 3 / 5
aurelie
j'ai ms
```
<link rel="stylesheet" href="includes/highlight/styles/agate.css">
<script src="includes/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script><script>
$(document).ready(function() {
   $('#annonce-previsualiser').each(function(i, e) {hljs.highlightBlock(e)});
});</script>
```
j'ai bien mis
```
<div id="annonce-previsualiser"><pre id="div_previ"></pre></div>
```
quand j mets un mot sans code

il me met la class hljs hors je n'ai pas mis de code

et je teste avec un code , il ne veut pas colorer

pour temps j'ai bien mis pour recharger
```
<script>hljs.initHighlightingOnLoad();</script><script>
```
avez-vous une idée
0
1. jordane45 Modérateur
  
  Tu fais n'importe quoi .......
  
  As tu lu la documentation du plugin ???
  Comprends tu à quoi sert le "OnLoad" ?
  
  As tu lu ce que j'ai écri indiquant qu'après l'ajout dans ta page du code (via ton formulaire javascript), c'est à ce moment là qu'il faut reactualiser le plugin (et non dans le document.ready ).
  Sais tu, au moins, ce que fait le document ready ???
  
  J'ai l'impression qu'il te manque les bases sur le langage javascript..... il serait bien de les aquerir avant de poursuivre !
  
  0
2. aurelie
  
  @jordane45ce n'est pas grave, je laisse tomber
  
  0
3. aurelie
  
  @jordane45un dernier teste j'ai essayer de mettre sur la page
  
  <div id="annonce-previsualiser"><pre id="div_previ"></pre><script>hljs.initHighlightingOnLoad();</script><script> $(document).ready(function() { $('#annonce-previsualiser').each(function(i, e) {hljs.highlightBlock(e)}); });</script> </div>
  
  mais ca n'a pas marché
  
  0
4. jordane45 Modérateur
  
  @aurelieJe te repose la question....
  Sais tu au moins ce que fait
  (document).ready(function
  
  0
5. aurelie
  
  il appelle la dom enfin l code html
  
  mais je suis là pour apprendre
  
  0
Réponse 4 / 5
aurelie
je re tente

http://jslibrairie.ek.la/highlight-js-a112555610

lui il a fait marché

en mettant ce code
```
<link rel="stylesheet" type="text/css" href="includes/highlight/styles/agate.css">
<script src="includes/highlight/highlight.pack.js"></script>
<script>// <![CDATA[
onJSFilesLoaded.push(function(){
     hljs.initHighlighting.called = false;
     hljs.initHighlighting();});
// ]]></script>
```
et
```
<div id="annonce-previsualiser"><pre id="div_previ"></pre></div>
```
lui avec ce code ca fonctionne

mais chez moi ca ne fonctionne pas

pour quoi a votre avis
0
1. jordane45 Modérateur
  
  Pourquoi ?? ... par ce que tu n'as toujours pas compris comment fonctionne le javascript...... !
  
  Je vais essayer de te donner un exemple en métaphore :
  
  Imagine que ta page c'est une Porte
  Que la librairie higlighjs est une clé
  que le "code" que tu injectes dans ta page (via ton formulaire html/javascript) c'est une serrure...
  
  Mettre la clé alors que la serrure n'existe pas encore ne sert à rien !!!
  et pourtant.. c'est ce que tu persistes à faire !
  
  Pour lui ça fonctionne car le code à "colorié" est DEJA présent dans la page lorsque le plugin highlight.js est appellé....
  
  Ces deux lignes de code
  hljs.initHighlighting.called = false; hljs.initHighlighting();
  
  servent à réinitialiser le plugin highlight.js ..... il faut donc que toi, UNE FOIS le code à colorié INJECTE dans ta page (lorsque tu valides ton formulaire pour la prévisualisation), tu REINITIALISE le plugin....
  
  Franchement.... si là tu n'as toujours pas compris.... moi j'abandonne (et je te conseille d'en faire autant à ce moment là.... ) !
  
  0
Vous n’avez pas trouvé la réponse que vous recherchez ?

La communauté CCM répond en moyenne en moins de 2h.

Posez votre question

Zero

Hello,

Ce code fonctionne

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<pre><code class="php">
require_once 'Zend/Uri/Http.php';

namespace Location\Web;

interface Factory
{
    static function _factory();
}

abstract class URI extends BaseURI implements Factory
{
    abstract function test();

    public static $st1 = 1;
    const ME = "Yo";
    var $list = NULL;
    private $var;

    /**
     * Returns a URI
     *
     * @return URI
     */
    static public function _factory($stats = array(), $uri = 'http')
    {
        echo __METHOD__;
        $uri = explode(':', $uri, 0b10);
        $schemeSpecific = isset($uri[1]) ? $uri[1] : '';
        $desc = 'Multi
line description';

        // Security check
        if (!ctype_alnum($scheme)) {
            throw new Zend_Uri_Exception('Illegal scheme');
        }

        $this->var = 0 - self::$st;
        $this->list = list(Array("1"=> 2, 2=>self::ME, 3 => \Location\Web\URI::class));

        return [
            'uri'   => $uri,
            'value' => null,
        ];
    }
}

echo URI::ME . URI::$st1;

__halt_compiler () ; datahere
datahere
datahere */
datahere

</code></pre>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</code>

J'ai même tester avec un boutton

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="col-lg-12 text-center">
    <button class="btn btn-success" style="margin: 20px" id="color-code" type="button">Met de la couleur STP !</button>
  </div>
<pre><code class="php">
require_once 'Zend/Uri/Http.php';

namespace Location\Web;

interface Factory
{
    static function _factory();
}

abstract class URI extends BaseURI implements Factory
{
    abstract function test();

    public static $st1 = 1;
    const ME = "Yo";
    var $list = NULL;
    private $var;

    /**
     * Returns a URI
     *
     * @return URI
     */
    static public function _factory($stats = array(), $uri = 'http')
    {
        echo __METHOD__;
        $uri = explode(':', $uri, 0b10);
        $schemeSpecific = isset($uri[1]) ? $uri[1] : '';
        $desc = 'Multi
line description';

        // Security check
        if (!ctype_alnum($scheme)) {
            throw new Zend_Uri_Exception('Illegal scheme');
        }

        $this->var = 0 - self::$st;
        $this->list = list(Array("1"=> 2, 2=>self::ME, 3 => \Location\Web\URI::class));

        return [
            'uri'   => $uri,
            'value' => null,
        ];
    }
}

echo URI::ME . URI::$st1;

__halt_compiler () ; datahere
datahere
datahere */
datahere

</code></pre>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$('#color-code').click(function() {
$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
});
</script>

</code>

Tu verras plus clair ici :
https://codepen.io/anon/pen/rbwJbv

jordane45 Modérateur
aucun rapport avec la question...
Oui le plugin highlight fonctionne.... son souci c'est qu'elle ajoute le code à colorier APRES que la page et le plugin n'aient été chargés ( elle l'ajoute dynamiquement par du javascript )
Il faut lire l'ensemble de la discussion... en général ça permet de comprendre plus précisément de quoi il retourne.
Merci.
0
Zero
Comme ça ?
https://codepen.io/anon/pen/rbwJbv
0
jordane45 Modérateur
@Zeroexactement
C'est ce que j'essaie de lui faire faire (mais sans donner le code tout cuit...)
Mais oui.
0
jordane45 Modérateur
@jordane45comme dans mon message
https://forums.commentcamarche.net/forum/affich-35968542-highlightjs-ne-fonctionne-pas-trop#14
0
Zero
J'essaie de filer un coup de main, inutile de prendre les gens de haut...
PS : Quand tu dis "Et on n'est pas la pour faire le code à ta place... ", je crois que c'est "Et je ne suis pas la pour faire le code à ta place..."
Evite de mettre tout le monde dans le même panier, nous ne sommes pas toi, libre sont ceux qui souhaitent développer pour elle ou les autres !

Je te demande d'être patient avec les utilisateurs du forum. Nous n'avons pas tous la même faculité de compréhension.

Merci
0

Newsletters