Skip to content

Instantly share code, notes, and snippets.

@elentok
Created October 11, 2012 12:49
Show Gist options
  • Save elentok/3872072 to your computer and use it in GitHub Desktop.
Save elentok/3872072 to your computer and use it in GitHub Desktop.
convert md files to html (with github style)
#!/usr/bin/env bash
function convert_file {
infile=$1
outfile=`echo $infile | sed 's/\.md$/\.html/'`
echo "Converting $infile to $outfile... "
cat > $outfile <<EOF
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body class="markdown-body">
EOF
sed 's/\.md/\.html/g' $infile | redcarpet --parse-fenced-code-blocks | cat >> $outfile
echo "</body></html>" >> $outfile
}
for md in *.md; do
convert_file $md
done
body {
font: 13px Helvetica, arial, freesans, clean, sans-serif;
}
.markdown-body {
font-size:14px;
line-height:1.6;
}
.markdown-body>:first-child {
margin-top:0!important;
}
.markdown-body>:last-child {
margin-bottom:0!important;
}
.markdown-body a.anchor {
display:block;
padding-left:30px;
margin-left:-30px;
cursor:pointer;
position:absolute;
top:0;
left:0;
bottom:0;
}
.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6 {
font-weight:700;
-webkit-font-smoothing:antialiased;
cursor:text;
position:relative;
margin:20px 0 10px;
padding:0;
}
.markdown-body h1 .mini-icon-link,.markdown-body h2 .mini-icon-link,.markdown-body h3 .mini-icon-link,.markdown-body h4 .mini-icon-link,.markdown-body h5 .mini-icon-link,.markdown-body h6 .mini-icon-link {
display:none;
color:#000;
}
.markdown-body h1:hover a.anchor,.markdown-body h2:hover a.anchor,.markdown-body h3:hover a.anchor,.markdown-body h4:hover a.anchor,.markdown-body h5:hover a.anchor,.markdown-body h6:hover a.anchor {
text-decoration:none;
line-height:1;
padding-left:0;
margin-left:-22px;
top:15%;
}
.markdown-body h1 tt,.markdown-body h1 code,.markdown-body h2 tt,.markdown-body h2 code,.markdown-body h3 tt,.markdown-body h3 code,.markdown-body h4 tt,.markdown-body h4 code,.markdown-body h5 tt,.markdown-body h5 code,.markdown-body h6 tt,.markdown-body h6 code {
font-size:inherit;
}
.markdown-body h1 {
font-size:28px;
color:#000;
}
.markdown-body h2 {
font-size:24px;
border-bottom:1px solid #ccc;
color:#000;
}
.markdown-body h6 {
color:#777;
font-size:14px;
}
.markdown-body hr {
background:transparent url(https://a248.e.akamai.net/assets.github.com/assets/primer/markdown/dirty-shade-0e7d81b119cc9beae17b0c98093d121fa0050a74.png) repeat-x 0 0;
border:0 none;
color:#ccc;
height:4px;
padding:0;
}
.markdown-body ul,.markdown-body ol {
padding-left:30px;
}
.markdown-body ul.no-list,.markdown-body ol.no-list {
list-style-type:none;
padding:0;
}
.markdown-body dl dt {
font-size:14px;
font-weight:700;
font-style:italic;
margin:15px 0 5px;
padding:0;
}
.markdown-body dl dd {
margin:0 0 15px;
padding:0 15px;
}
.markdown-body blockquote {
border-left:4px solid #DDD;
color:#777;
padding:0 15px;
}
.markdown-body table th,.markdown-body table td {
border:1px solid #ccc;
padding:6px 13px;
}
.markdown-body table tr {
border-top:1px solid #ccc;
background-color:#fff;
}
.markdown-body table tr:nth-child(2n) {
background-color:#f8f8f8;
}
.markdown-body img {
max-width:100%;
}
.markdown-body span.frame {
display:block;
overflow:hidden;
}
.markdown-body span.frame>span {
border:1px solid #ddd;
display:block;
float:left;
overflow:hidden;
width:auto;
margin:13px 0 0;
padding:7px;
}
.markdown-body span.frame span img {
display:block;
float:left;
}
.markdown-body span.frame span span {
clear:both;
color:#333;
display:block;
padding:5px 0 0;
}
.markdown-body span.align-center>span {
display:block;
overflow:hidden;
text-align:center;
margin:13px auto 0;
}
.markdown-body span.align-center span img {
text-align:center;
margin:0 auto;
}
.markdown-body span.align-right>span {
display:block;
overflow:hidden;
text-align:right;
margin:13px 0 0;
}
.markdown-body span.align-right span img {
text-align:right;
margin:0;
}
.markdown-body span.float-left {
display:block;
margin-right:13px;
overflow:hidden;
float:left;
}
.markdown-body span.float-left span {
margin:13px 0 0;
}
.markdown-body span.float-right {
display:block;
margin-left:13px;
overflow:hidden;
float:right;
}
.markdown-body span.float-right>span {
display:block;
overflow:hidden;
text-align:right;
margin:13px auto 0;
}
.markdown-body code,.markdown-body tt {
white-space:nowrap;
border:1px solid #eaeaea;
background-color:#f8f8f8;
border-radius:3px;
margin:0 2px;
padding:0 5px;
}
.markdown-body pre>code {
white-space:pre;
border:none;
background:transparent;
margin:0;
padding:0;
}
.markdown-body .highlight pre,.markdown-body pre {
background-color:#f8f8f8;
border:1px solid #ccc;
font-size:13px;
line-height:19px;
overflow:auto;
border-radius:3px;
padding:6px 10px;
}
.markdown-body pre code,.markdown-body pre tt {
background-color:transparent;
border:none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment