Une "codebox" permet d'nsérer du code HTML (ou autre) dans un article. La codebox ci-dessous vous en donne un aperçu. Tous les codes de cette page utilisent d'ailleurs cette Codebox.
<html>
<head>
<title>Titre</title>
</head>
<body>
<div id="page">
</div>
</body>
</html>
On peut changer plusieurs paramètres comme le rayon de l'arrondi de la box, l'arrière-plan et bien d'autres choses...
Le retour à la ligne n'était pas pris en charge: c'est arrangé en mettant "word-wrap: break-word;" au lieu de "word-wrap: normal;". Si vous préférez une Codebox sans retour à la ligne et une scrollbar, changez "break-word" en "normal". J'ai aussi rajouté un padding de 5px.
L'image d'arrière-plan est ici sur un de mes blogs: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl3URkTfvEa1dLfuihJoY9HbdzzKYOCyTdTZU0pidJa7Dj3NxIvWMmhWxVDScx_W8jGI4M-uYfJZ4kqOajTBdUtwxbeuAnue64AATxo4n1jMeNSMpRYQjzFDIjLW_Rt7sOBHssI2Jf00l7/s1600/codebg.gif Image d'arrière-plan ci-dessous:
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo9h_y-INNG_vupqpxqplV3UpaAsop0cPxthDgof2F5NlT_cef_tq5dI-BHLQbeR8nV1uNRvIQbA5E8xeO00hBTagF_UOvJKu1YaswsgvejXmVytDH1VN2UAOOJs0vRhLeQgVle1PIEb4_/s1600/codebg.gif); background: #f0f0f0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 5px; text-align: left; width: 99%;"><code style="color: black; word-wrap: break-word;"> codebox
</code></pre>
Trouvé ici: http://codeformatter.blogspot.com/ Si vous vous servez souvent de codebox (c'est mon cas), je vous conseille de copier le code ci-dessous dans votre modèle de message. Il suffira de supprimer ce dont on n'a pas besoin avant de poster l'article.
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo9h_y-INNG_vupqpxqplV3UpaAsop0cPxthDgof2F5NlT_cef_tq5dI-BHLQbeR8nV1uNRvIQbA5E8xeO00hBTagF_UOvJKu1YaswsgvejXmVytDH1VN2UAOOJs0vRhLeQgVle1PIEb4_/s1600/codebg.gif); background: #f0f0f0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 5px; text-align: left; width: 99%;"><code style="color: black; word-wrap: break-word;"> codebox
</code></pre>
Texte
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo9h_y-INNG_vupqpxqplV3UpaAsop0cPxthDgof2F5NlT_cef_tq5dI-BHLQbeR8nV1uNRvIQbA5E8xeO00hBTagF_UOvJKu1YaswsgvejXmVytDH1VN2UAOOJs0vRhLeQgVle1PIEb4_/s1600/codebg.gif); background: #f0f0f0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 5px; text-align: left; width: 99%;"><code style="color: black; word-wrap: break-word;"> codebox
</code></pre>
Texte
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo9h_y-INNG_vupqpxqplV3UpaAsop0cPxthDgof2F5NlT_cef_tq5dI-BHLQbeR8nV1uNRvIQbA5E8xeO00hBTagF_UOvJKu1YaswsgvejXmVytDH1VN2UAOOJs0vRhLeQgVle1PIEb4_/s1600/codebg.gif); background: #f0f0f0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 5px; text-align: left; width: 99%;"><code style="color: black; word-wrap: break-word;"> codebox
</code></pre>
Texte
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo9h_y-INNG_vupqpxqplV3UpaAsop0cPxthDgof2F5NlT_cef_tq5dI-BHLQbeR8nV1uNRvIQbA5E8xeO00hBTagF_UOvJKu1YaswsgvejXmVytDH1VN2UAOOJs0vRhLeQgVle1PIEb4_/s1600/codebg.gif); background: #f0f0f0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 5px; text-align: left; width: 99%;"><code style="color: black; word-wrap: break-word;"> codebox
</code></pre>
Texte
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo9h_y-INNG_vupqpxqplV3UpaAsop0cPxthDgof2F5NlT_cef_tq5dI-BHLQbeR8nV1uNRvIQbA5E8xeO00hBTagF_UOvJKu1YaswsgvejXmVytDH1VN2UAOOJs0vRhLeQgVle1PIEb4_/s1600/codebg.gif); background: #f0f0f0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid #CCCCCC; color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 5px; text-align: left; width: 99%;"><code style="color: black; word-wrap: break-word;"> codebox
</code></pre>
Voici ce que ça donne pour un nouveau message
Aucun commentaire:
Enregistrer un commentaire
Ajoutez un commentaire mais en bon Français ou éventuellement en bon Anglais. Les commentaires en langage SMS seront supprimés.