vendredi 11 février 2011

CSS stylesheet pour Markdown

J'ai découvert il y a peu de temps le format Markdown.

C'est un format d'écriture de texte très simple qui se transforme ensuite en HTML.

Voici un exemple d'un document en Markdown :
http://daringfireball.net/projects/markdown/basics.text

Et voici sa version HTML:
http://daringfireball.net/projects/markdown/basics

Pour faire très bref, voici un résumé de Markdown :


Titre 1
====
Texte sans saut
de ligne, on peut
écrire à l’infini.

titre 2
------
Pour faire un
saut de ligne,

il faut faire un
vrai saut de ligne.
2x Entrer

### Titre 3
Pour écrire une liste :

 - premier élément précéder d'un saut de ligne
 - deuxième élément

#### Titre 4
Pour insérer un lien c'est très simple : 
Et c'est aussi simple pour mettre un texte en  *italique* ou en **gras** .


Pour vous amuser je conseille d'utiliser l'outil de Job Combe, c'est un éditeur Markdown très bien fait
http://joncom.be/experiments/markdown-editor/edit/

Sinon je recommande également le projet pandoc disponible en paquet debian.

Une fois le texte rédigé en Markdown, on peut le convertir en HTML, mais le résultat est assez brut de fonderie car n'y a pas de CSS.

Donc je vous propose ici, d'utiliser librement mon CSS :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<style type="text/css">

body {
  max-width: 900px;
  margin: 0 auto ;
  color: #4a4a4a;
  background: #222;
}

blockquote{
  background: #F7F7F7;
  padding: 10px;
  font-size: 90%;
  line-height: 130%;
}

*{
   font-family: arial, serif;
}

p{
  text-align: justify;
}

h1{
  font-size: 2.5em;
}

h2{
  border-bottom: 1px solid #E0E0E0!important;
}

h2, h3{
  padding:20px 0 0 0;
 
}

h3{
  font-size: 1.1em;
   margin-bottom: 5px;
}

#content{
  background-color:white;
  padding: 10px 50px ;
}
</style>
</head>
<body>
<div id="content">

<!-- Votre Markdown converti en HTML ici -->

</div>
</body>
</html>
à

Aucun commentaire:

Enregistrer un commentaire