Estilizar Markdown com CSS
O Markdown fornece uma sintaxe concisa para formatar texto, mas os estilos CSS podem tornar seus documentos mais bonitos e profissionais.
Estilos básicos
Estilos inline
markdown
<style>
.highlight {
background-color: #fff3cd;
padding: 10px;
border-left: 4px solid #ffc107;
}
</style>
<div class="highlight">
Este é um parágrafo importante destacado.
</div>Estilos de elementos Markdown comuns
Cabeçalhos
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;
}Links
css
a {
color: #0366d6;
text-decoration: none;
transition: all 0.3s ease;
}
a:hover {
border-bottom: 1px solid #0366d6;
}Código
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;
}Conclusão
Com CSS bem projetado, você pode transformar documentos Markdown simples em conteúdo web bonito e profissional. A chave é manter um equilíbrio entre simplicidade, legibilidade e design responsivo.