Styliser Markdown avec CSS

Markdown fournit une syntaxe concise pour formater le texte, mais les styles CSS peuvent rendre vos documents plus beaux et professionnels.

Style de base

Styles inline

<style>
.highlight {
  background-color: #fff3cd;
  padding: 10px;
  border-left: 4px solid #ffc107;
}
</style>

<div class="highlight">
Ceci est un paragraphe important en surbrillance.
</div>

Styles d'éléments Markdown courants

En-têtes

h1, h2, h3, h4, h5, h6 {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  line-height: 1.3;
}

h1 {
  font-size: 2.5em;
  border-bottom: 2px solid #eaecef;
}

Liens

a {
  color: #0366d6;
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
  border-bottom: 1px solid #0366d6;
}

Code

code {
  background-color: #f6f8fa;
  padding: 3px 6px;
  border-radius: 3px;
  font-family: 'Consolas', 'Monaco', monospace;
  color: #d73a49;
}

pre {
  background-color: #f6f8fa;
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
}

Conclusion

Avec un CSS bien conçu, vous pouvez transformer de simples documents Markdown en contenu web magnifique et professionnel. La clé est de maintenir un équilibre entre simplicité, lisibilité et design responsive.

Ressources supplémentaires

• Documentation CSS MDN
• CSS Tricks
• Can I Use