Skip to content

Instantly share code, notes, and snippets.

@frankrausch
Last active November 13, 2023 14:11
Show Gist options
  • Save frankrausch/4ef65de978b260eca2e5d553ee7aee24 to your computer and use it in GitHub Desktop.
Save frankrausch/4ef65de978b260eca2e5d553ee7aee24 to your computer and use it in GitHub Desktop.
Convert Markdown to HTML with a custom template
pandoc -o index_temp.html index.md
cat header.html index_temp.html footer.html > index.html
rm index_temp.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style>
* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #245AAA;
}
a:hover {
color: #3B88FD;
}
/* Reset */
h1, h2, h3 {
font-size: 1rem;
margin: 0;
padding: 0;
}
html {
background-color: #fafafa;
padding: 0;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.6;
}
.wrapper {
display: flex;
padding: 5vw;
}
@media screen and (max-width: 979px) {
.wrapper {
flex-direction: column;
}
}
main {
counter-reset: h2;
margin: auto;
max-width: 40rem;
}
img {
display: block;
height: auto;
max-width: 100%;
padding: 2rem 0 1rem 0;
}
h1 {
font-size: 1.7rem;
margin: 0 0 2rem 0;
}
h2 {
border-top: 1px solid #ddd;
display: flex;
font-size: 1.3rem;
font-weight: bold;
margin: 6rem 0 1rem 0;
padding: 4rem 0 0 0;
}
h2::before {
color: #aaa;
content: counter(h2) ".\00A0";
counter-increment: h2;
counter: decimal;
flex: 0 0 2.4rem;
text-align: right;
margin-right: 0.4em;
}
h3 {
font-weight: bold;
margin: 3rem 0 0.5rem 0;
}
code {
font-size: 0.85em;
background-color: white;
border-radius: 2px;
border: 1px solid #eee;
font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
margin: 0 -.1em;
padding: 0 .2em;
}
pre > code {
display: block;
width: 100%;
overflow-x: scroll;
padding: 1rem 2rem;
}
p, ol li, ul li {
margin-bottom: 0.5rem;
}
ol {
counter-reset: li;
list-style: none !important;
padding-left: 1.6em;
}
ol li::before {
color: #aaa;
content: counter(li) "";
counter-increment: li;
display: block;
float: left;
margin-left: -1.6em;
width: 1.6em;
}
ul, ul[style] {
counter-reset: li;
list-style-type: none !important;
padding-left: 1.6em;
}
ul li::before {
content: "→";
counter-increment: li;
counter: decimal;
display: block;
float: left;
margin-left: -1.6em;
width: 1.6em;
}
main > p,
main > ul,
main > ol,
main > h3,
pre {
margin-left: 3rem;
}
footer {
color: #888;
font-size: 0.75rem;
border-top: 1px solid #ddd;
margin: 7rem 0 1rem 0;
padding: 2rem 0 0 0;
}
.toc {
position: sticky;
top: 0;
align-self: flex-start;
font-size: 0.75rem;
margin-right: 2rem;
}
@media screen and (max-width: 979px) {
.toc {
position: unset;
top: unset;
margin-bottom: 5vw;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="toc">
</div><!-- /toc -->
<main>

Lorem

Lorem ipsum dolor sit amet.

Ipsum

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Dolor

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

  • Lorem
  • ipsum
  • dolor
  • sit

Sit Amet

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment