styliser le background d'un tag en utilisant le style de l'enfant

Le problème exposé dans ce sujet a été résolu.

Hello,
je m’amuse à me faire un thème pour hugo avec tailwindcss J’utilise un render hook pour définir comment doivent apparaitre mes blocks de code. Mon fichier qui définis le hook est le suivant.

<code>
  <pre class="overflow-scroll block border rounded-lg">
      {{ highlight .Inner .Type }}
  </pre>
</code>

Le soucis est que le style n’est pas appliqué partout: la couleur ne prend pas tout l’espace disponible. Pour illustrer le problème de la couleur de fond

Capture d’écran 2022-09-12 à 00.22.26.png il s’agit d’une capture d’écran de bout de code qui a été coloré. On peut voir que le fond ne remplis par tout.

J’aimerais bien appliquer le style de la div enfant (généré par le syntax highlighter de hugo) sur mon tag <pre> afin d’avoir qqch d’uniforme.
Comment je peux faire ça ?

Si ça peut aider, voici le code htlm généré (à l’intérieur de <code>)


  <pre class="overflow-scroll block border rounded-lg">      <div class="highlight"><div style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
<table style="border-spacing:0;padding:0;margin:0;border:0;"><tbody><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">16
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">17
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">18
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">19
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">20
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">21
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">22
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">23
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">24
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">25
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">26
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">27
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">28
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">29
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">30
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">31
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">32
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">33
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">34
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">35
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">36
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">37
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">38
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">39
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">40
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">41
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">42
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">43
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">44
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"carousel"</span>&gt;
</span></span><span style="display:flex;"><span>    &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"yearContainer no-animation"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"width: 11880px; right: -11320px;"</span>&gt;
</span></span><span style="display:flex;"><span>        &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"year"</span>&gt;
</span></span><span style="display:flex;"><span>            &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"tempLine"</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>            &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"monthContainer"</span>&gt;
</span></span><span style="display:flex;"><span>                <span style="color:#75715e">&lt;!-- Here are empty month (not yet filled with data) --&gt;</span> 
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m1 month none"</span> <span style="color:#a6e22e">data-placement</span><span style="color:#f92672">=</span><span style="color:#e6db74">"top"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;&lt;<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m1n-1 month monthN-1 none"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;&lt;<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m1f-1 month monthF-1 none"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;&lt;<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m1a-1 month monthA-1 none"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;&lt;<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m1v-1 month monthV-1 none"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;&lt;<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m1i-1 month monthI-1 none"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;&lt;<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m1p-1 month monthP-1 none"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;&lt;<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>            
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m2 month none"</span> <span style="color:#a6e22e">data-placement</span><span style="color:#f92672">=</span><span style="color:#e6db74">"top"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;&lt;<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m2n-1 month monthN-1 none"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;&lt;<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m2f-1 month monthF-1 none"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;&lt;<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m2a-1 month monthA-1 none"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;&lt;<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m2v-1 month monthV-1 none"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;&lt;<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m2i-1 month monthI-1 none"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;&lt;<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m2p-1 month monthP-1 none"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;&lt;<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>                
</span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- skiped a few ones --&gt;</span> 
</span></span><span style="display:flex;"><span>               &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m9 month out"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"height: 141.127px;"</span> <span style="color:#a6e22e">data-content</span><span style="color:#f92672">=</span><span style="color:#e6db74">"                        &lt;div class=&amp;quot;infos clearfix&amp;quot;&gt;                            &lt;div class=&amp;quot;left&amp;quot;&gt;                                &lt;div class=&amp;quot;kwh&amp;quot;&gt;334&lt;span class=&amp;quot;unit&amp;quot;&gt; kWh&lt;/span&gt;&lt;/div&gt;                                &lt;span&gt;soit environ&lt;/span&gt;                                &lt;div class=&amp;quot;chf&amp;quot;&gt;67&lt;span class=&amp;quot;unit&amp;quot;&gt; CHF&lt;/span&gt;&lt;/div&gt;                            &lt;/div&gt;                            &lt;div class=&amp;quot;right&amp;quot;&gt;                                &lt;div class=&amp;quot;percent&amp;quot;&gt;10&lt;span class=&amp;quot;unit&amp;quot;&gt;% &lt;/span&gt;&lt;/div&gt;&lt;strong&gt; de hausse&lt;/strong&gt;                                &lt;p&gt; sur ma consommation d'électricité par rapport au mois de avril 2021&lt;/p&gt;                            &lt;/div&gt;                        &lt;/div&gt;                        "</span> <span style="color:#a6e22e">data-placement</span><span style="color:#f92672">=</span><span style="color:#e6db74">"top"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;
</span></span><span style="display:flex;"><span>			&lt;<span style="color:#f92672">span</span>&gt;334&lt;/<span style="color:#f92672">span</span>&gt;
</span></span><span style="display:flex;"><span>		&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>		&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m9n-1 month monthN-1 out"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"height: 128.873px;"</span> <span style="color:#a6e22e">data-content</span><span style="color:#f92672">=</span><span style="color:#e6db74">"&lt;div class=&amp;quot;infos small clearfix&amp;quot;&gt;&lt;div class=&amp;quot;left&amp;quot;&gt;&lt;div class=&amp;quot;kwh&amp;quot;&gt;305&lt;span class=&amp;quot;unit&amp;quot;&gt; kWh&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;
</span></span><span style="display:flex;"><span>			&lt;<span style="color:#f92672">span</span>&gt;305&lt;/<span style="color:#f92672">span</span>&gt;
</span></span><span style="display:flex;"><span>		&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>		&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m9f-1 month monthF-1 out"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"height: 141.972px;"</span> <span style="color:#a6e22e">data-content</span><span style="color:#f92672">=</span><span style="color:#e6db74">"&lt;div class=&amp;quot;infos small clearfix&amp;quot;&gt;&lt;div class=&amp;quot;left&amp;quot;&gt;&lt;div class=&amp;quot;kwh&amp;quot;&gt;336&lt;span class=&amp;quot;unit&amp;quot;&gt; kWh&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;
</span></span><span style="display:flex;"><span>			&lt;<span style="color:#f92672">span</span>&gt;336&lt;/<span style="color:#f92672">span</span>&gt;
</span></span><span style="display:flex;"><span>		&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>		&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m9a-1 month monthA-1 none"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;
</span></span><span style="display:flex;"><span>			&lt;<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;
</span></span><span style="display:flex;"><span>		&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>		&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m9v-1 month monthV-1 none"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;
</span></span><span style="display:flex;"><span>			&lt;<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;
</span></span><span style="display:flex;"><span>		&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>		&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m9i-1 month monthI-1 none"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;
</span></span><span style="display:flex;"><span>			&lt;<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;
</span></span><span style="display:flex;"><span>		&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>		&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"m9p-1 month monthP-1 out"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"height: 187.059px;"</span> <span style="color:#a6e22e">data-content</span><span style="color:#f92672">=</span><span style="color:#e6db74">"&lt;div class=&amp;quot;infos small clearfix&amp;quot;&gt;&lt;div class=&amp;quot;left&amp;quot;&gt;&lt;div class=&amp;quot;kwh&amp;quot;&gt;106&lt;span class=&amp;quot;unit&amp;quot;&gt; kWh&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;"</span> <span style="color:#a6e22e">data-original-title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">""</span>&gt;
</span></span><span style="display:flex;"><span>			&lt;<span style="color:#f92672">span</span>&gt;106&lt;/<span style="color:#f92672">span</span>&gt;
</span></span><span style="display:flex;"><span>		&lt;/<span style="color:#f92672">div</span>&gt;            </span></span></code></pre></td></tr></tbody></table>
</div>
</div>
  </pre>
