via FeedBurner
« Deezer, suite F1 | Page d'accueil | Modifier la hauteur d'une colonne pour qu'elle "descende" »
28
avr
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;
}
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 :
Taper 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>
Ou
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
Ecrit par
Gee Mee [?] |
Lien permanent
|
Commentaires (0)
| Courriel
| Impression
| Partage
Dans : Configuration avancée, Personnaliser son blog |
Tags : code, css, style, modifier
Trackbacks
Voici l'URL pour faire un trackback sur cette note : http://geemee.hautetfort.com/trackback/2166543
Ecrire un commentaire