Un poil de coloration syntaxique pour MarkDown dans Notepad++.
(Faudrait que j'arrête de stocker des fichiers en texte dans ce Sharlii :) )
<NotepadPlus>
<UserLang name="Markdown Pandoc" ext="md" udlVersion="2.0">
<Settings>
<Global caseIgnored="yes" allowFoldOfComments="no" forceLineCommentsAtBOL="no" foldCompact="no" />
<Prefix Keywords1="no" Keywords2="no" Keywords3="no" Keywords4="no" Keywords5="no" Keywords6="no" Keywords7="no" Keywords8="no" />
</Settings>
<KeywordLists>
<Keywords name="Comments" id="0">03<!-- 03 04 04--> 04 00# 00## 00### 00#### 00##### 01 02</Keywords>
<Keywords name="Numbers, additional" id="1"></Keywords>
<Keywords name="Numbers, prefixes" id="2"></Keywords>
<Keywords name="Numbers, extras with prefixes" id="3"></Keywords>
<Keywords name="Numbers, suffixes" id="4"></Keywords>
<Keywords name="Operators1" id="5">- * +</Keywords>
<Keywords name="Operators2" id="6"></Keywords>
<Keywords name="Folders in code1, open" id="7"></Keywords>
<Keywords name="Folders in code1, middle" id="8"></Keywords>
<Keywords name="Folders in code1, close" id="9"></Keywords>
<Keywords name="Folders in code2, open" id="10"></Keywords>
<Keywords name="Folders in code2, middle" id="11"></Keywords>
<Keywords name="Folders in code2, close" id="12"></Keywords>
<Keywords name="Folders in comment, open" id="13"></Keywords>
<Keywords name="Folders in comment, middle" id="14"></Keywords>
<Keywords name="Folders in comment, close" id="15"></Keywords>
<Keywords name="Keywords1" id="16"></Keywords>
<Keywords name="Keywords2" id="17">* -</Keywords>
<Keywords name="Keywords3" id="18">== --</Keywords>
<Keywords name="Keywords4" id="19">></Keywords>
<Keywords name="Keywords5" id="20"></Keywords>
<Keywords name="Keywords6" id="21"></Keywords>
<Keywords name="Keywords7" id="22"></Keywords>
<Keywords name="Keywords8" id="23"></Keywords>
<Keywords name="Delimiters" id="24">00[ 01 02] 0304 05
06](http:// 07 08) 09 10 11 12 13 14 15 16 17\n 18 19 20 21 22 23</Keywords>
</KeywordLists>
<Styles>
<WordsStyle name="DEFAULT" styleID="0" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="COMMENTS" styleID="1" fgColor="FF0000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="LINE COMMENTS" styleID="2" fgColor="800000" bgColor="FFFFFF" fontName="" fontStyle="1" nesting="0" />
<WordsStyle name="NUMBERS" styleID="3" fgColor="FF0000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="KEYWORDS1" styleID="4" fgColor="0000FF" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="KEYWORDS2" styleID="5" fgColor="FF0000" bgColor="FFFFFF" fontName="" fontStyle="1" nesting="0" />
<WordsStyle name="KEYWORDS3" styleID="6" fgColor="800000" bgColor="FFFFFF" fontName="" fontStyle="1" nesting="0" />
<WordsStyle name="KEYWORDS4" styleID="7" fgColor="808040" bgColor="D5FFD5" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="KEYWORDS5" styleID="8" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="KEYWORDS6" styleID="9" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="KEYWORDS7" styleID="10" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="KEYWORDS8" styleID="11" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="OPERATORS" styleID="12" fgColor="FF0000" bgColor="FFFFFF" fontName="" fontStyle="1" nesting="0" />
<WordsStyle name="FOLDER IN CODE1" styleID="13" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="FOLDER IN CODE2" styleID="14" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="FOLDER IN COMMENT" styleID="15" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="DELIMITERS1" styleID="16" fgColor="0000FF" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="DELIMITERS2" styleID="17" fgColor="FF0000" bgColor="FFFFFF" fontName="" fontStyle="1" nesting="0" />
<WordsStyle name="DELIMITERS3" styleID="18" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="DELIMITERS4" styleID="19" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="DELIMITERS5" styleID="20" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="DELIMITERS6" styleID="21" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="DELIMITERS7" styleID="22" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="DELIMITERS8" styleID="23" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
</Styles>
</UserLang>
</NotepadPlus>
En lien avec les deux entrées précédentes, voici de quoi mettre une table des matières dans l'export HTML.
J'ai modifié un peu la sortie de manière a avoir une numérotation fonctionnelle:
$if(toc)$
<h1 id="$idprefix$toctitle" class="TOC-header">Table of contents</h1>
<div id="$idprefix$TOC">
$toc$
</div>
$endif$
Voici une feuille de style faite pour rendre les exports Markdown > CSS plus jolis.
En rapport avec cet autre post : http://gregoire.surrel.org/links/?l3ILYw
<style>
/* #####################
CSS rules for all
##################### */
/ Text style /
html{
font-family: 'Georgia', serif;
}
h1,h2,h3,h4,h5,h6{
font-weight: normal;
color: #111;
line-height: 1em;
margin-bottom: 0.5em;
}
h4,h5,h6{ font-weight: bold; }
h2{ font-size:1.8em; margin-left: 7mm; }
h3{ font-size:1.5em; margin-left: 12mm; }
h4{ font-size:1.2em; margin-left: 16mm; }
h5{ font-size:1.0em; margin-left: 18mm; }
h6{ font-size:0.9em; margin-left: 20mm; }
p{
text-align: justify;
}
/ Tables, figures /
figure{
text-align:
center; margin: 0;
}
img{
max-width:100%;
padding: 8px;
display: block;
margin: auto;
}
figure > img {
border: 1px #DDD solid;
}
figcaption, caption{
font-style: italic;
margin: auto;
padding: 0;
border: 1px #AAA solid;
}
figcaption{
display: inline-block;
padding: 3px;
margin-top: -1px;
border-top: 1px #DDD solid;
background: white;
}
caption{
border-bottom-width: 0;
}
tbody{
border-top: 4px #AAA solid;
}
table{
border-collapse: collapse;
border-spacing: 0;
border: 1px #AAA solid;
margin: auto;
}
td, th{
vertical-align: top;
padding: 0 3pt;
}
tr ~ tr{
border-top: thin rgba(0, 0, 0, 0.05) solid;
}
/ Text blocks /
blockquote, pre{
margin: 0;
padding:0.1cm 1cm;
padding-left: 1em;
display: inline-block;
}
blockquote{
border-left: 0.5em #DDD solid;
border-radius: 12pt 4pt 4pt 12pt;
}
pre,code,kbd,samp{
font-family: monospace;
max-width: 85%;
white-space: pre-wrap;
word-wrap: break-word;
}
dl{
margin-left: 0.8cm;
}
dt{
font-style: italic;
}
/ Spacing glitches /
pre + figure, h1 + blockquote, figure + figure{
margin-top: 1cm;
}
li > p{
margin: 0.2em;
}
/ Title counters /
body{ counter-reset: ch1; }
h1{
counter-increment: ch1;
counter-reset: ch2;
}
h1:before { content: counter(ch1) " - "; }
h2{
counter-increment: ch2;
counter-reset: ch3;
}
h2:before { content: counter(ch1) "." counter(ch2) " - "; }
h3{
counter-increment: ch3;
}
h3:before { content: counter(ch1) "." counter(ch2) "." counter(ch3) " - "; }
#TOC{
counter-reset: ch1;
}
.title:before, .author:before , .date:before, .TOC-header:before{
content: "";
}
/* ########################
CSS rules for screen
######################## */
@media screen{
/ Media style /
html{
padding: 1cm;
background: #eee;
}
body{
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAA9CAYAAAAXgFT/AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFtSURBVHic7dxBSsNAAEDRRLyAK6nrev8DuRfc1CPoVhBkCpkkH99blyaZpJ8JyXS9Xa5fC0DAw9E7ADBKsIAMwQIyBAvIECwgQ7CADMECMgQLyBAsIONx9INP72/rjB34fHk97Zv2ex3zrO3sua29zuPMseJvP8/x1udh9PoxwwIyBAvIECwgQ7CADMECMgQLyBAsIEOwgAzBAjIEC8gYXpozi6UWwCgzLCBDsIAMwQIyBAvIECwgQ7CADMECMg5/Dwvucca/1J7xLuEZj/MMzLCADMECMtwSsonKEiu3Wm1mWECGYAEZggVkCBaQIVhAhmABGYe/1nDmx8yVR/XwX5hhARmCBWQIFpAhWECGYAEZggVkCBaQIVhAhmABGYIFZAgWkLHeLtfRtXwfk/bhedL3lswa22X5Pb4zt1Uw43qbMaZn/11sfcxDx3tPsAAO5ZYQyBAsIEOwgAzBAjIEC8gQLCBDsIAMwQIyvgF8RjQAaIW6pAAAAABJRU5ErkJggg==) no-repeat;
background-size: 256px;
background-position: 16px 16px;
font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
font-size: 16px;
line-height: 1.5em;
padding: 3cm 1cm;
margin: auto;
max-width: 62em;
min-width: 42em;
border: 1px black solid;
}
:target{ background: rgb(181, 230, 29); padding-left: 3mm; padding-right: 3mm; }
/ Document title /
header{
text-align: center;
}
.title{
border-bottom: 1px black solid;
}
.author{
margin: -1px 0 1cm;
margin-bottom: 1cm;
background: #eee;
display: inline-block;
padding: 10pt 15pt;
border: 1px black solid;
border-radius: 0 0 5pt 5pt;
border-top-width: 0;
}
.date{
font-variant: small-caps;
margin: 1cm 0 3cm;
}
/ Text style /
p{ margin:1em 0; }
h1{ font-size:2.5em; background:#eee; padding: 5pt; margin:1cm -1cm 0; border-top: 1px black solid; }
a{ color: #0645ad; text-decoration: none; border-bottom: 1px dotted #0645ad;}
h1 > a, h2 > a, h3 > a{ color: black; }
a:visited{ color: #0b0080; }
h1 > a:visited, h2 > a:visited, h3 > a:visited{ color: black; }
a:hover{ color: #06e; }
a:active{ color: #faa700; }
a:focus{ outline: 1px dotted; background: #fdca23}
a:hover, a:active{ outline: 0; }
/ Tables, figures /
figure > *{
box-shadow: 3px 3px 3px #ccc;
}
blockquote{
background: #EEE;
}
hr{
display: block;
height: 2px;
border: 0;
border-top: 1px solid #aaa;
border-bottom: 1px solid #eee;
margin: 1em 0;
padding: 0;
}
pre {
border: 1px #aaa solid;
border-radius: 5px;
background: #f8f8f8;
padding: 3pt;
margin-left: 1cm;
padding:0.1cm 1cm;
}
b, strong{ font-weight: bold; }
dfn{ font-style: italic; }
ins{ background: #ff9; color: #000; text-decoration: none; }
mark{ background: #ff0; color: #000; font-style: italic; font-weight: bold; }
sub, sup{ font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup{ top: -0.5em; }
sub{ bottom: -0.25em; }
ul, ol{ padding: 0 0 0 2em; }
li { margin: 0 }
/p:last-child{ margin:0 }/
dd{ margin: 0 0 0 2em; }
td:nth-child(even), th:nth-child(even) { background: #F1F1F1 }
dt{ font-weight: bold; }
dl{ padding: 0 5mm; }
.footnotes{
background: #FDFCF2;
padding: 0 1em;
}
}
/* #######################
CSS rules for print
####################### */
@media print{
body{ font-size:12pt; max-width:100%; }
a{ text-decoration: underline; }
hr{ height: 1px; border:0; border-bottom:1px solid black; }
hr:after{ height: 1px; border:0; border-bottom:1px solid black; }
a[href]:after{ content: " (" attr(href) ")"; }
abbr[title]:after{ content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after{ content: ""; }
pre, blockquote{ border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; }
tr, img{ page-break-inside: avoid; }
img{ max-width: 100% !important; }
@page :left{ margin: 15mm 20mm 15mm 10mm; }
@page :right{ margin: 15mm 10mm 15mm 20mm; }
p, h2, h3{ orphans: 3; widows: 3; }
h1, h2, h3{ page-break-after: avoid; }
}
</style>
Voici des commandes pour utiliser Pandoc via Notepad++ (par la commande 'Run'). Je n'ai pas ajouté l'option de ligne de commande pour faire une bibliographie.
Voici un exemple de document Markdown pour tester l'installation :
http://johnmacfarlane.net/pandoc/demo/README
Export Markdown > HTML standalone (un seul fichier) :
cmd /C cd $(CURRENT_DIRECTORY) && pandoc --standalone --self-contained --smart --table-of-contents -H document.css -f markdown -t html5 -o $(NAME_PART).html $(FILE_NAME)
Note: L'export cherche une feuille de style CSS nommée document.css, placée à côté du document à convertir. Vous pouvez utiliser celle que j'ai faite comme base :
http://gregoire.surrel.org/links/?T51SfA
Export Markdown > LaTeX :
cmd /C cd $(CURRENT_DIRECTORY) && pandoc --standalone --smart --table-of-contents -f markdown -t latex -o $(NAME_PART).tex $(FILE_NAME)
Export Markdown > DocX:
cmd /C cd $(CURRENT_DIRECTORY) && pandoc --standalone --smart --table-of-contents -f markdown -t docx -o $(NAME_PART).docx $(FILE_NAME)
Des dessins faits à la craie. À la craie, quoi !
(via http://sebsauvage.net/links/)
Un éditeur pour Impress.js
(voir http://gregoire.surrel.org/links/?_Izz7g)
(Via Sebsauvage)
Outil sympa pour voir ce que font les regex. Genre essayer d'y coller ça :
[a-z0-9!#$%&'+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'+/=?^_`{|}~-]+)@(?:[a-z0-9](?:[a-z0-9-][a-z0-9])?.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)\b
Pas très clair, de prime abord, mais on trouve vite la logique que c'est pour valider (pas trop mal) une adresse mail.
Embryon de code à adapter selon les browsers, ajouter un :hover et un :active.
<input type="button" value="Coucou" style="
font-size: 5mm;
color: white;
text-shadow: 1px 1px 3px black;
border-radius: 8px;
border: thin black solid;
background: hsl(0, 100%, 42%);
background: hsl(0, 100%, 42%)
-webkit-linear-gradient(top,
rgba(255, 255, 255, 0.5) 1%,
rgba(255, 255, 255, 0) 30%,
rgba(0, 0, 0, 0) 70%,
rgba(0, 0, 0, 0.25) 100%);
padding: 10px 20px;
margin: 1cm;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
">
Pleins de trucs et astuces en CSS (par le créateur d'Alsacréations)
(via http://sebsauvage.net/links/)
Pure awesomeness !
Comment demander plus de sous !
(via http://sebsauvage.net/links/?)
Souriez, vous êtes vulnérables
(via http://lehollandaisvolant.net/index.php?mode=links)
Belle leçon de démocratie !
(via http://sebsauvage.net/links/)
Gandalf s'est échappé du Seigneur des Anneaux, et a trouvé une nouvelle occupation.
Trains et neige...
Un bateau pour transporter...des bateaux ?!
Ya pas comme un problème ? Faut les garder au sec ?
La lampe de Pixar, en vrai !
Boules rouges
Feu de joie à base de balles de ping-pong