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

markdown

<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

css

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

css

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

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

Code

css

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.

Styliser Markdown avec CSS ​

Style de base ​

Styles inline ​

Styles d'éléments Markdown courants ​

En-têtes ​

Liens ​

Code ​

Conclusion ​

Ressources supplémentaires ​