Estilizar Markdown con CSS

Markdown proporciona una sintaxis concisa para formatear texto, pero los estilos CSS pueden hacer que tus documentos sean más hermosos y profesionales.

Estilos básicos

Estilos inline

markdown

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

<div class="highlight">
Este es un párrafo importante resaltado.
</div>

Estilos de elementos Markdown comunes

Encabezados

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

Enlaces

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

Conclusión

Con CSS bien diseñado, puedes transformar documentos Markdown simples en contenido web hermoso y profesional. La clave es mantener un equilibrio entre simplicidad, legibilidad y diseño responsive.

Estilizar Markdown con CSS ​

Estilos básicos ​

Estilos inline ​

Estilos de elementos Markdown comunes ​

Encabezados ​

Enlaces ​

Código ​

Conclusión ​

Recursos adicionales ​