+0 -0

ok, j’ai changé je met dans mon tailwindcss.js 

@layer components{
    .highlight{
       @apply overflow-scroll flex rounded-lg;
    }
}

et mon render-code hook ressemble désormais à ça 

<pre >
    <code >
        {{ highlight .Inner .Type }}
    </code>
</pre>

Et le background est bon !
je cherche à ajouter un en tête avec le langage de programmation affiché (.Type) mais j’aimerais pouvoir le stylisé. J’ai donc mis une div autour de {{ .Type }} mais un espace se forme entre ma div et la div highlight

<pre >
<code>
<div class="bg-blue-500 p-0 m-0">
{{ .Type }}
</div>
{{ highlight .Inner .Type }}
</code>
</pre>
Capture d’écran 2022-09-12 à 14.28.46.png
Capture d’écran 2022–09–12 à 14.28.46.png

Dans l’idée je veux mettre un bouton copier le text et un endroit qui indique le langage. Mais il faudrait coller cet entête avec la div de code pour que ça soit pas bizarre.

C’est la première fois que je fais du web et je suis un peu perdu

+0 -0

Alors attention à la sémantique : la <div> avec le langage n’est pas du code préformaté mais une indication sur le code partagé : il ne faut donc pas l’inclure dedans.

Je te conseillerais d’utiliser une balise <figure> autour de ton code, un peu comme ça :

<figure>
    <figcaption>Langage : HTML</figcaption>
    <pre>
        <code><!-- Ton code ici --></code>
    </pre>
</figure>
+0 -0

Magnifique ! ça fonctionne parfaitement un grand merci ! Tu en penses quoi du design ?

Design sombre 1
Design sombre 1

J’ai rajouté une bordure à la figcaption afin de la séparer du reste, mais maintenant j’ai l’impression que l’entête est en surbrilliant comme si elle était sélectionnée ou qqch comme ça.

Design clair 1
Design clair 1
Sombre version 2
Sombre version 2

en sombre j’aime bien la version 2. Pour la version clair, je vais voir pour utiliser un autre style de l’highlighter de hugo et j’affinerai à ce moment.

