Stilizzare Markdown con CSS

Markdown fornisce una sintassi concisa per formattare il testo, ma gli stili CSS possono rendere i tuoi documenti più belli e professionali.

Stili di base

Stili inline

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

<div class="highlight">
Questo è un paragrafo importante evidenziato.
</div>

Stili elementi Markdown comuni

Intestazioni

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;
}

Link

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

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

Codice

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;
}

Conclusione

Con CSS ben progettato, puoi trasformare semplici documenti Markdown in contenuti web belli e professionali. La chiave è mantenere un equilibrio tra semplicità, leggibilità e design responsive.

Risorse aggiuntive

• Documentazione CSS MDN
• CSS Tricks
• Can I Use