Sujet Précédent Sujet Suivant

Highlightjs ne fonctionne pas trop ;)

Fermé
aurelie - 10 avril 2019 à 10:32
 aurelie - 14 avril 2019 à 00:16
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

5 réponses

Réponse 1 / 5
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
10 avril 2019 à 10:36
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
aurelie
10 avril 2019 à 11:15
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
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
10 avril 2019 à 11:16
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
10 avril 2019 à 12:01
en faite voilà le code

je mets mon formulaire qui est une fenetre modale ;) 

	  <!--début du global du formulaire-->
	  <form id="global-annonce-programation-modale" class="popup_block" action="toto.php" method="post" >

	  <fieldset>

	  <legend>poster du code</legend>

   	  <!--début : on affiche la selectionne des programmes-->
	  <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>
   	  <!--fin : on affiche la selectionne des programmes-->

	  <!--début du textarea du formulaire annonce-->
	  <textarea id="annonce-programation-modale-textarea" data-autoresize spellcheck="false" placeholder="mettre votre code"></textarea>
	  <!--fin du textarea du formulaire annonce-->
	  
   	  <!--début du boutton pour poster le code-->
      <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>
   	  <!--fin du boutton pour poster le code-->

	  </fieldset>
	  </form>
	  <!--fin du global du formulaire-->



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
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
10 avril 2019 à 12:20
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
aurelie
10 avril 2019 à 13:19
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
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > aurelie
10 avril 2019 à 14:04
Une 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
aurelie
10 avril 2019 à 14:20
je fait toujours controle f5 pour réactualiser

mais il ne recupere pas le code pour les couleurs ;)
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > aurelie
10 avril 2019 à 14:31
On 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
11 avril 2019 à 13:51
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
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
11 avril 2019 à 15:25
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
aurelie > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
11 avril 2019 à 17:37
ce n'est pas grave, je laisse tomber
0
aurelie > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
11 avril 2019 à 21:37
un 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
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > aurelie
11 avril 2019 à 22:33
Je te repose la question....
Sais tu au moins ce que fait 
(document).ready(function
0
aurelie
11 avril 2019 à 23:32
il appelle la dom enfin l code html

mais je suis là pour apprendre
0
Réponse 4 / 5
aurelie
12 avril 2019 à 10:12
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
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
12 avril 2019 à 10:36
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 ?

Posez votre question
Réponse 5 / 5
Zero
Modifié le 12 avril 2019 à 10:51
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
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
12 avril 2019 à 10:39
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
12 avril 2019 à 10:52
Comme ça ?
https://codepen.io/anon/pen/rbwJbv
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > Zero
12 avril 2019 à 11:01
exactement
C'est ce que j'essaie de lui faire faire (mais sans donner le code tout cuit...)
Mais oui.
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
12 avril 2019 à 11:03
comme dans mon message
https://forums.commentcamarche.net/forum/affich-35968542-highlightjs-ne-fonctionne-pas-trop#14
0
Zero
Modifié le 12 avril 2019 à 11:10
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