Un bouton copier-coller html qui échappe aux échappements de Blogger


Si vous développez des thèmes Blogger ou pour toutes autres raisons, et que vous aimez partager votre travail, ce qui est mon cas, le besoin d'une zone à copier-coller avec un bouton 'Copier' est un must. Regardez la beauté de la chose dans cet article et profitez-en !

Le problème

Quand on introduit du code en mode "Rédiger" dans un article, Blogger le transforme avec des codes d'échappement et surtout remplace les sauts de ligne par des balises <br />. L'intégrer directement dans le code html de l'article n'est pas une option car ça n'apparaitra pas en mode "Rédiger", ni à l'affichage de la page. 

De plus quand on colle le code par exemple dans le XML d'un thème Blogger, ou un traitement de texte, tout se retrouve sur la même ligne. Pas terrible !

La solution

Mon copain ChatGPT m'a fourni de quoi arranger ça, ce que vous pouvez admirer juste en-dessous. Il s'agit d'une feuille de style et d'un script à copier en bas de la section <body> du thème de votre blog.



<style>
  .code-container {
    position: relative;
    margin: 20px 0;
    background: #f4f4f4;
    padding: 15px;
    border-radius: 5px;
    font-family: &#39;Courier New&#39;, monospace;
  }
  .code-container pre {
    max-height: 200px; /* Ajustez la hauteur selon vos besoins */
    overflow: auto; /* Ajoute un défilement si le code est trop long */
    white-space: pre-wrap; /* Permet le retour à la ligne si nécessaire */
    word-wrap: break-word;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
  }
  .copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    background-color: #007bff; /* Bleu moderne */
    border: none;
    border-radius: 15px; /* Coins arrondis */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
  }

  .copy-button:hover {
    background-color: #0056b3; /* Bleu plus foncé au survol */
  }

  .copy-button:active {
    transform: scale(0.95); /* Légère réduction au clic */
  }

  .copy-button.copied {
    background-color: #28a745; /* Vert de confirmation */
  }
</style>

<script>
function copyToClipboard(button) {
  var container = button.closest(&quot;.code-container&quot;);
  var codeElement = container.querySelector(&quot;pre&quot;) || container.querySelector(&quot;textarea&quot;);
  var code = codeElement.innerHTML.replace(new RegExp(&quot;&lt;br */?&gt;&quot;, &quot;gi&quot;), &quot;\n&quot;);

  var textArea = document.createElement(&quot;textarea&quot;);
  textArea.innerHTML = code;
  var decodedCode = textArea.value;

  var tempTextArea = document.createElement(&quot;textarea&quot;);
  tempTextArea.value = decodedCode;
  document.body.appendChild(tempTextArea);

  tempTextArea.select();
  document.execCommand(&quot;copy&quot;);
  document.body.removeChild(tempTextArea);

  button.textContent = &quot;Copié !&quot;;
  button.classList.add(&quot;copied&quot;);

  setTimeout(() =&gt; {
    button.textContent = &quot;Copier&quot;;
    button.classList.remove(&quot;copied&quot;);
  }, 1500);
}
</script>

Ensuite dans le code html de l'article ajoutez le code ci-dessous à l'emplacement souhaité :



<div class="code-container">
<pre><br />
&lt;!--Emplacement du code à copier-coller--&gt;
<br />
</pre>
<button class="copy-button" onclick="copyToClipboard(this)"><span style="background-color: transparent; text-align: left;">Copier</span>
  </button>
</div>

Puis en mode "Rédiger" intégrez le code que vous souhaitez partager. Vérifiez qu'il est bien entre les balises <pre>.

Les avantages

  • le code à copier-coller reste lisible et bien aligné une fois copié.
  • la zone à copier dans l'article est ajustable en hauteur afin de ne pas l'encombrer.
  • en jouant avec la feuille de style fournie on peut régler le bouton à son goût ou en fonction du style du blog.

Les inconvénients

  • un peu lourd à mettre en place, mais c'est pour la bonne cause !
  • l'éditeur de Blogger fait un peu ce qu'il veut comme à son habitude et il n'est pas rare de devoir retourner dans le code html de l'article pour arranger les choses.
    Un conseil : il vaut mieux éviter les manipulations de mise en page etc. après l'introduction de ce code sous peine de voir la partie à copier affectée par des balises indésirables ! Vérifiez toujours que la partie à copier est propre en la testant.


Commentaires

Enregistrer un commentaire