Une "codebox" permet d'nsérer du code HTML (ou autre) dans un article.
La codebox ci-dessous vous donne en même temps un aperçu de ce que ça donne. On peut changer certaines choses à volonté comme le rayon de l'arrondi de la box, l'arrière-plan et bien d'autres choses...
Tous les articles de ce blog utiliseront désormais cette "Codebox" beaucoup plus souple que la précédente. En effet, cette codebox s'affiche aussi en mode "Rédiger" ce qui n'était pas le cas de l'autre (basée sur des "DIV")
Exemple:
<html>
<head>
<title>Titre</title>
</head>
<body>
<div id="page">
</div>
</body>
</html>
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.
On peut aussi s'en servir pour faire des "encarts" par exemple pour un blog de news ou pour un tuto avec le paramètre "word-wrap: normal;" (facile à modifier en HTML)
L'image d'arrière-plan est ici sur un de mes blogs:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdyjRNGOrdcHCuLOp8yyIDYEpEr8JoB4qDoFF65sLdfezsFsxBnFhQIMTEszm-u363ljscVuotAeceVqRQbeTHrN6yBmRWEyzD9PWBafluUPHfXvHqSIJ6yn5RoJr8lpLm82jhx49Ft-dy/s1600/codebg.gif
Image d'arrière-plan ci-dessous:
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsD-l_FiJ0b1T2eTs6vssX_GvXwr9iibDs_43q3cNy3CcHCtLKK7wO1xFR5Y8DjSCvRUAimbQlBdgr7zJuboj-FY9nHOED0WcnVZlMa9WMWq-BDTqrnLE5leDSWwTbQKS_DaSeRzdPCuyJ/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 vous n'avez pas besoin avant de poster votre article.
<pre style="background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsD-l_FiJ0b1T2eTs6vssX_GvXwr9iibDs_43q3cNy3CcHCtLKK7wO1xFR5Y8DjSCvRUAimbQlBdgr7zJuboj-FY9nHOED0WcnVZlMa9WMWq-BDTqrnLE5leDSWwTbQKS_DaSeRzdPCuyJ/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/AVvXsEjsD-l_FiJ0b1T2eTs6vssX_GvXwr9iibDs_43q3cNy3CcHCtLKK7wO1xFR5Y8DjSCvRUAimbQlBdgr7zJuboj-FY9nHOED0WcnVZlMa9WMWq-BDTqrnLE5leDSWwTbQKS_DaSeRzdPCuyJ/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/AVvXsEjsD-l_FiJ0b1T2eTs6vssX_GvXwr9iibDs_43q3cNy3CcHCtLKK7wO1xFR5Y8DjSCvRUAimbQlBdgr7zJuboj-FY9nHOED0WcnVZlMa9WMWq-BDTqrnLE5leDSWwTbQKS_DaSeRzdPCuyJ/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/AVvXsEjsD-l_FiJ0b1T2eTs6vssX_GvXwr9iibDs_43q3cNy3CcHCtLKK7wO1xFR5Y8DjSCvRUAimbQlBdgr7zJuboj-FY9nHOED0WcnVZlMa9WMWq-BDTqrnLE5leDSWwTbQKS_DaSeRzdPCuyJ/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/AVvXsEjsD-l_FiJ0b1T2eTs6vssX_GvXwr9iibDs_43q3cNy3CcHCtLKK7wO1xFR5Y8DjSCvRUAimbQlBdgr7zJuboj-FY9nHOED0WcnVZlMa9WMWq-BDTqrnLE5leDSWwTbQKS_DaSeRzdPCuyJ/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>
Aucun commentaire:
Enregistrer un commentaire