vendredi 17 avril 2015

Une Codebox pour votre site

...ou même pour Blogger

 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: http://4.bp.blogspot.com/-mDIV2bRYq9U/VTEaQIzip-I/AAAAAAAAMXE/mrz8RanCTog/s1600/codebg.gif Image d'arrière-plan ci-dessous:
 <pre style="background-image: URL(http://4.bp.blogspot.com/-kXLZV9x6x5E/VTEXCZ5NcXI/AAAAAAAAMW4/VbPq58OZdJ4/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(http://4.bp.blogspot.com/-kXLZV9x6x5E/VTEXCZ5NcXI/AAAAAAAAMW4/VbPq58OZdJ4/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(http://4.bp.blogspot.com/-kXLZV9x6x5E/VTEXCZ5NcXI/AAAAAAAAMW4/VbPq58OZdJ4/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(http://4.bp.blogspot.com/-kXLZV9x6x5E/VTEXCZ5NcXI/AAAAAAAAMW4/VbPq58OZdJ4/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(http://4.bp.blogspot.com/-kXLZV9x6x5E/VTEXCZ5NcXI/AAAAAAAAMW4/VbPq58OZdJ4/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(http://4.bp.blogspot.com/-kXLZV9x6x5E/VTEXCZ5NcXI/AAAAAAAAMW4/VbPq58OZdJ4/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

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.