Style CSS pour le code sur votre blog

css

Un de mes amis m'a demandé comment j'avais créé les régions de code sur ma dernière entrée de blog. J'ai en fait «simulé» la région de code en utilisant un style. Dans Blogger, vous pouvez modifier votre modèle. J'ai ajouté le style suivant:

p.code {famille de polices: Courier New; taille de la police: 8 pt; style de bordure: encart; largeur de la bordure: 3px; rembourrage: 5px; couleur d'arrière-plan: #FFFFFF; hauteur de ligne: 100%; marge: 10px}

L'étape suivante consiste à modifier ma balise en mode «Modifier le HTML». Je montre simplement mon nouveau style en créant le tag. Voila! Décomposer les styles:

  • Définissez la police sur Courier New… ressemble à un éditeur de code générique
  • Définissez la taille de la police sur 8 pt pour une apparence correcte
  • Définissez le style de bordure de paragraphe sur «encart». Cela reproduit à quoi ressemble une zone de texte sur la page.
  • Définissez la largeur de la bordure sur 2 ou 3 pixels. Cela donne au style de bordure incrustée un aspect correct.
  • Le remplissage définit la distance entre la bordure et le texte à l'intérieur.
  • Couleur d'arrière-plan… réglez-la sur blanc (#FFFFFF)
  • Hauteur de ligne - J'ai ajusté cela à 100% car certains des autres styles de mon thème de blogueur faisaient que ma hauteur de ligne était d'environ 200%
  • Définissez la marge sur 10 px. Cela éloigne le paragraphe (balise p) de 10 pixels de tout.

C'est tout ce qu'il y a aussi! Remarque: l'éditeur fourni avec Blogger n'est pas en mesure d'afficher le tel qu'il apparaîtra dans votre blog. Mais cela fonctionne et a fière allure!

Une dernière remarque… une fois que vous avez modifié la balise, l'éditeur Blogger aime l'utiliser de manière aléatoire ailleurs dans votre message. C'est un peu ennuyeux! Mon conseil serait d'écrire l'intégralité de votre message, puis de faire une petite modification par la suite.

Une dernière remarque… assurez-vous d'utiliser des entités HTML pour afficher vos symboles! Quelques exemples:

  • Les citations (") sont"
  • > est>
  • > est>

Codage heureux!

3 Commentaires

  1. 1
  2. 2
  3. 3

Que pensez-vous?

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..