Menu

Highlightjs ne fonctionne pas trop ;)

- - Dernière réponse :  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
Afficher la suite 

Votre réponse

5 réponses

Messages postés
25239
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 avril 2019
1949
0
Merci
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/
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
jordane45
Messages postés
25239
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 avril 2019
1949 -
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
Commenter la réponse de jordane45
0
Merci
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
jordane45
Messages postés
25239
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 avril 2019
1949 > aurelie -
C'est bien ce que je disais ...

1 - Tu n'as pas placé le code entre des balises <pre></pre>
2 - Tu "insères" le code en JAVASCRIPT..... tu dois donc réinitialiser le plugin higlightjs
car lorsque tu l'initialises la première fois.... le code n'est pas sur la page.... il ne sait donc pas qu'il faut lui appliquer de la couleur !
je veux bien que la balise <pre></pre> ca fera colore le code

j'avais plus ou moins compris


si je met ce code dans le textarea

<pre><code=css>	  .tester
	  {
	  background:#FFFFFF;
	  border:#000000 1px solid;
	 
	  }
</pre></code>


moi je ne veux pas qu'il apparaît les balise <pre></pre> dans textera

mais uniquement la balise





et coment on réinitialiser le plugin higlightjs

merci
jordane45
Messages postés
25239
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 avril 2019
1949 > aurelie -
Ce n'est pas dans le textarea que tu dois mettre les balises <pre> ... mais là où tu veux afficher le code

Donc, au lieu d'avoir la div dont l'id annonce-previsualiser .. tu mets un pre
<divid="annonce-previsualiser"></div>

devient
<div id="div_previ">
  <pre id="annonce-previsualiser"></pre>
</div>


Mais ce n'est qu'une partie de la réponse ....
il faut ensuite, lorsque tu cliques sur le bouton prévisualiser, réinitialiser le plugin highlight.js
Tu trouveras de la doc sur le net à ce sujet ....
un truc du genre
<code js>
$('#div_previ').each(function(i, e) {hljs.highlightBlock(e)});
</cide>
j'ai mis ca c'est dans le tuto

<script>hljs.initHighlightingOnLoad();</script>
c'est presque bon mais c'est pas encore parfait

dans la source il met la class hljs

pas ncore la couleur qu'on selectionne php css etc...

mais ca avance mais bon
Commenter la réponse de aurelie
0
Merci
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
> jordane45
Messages postés
25239
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 avril 2019
-
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é
jordane45
Messages postés
25239
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 avril 2019
1949 > aurelie -
Je te repose la question....
Sais tu au moins ce que fait
(document).ready(function

il appelle la dom enfin l code html

mais je suis là pour apprendre
jordane45
Messages postés
25239
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 avril 2019
1949 > aurelie -
Et on n'est pas la pour faire le code à ta place...
c pas grave je ferais juste un cadre sans mettre de couleur
Commenter la réponse de aurelie
0
Merci
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
jordane45
Messages postés
25239
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 avril 2019
1949 -
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à.... ) !
Commenter la réponse de aurelie
0
Merci
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
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
jordane45
Messages postés
25239
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 avril 2019
1949 > Zero -
Je ne vois qu'une seule chose à te répondre ...une petite citation

Si tu donnes un poisson à un Homme, il mangera un jour.
Si tu lui apprends à pêcher, il mangera toujours

LAO-TSEU

Maintenant, libre à toi de répondre ce que tu souhaites.
Je pense que le "ON" concerne surtout les membres (et plus particulièrement les modérateurs et contributeurs de ce forum)...

Je ne suis pas le dernier à donner du code "tout fait" lorsque les gens respectent les règles du forum, que leurs questions sont claires et précises et qu'ils donnent tous les éléments utiles à leur résolution et qu'ils montrent une certaine volonté de comprendre....
Mais quand on me répond sèchement :" je ne suis pas là pour apprendre"... et bien.. pourquoi ferai-je des efforts ?
Quand à prendre les gens de haut.. je ne suis pas certain que tu sois bien placé pour me faire cette remarque vu quelques réponses de ta part que j'ai pu voir dans d'autres discussions.
Sur ce... bonne journée.
merci pour ton lien et ton aide mais ca n'a pas marche

quand je met sur u une page vierge là ca marche

mais quand je met sur mon site

le css il prend le mauvais css du colore syntaxe et pas le mien

j'ai mis le script en bas de ma page

je prendras le temps qu'il faut pour trouver mes 2 petits souci

et j'ai tester de mettre des decimal afin d'afficher les lignes mais come c'est des span

j'ai essayer de tricher en fessant dans le css

code span mais ca n'a pas afficher mais bon ce n'est pas grave

après je vais essayer de voir comment afficher le langage ;)


même si je dois fair pendant 10 jours des teste je le prendrais ce temps ;)

je t'en remercie pou r ton aide si precieux ;)
ca ne fonctionne pas quand je met dans ma prev

mais dans une page vierge là ca fonctionne

j'ai recommencer 150000 fois ;)
je penses que j'ai cibler le souci

voilà le formulaire

  	  <!--début du global du formulaire-->
	  <form id="global-annonce" name="form" method="post">
	  <!--début du cadre qui sera caché-->
	  <div id="global-annonce-previsualiser">
	  <h2>prévisualiser</h2>
	  
	  <pre></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"> 
$('#button-previsualiser').click(function() { 
$('pre code').each(function(i, e) {hljs.highlightBlock(e)}); 
}); 
</script> 




	  <!--début du textarea du formulaire annonce-->
	  <textarea id="annonce-textarea" data-autoresize spellcheck="false" placeholder="ici le code de la balise <code=css>
" name="text"></textarea>
<!--fin du textarea du formulaire annonce-->

<!--début du boutton de formulaire-->
<ul id="global-button-annonce"><li><button class="icon-button-previsualiser" id="button-previsualiser" type="button" onclick="previsualiser();">prévisualiser</button></li><li><button class="icon-button-ajouter" type="submit">envoyer</button></li></ul>
<!--fin du boutton de formulaire-->

</fieldset>
</form></code>


quand je met le coe css qui

code css 
dans le textarea

normalement ca met directement dans la prev

mais ca ne marche pas car quand je regarde la source il me supprime la balise <pre>

pour quoi à votre avis
Commenter la réponse de Zero