Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

28.04.2009

Créer un style pour afficher du code

Vous l'avez remarqué, je propose régulièrement de copier du code, le plus souvent des éléments de CSS mais parfois du HTML. Ceux qui sont déjà perdus vont devoir s'accrocher, désolé. Je me propose de le mettre en forme avec un "style", à vous de savoir le faire avec du style.

La problématique est la suivante. Quand vous utilisez un traitement de texte traditionnel, vous appliquez un "style" à une portion du texte et ce texte devient titre de niveau 1, 2, etc. Au "style" sont attachées des propriétés de famille de police, de taille, de mise en forme de caractère et de paragraphe. Ici, pas de style pour les notes, c'est à vous de faire les mêmes manipulations à chaque fois que vous voulez l'équivalent d'un titre 1, 2, etc. C'est vite fastidieux, et surtout, si vous changez d'avis sur ce que doit être un titre 1, vous devez tous les refaire.

L'idéal serait donc de créer des styles, et de pouvoir les mettre en œuvre facilement, une fois dépassée la pénible étape des réglages.


On peut aller assez loin dans le style de paragraphe en lui donnant des propriétés CSS comme la couleur, la famille de police, sa taille. On pourrait ainsi avoir :

<p style="color:#663300;
font-size:10px;
font-family:courier new, monotype;">
1ère ligne de code
2ème ligne de code
</p>

 

Mais on pourrait aussi décider d'aller plus loin en donnant une image de fond qui se répèterait sur la hauteur :

<p style="color:#663300; font-size:10px; font-family:courier new, monotype;
background-image: URL(http://geemeetest.hautetfort.com/images/bkg_code_aspire.gif);
background-repeat:repeat-y;">
1ère ligne de code
2ème ligne de code
</p>

 

Bien sûr, il faudrait créer une bordure avec des angles arrondis, régler les marges internes, et ajuster la hauteur de la ligne, et l'on aurait :

<p style="color:#663300; font-size:10px; font-family:courier new, monotype;
background-image: URL(http://geemeetest.hautetfort.com/images/bkg_code_aspire.gif); background-repeat:repeat-y;
border-width:0px;
-moz-border-radius: 1% 1% 1% 1%;
-webkit-border-radius: 1% 1% 1% 1%;
padding-top:0px;
padding-right:8px;
padding-bottom:0px;
padding-left:24px;
line-height:12px;">
1ère ligne de code
2ème ligne de code
</p>

 

Mais on ne va tout de même pas répéter ces instructions à chaque fois, alors que l'on cherche à se simplifier la vie. Il faut donc transformer ce code pour en faire une "class" et on aura ceci :

.code p{
color:#663300; font-size:10px; font-family:courier new, monotype;
background-image: URL(http://geemeetest.hautetfort.com/images/bkg_code_aspire.gif); background-repeat:repeat-y;
border-width:0px;
-moz-border-radius: 1% 1% 1% 1%;
-webkit-border-radius: 1% 1% 1% 1%;
padding-top:0px;
padding-right:8px;
padding-bottom:0px;
padding-left:24px;
line-height:12px;
}

 

modifier_feuille_de_styles_code.gif

Puis on ira enrichir la feuille de styles.

Copiez le code ci-dessus,
allez dans Présentation,
puis Configuration avancée,
et devant Feuille de styles cliquez sur modifier le template

Descendez jusque .content p,
puis collez le code copié.

 

 

Pour utiliser le style dans une note, il faudra au choix :

editeur_css_code.gifTaper le texte d'abord,
puis utiliser l'éditeur HTML pour l'encadrer par
<div class="code">
<p>*<br /> 1ère ligne de code<br /> 2ème ligne de code<br /> *</p>
</div>

insérer_code_embed_css_code.gifOu

D'abord utiliser l'insertion de code embed,
pour insérer <div class="code"><p>**</p></div>
puis taper le texte entre les astérisques

On obtiendra indifféremment ce qui suit, quand la note sera publiée.
Ah oui parce que cela ne se voit pas dans l'éditeur.

*
1ère ligne de code
2ème ligne de code
*

 

Bon d'accord ce n'est pas très facile à mettre en place, mais cela peut valoir le coup non ?

10:30 Écrit par Gee Mee dans Configuration avancée, Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : code, css, style, modifier | |  del.icio.us | | Digg! Digg |  Facebook

Les commentaires sont fermés.