Maintenant (si je peux encore te déranger) j’aimerais bien faire fonctionner mon bouton, j’ai vu que chroma (l’highlighter de hugo) génère une liste de <span> par ligne de code, je peux donc faire un parcoure en largeur de mon noeud parent en javascript et récupérer ligne par ligne le contenu puis mettre le clipboard à cette valeur.

Le souci c’est que je vais surement avoir plusieurs morceaux de code dans une page, comment les différencier ?
C’est toujours le même code qui est généré par mon hook-render (seul le contenu change), et il ne me semble pas que j’ai accès à un contexte qui me dit le nombre de fois où le hook à été appelé.

Donc si j’ai un morceau de code avec un id, tous les autres auront le même id.

J’imagine que je peux faire quelque chose du style "depuis le bouton appelant prend la première div highlight située en dessous"

Mais ça implique de trouver le bouton qui appelle ma fonction, pour ce faire j’ai trouvé ceci.
Il existe plus simple ou c’est la bonne manière de faire ?

+0 -0

Je préfère aussi le dernier design, mais j’ajusterais les espaces autour du langage pour avoir le même tout autour et je supprimerais les lignes vides entre l’entête et le code. :)

Alors fais attention avec du vieux code d’il y a 12 ans, tu tomberas facilement sur des trucs dépréciés ou non standards.

Le plus simple serait d’attribuer une class à ces boutons puis de les sélectionner en JS avec un querySelectorAll et de boucler dessus pour leur appliquer un EventListener.

À partir de là quand le listener sera appelé tu auras ton event avec une propriété target qui sera le bouton ciblé.

Ensuite tu pourras utiliser le DOM pour récupérer ton <pre> voisin (ou presque voisin) et son innerText qui devrait correspondre au bloc de code au complet. :)

+0 -0

Hello, J’ai suivis tes conseils, le bouton Copy fonctionne parfaitement et j’ai collé le header avec le code, Pour faire ça j’ai enlevé les <code><pre> car le highliter en mettait déjà.

J’ai voulu tester mon bouton avec plusieurs bout de code, voir si tout fonctionne et … presque tout fonctionne ^^

Exemple de petit code
Exemple de petit code

J’ai donc rajouté une div autour de mon template et je suis arrivé à 

<figure class="py-5 ">
    <figcaption style="background-color:#323232;" class="rounded-t-2xl grid grid-cols-2  ">
        ...
    </figcaption>
    <div class="flex">
       <!-- <code> et <pre> sont plus la -->
       {{ highlight .Inner .Type }}
    </div>
</figure>

Malheureusement ça ne fonctionne pas, même en ajoutant (à la main) flex-item à ma div highlight générée par le template.
j’ai essayé en indiquant la taille mais 

<div class="w-2/3">
    {{ highlight .Inner .Type }}
</div>
avec class="w-2/3"
avec class="w-2/3"

j’arrive à restreindre la taille mais pas à l’agrandir. J’ai aussi ajouté une min-width en css. Si min width avait marché j’aurais définis une min width pour chaque taille d’écran et je m’en sortait. Mais la je n’ai plus d’idée. Voila ce que j’ai essayé : 

<div style="min-width: 10000px;">
    {{ highlight .Inner .Type }}
</div>

Mais à nouveau seul la grand div à été impactée (à débordé de l’écran), la couleur de fond générée par le petit template n’a pas grandit.

Je suis à nouveau bloqué :/ et les exemples en ligne soit ne fonctionnent pas soit pas correctement.

Il y a vraiment qqch avec le css et moi.

Est-ce que tu pourrais encore me donner un coup de main pour avoir la div highlight générée par {{ highlight .Inner .Type }} qui prend toute la taille possible (sans déborder de l’écran)?

+0 -0

J’ai regardé un peu les styles. D’après ce que je vois : la div highlight est correcte niveau taille, mais c’est la div enfant (qui contient un tableau) qui n’est pas de la bonne taille. En ajoutant manuellement "width:100%;" sur la div enfant, la taille est correcte !

Affichage des styles La capture d’écran provient du code suivant : 

<figure>
   <figcaption>
         ...
   </figcaption>
    <div>
        {{ highlight .Inner .Type }}
    </div>
</figure>

Ajouter ou supprimer la <div> autour de {{ highlight .Inner .Type }} ne change rien.
les tags autour de ma figure sont (avec leur css)

<html>
    <body class="bg-white dark:bg-gray-800 dark:text-gray-50">  
        <main class="text-md sm:text-lg mx-5 sm:mx-10 md:mx-24 lg:mx-44 xl:mx-60 2xl:mx-72 w-auto">  
            <div class="container justify-center">  
                <ma figure de code></>
            </div>
        </main>
    </body>
</html>

L’html généré par {{ highlight .Inner .Type }} est le suivant : 

<div class="highlight">
    <div style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
        <table style="border-spacing:0;padding:0;margin:0;border:0;">
            <tbody>
                <tr>
                    <td style="vertical-align:top;padding:0;margin:0;border:0;"></td>
                    <td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
                        <pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
                            <code class="language-go" data-lang="go">
                                <span style="display:flex;"></span> 1 par ligne de code
                            </code>
                        <pre>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte