Pandoc is a tool to convert one file format to another, like markdown, html, docx, rtf, txt, epub, LaTeX, PDF and many others.

Pandoc is available for a wide range of operating systems like Linux, Windows, MacOS, BSD, and as a Docker image. For installing Pandoc, see installation instruction for your desired platform.

Pandoc is a command-line tool, and does not have a graphic user interface (GUI). The PanWriter tool for macOS, Windows and Linux uses Pandoc together with a GUI, where you can write and see how it looks like in real life—more or less—and most importantly you can also convert files via the interface without using the command-line. To use PanWriter, you need to install Pandoc nevertheless.

Building a blog-like website with Pandoc:

Using Pandoc to create a website might not be the best way, however it can be an easy start, a very DIY ✂️ way of making a website, which you can always edit later on. This guide will show you how to start.

1. You will create a .doc file with your usual text editor program, LibreOffice for example. You can insert tables to make your menu or buttons, you can even fill the page entirely with tables. Save it as .docx locally on your computer. You can write plain text, link texts to external websites and insert images.

2. Now convert the .docx file to markdown via command line:

 pandoc --extract-media=. -s file_name.docx -t markdown -o file_name.md 

Extract media enables to extract the images and makes a folder for them. -s is the common Pandoc template that is being used in the markdown format.

3a. Converting the markdown file into HTML is possible via the command-line and also via the PanWriter. Via the command line:

 pandoc file_name.md -f markdown -t html -s -o file_name.html 

Or you can export the markdown file to HTML via PanWriter.

An example of a HTML file converted from a .docx file:

You can build your site even entirely out of tables and style them in your HTML file, here you can find some introduction to building tables.

HTML - Tables

You can also create an HTML file out of multiple markdown files.

3b. Once you have a markdown file, you can convert it to HTML using a custom CSS file, that you can create yourself. For this, you can use this command:

pandoc file_name.md -f markdown --css style.css -t html -s -o file_name.html

Download this CSS file example to try it out:

file style.css

</*
 * I add this to html files generated with pandoc.
 */
 
html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
 
body {
  color: #000;
  font-family: "Microsoft Yahei","微软雅黑","SimHei","黑体",'Noto Sans',sans-serif,arial,serif;
  font-size: 12px;
  line-height: 1.7;
  padding: 1em;
  margin: auto;
  max-width: 60em;
  background: #fefefe;
}
 
a {
  color: #0645ad;
  text-decoration: none;
}
 
a:visited {
  color: #0b0080;
}
 
a:hover {
  color: #06e;
}
 
a:active {
  color: #faa700;
}
 
a:focus {
  outline: thin dotted;
}
 
*::-moz-selection {
  background: rgba(255, 255, 0, 0.3);
  color: #000;
}
 
*::selection {
  background: rgba(255, 255, 0, 0.3);
  color: #000;
}
 
a::-moz-selection {
  background: rgba(255, 255, 0, 0.3);
  color: #0645ad;
}
 
a::selection {
  background: rgba(255, 255, 0, 0.3);
  color: #0645ad;
}
 
p {
  margin: 1em 0;
}
 
img {
  max-width: 100%;
}
 
h1, h2, h3, h4, h5, h6 {
  color: #000;
  line-height: 125%;
  margin-top: 2em;
  font-weight: normal;
}
 
h4, h5, h6 {
  font-weight: bold;
}
 
h1 {
  font-size: 2.5em;
}
 
h2 {
  font-size: 2em;
}
 
h3 {
  font-size: 1.5em;
}
 
h4 {
  font-size: 1.2em;
}
 
h5 {
  font-size: 1em;
}
 
h6 {
  font-size: 0.9em;
}
 
blockquote {
  color: #666666;
  margin: 0;
  padding-left: 3em;
  border-left: 0.5em #EEE solid;
}
 
hr {
  display: block;
  height: 2px;
  border: 0;
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #eee;
  margin: 1em 0;
  padding: 0;
}
 
pre, code, kbd, samp {
  color: #000;
  font-family: 'Liberation Mono', 'Courier New', Courier, monospace;
  background: #f6f8fa;
  border: 0;
}
 
pre {
  font-size: 0.9em;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
  border: 1px;
  border-style: dashed;
  border-radius: 4px;
  padding: 5px;
  margin: 1em 0;
 
  text-indent: 0;
  padding: 10px;
  overflow: auto;
}
 
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 {
  margin: 1em 0;
  padding: 0 0 0 2em;
}
 
li p:last-child {
  margin-bottom: 0;
}
 
ul ul, ol ol {
  margin: .3em 0;
}
 
dl {
  margin-bottom: 1em;
}
 
dt {
  font-weight: bold;
  margin-bottom: .8em;
}
 
dd {
  margin: 0 0 .8em 2em;
}
 
dd:last-child {
  margin-bottom: 0;
}
 
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle;
}
 
figure {
  display: block;
  text-align: center;
  margin: 1em 0;
}
 
figure img {
  border: none;
  margin: 0 auto;
}
 
figcaption {
  font-size: 0.8em;
  font-style: italic;
  margin: 0 0 .8em;
}
 
table {
  margin-bottom: 2em;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-spacing: 0;
  border-collapse: collapse;
}
 
table th {
  padding: .2em 1em;
  background-color: #eee;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
}
 
table td {
  padding: .2em 1em;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  vertical-align: top;
}
 
.author {
  font-size: 1.2em;
  text-align: center;
}
 
@media only screen and (min-width: 480px) {
  body {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) {
  body {
    font-size: 16px;
  }
}
@media print {
  * {
    background: transparent !important;
    color: black !important;
    filter: none !important;
    -ms-filter: none !important;
  }
 
  body {
    font-size: 12pt;
    max-width: 100%;
  }
 
  a, a:visited {
    text-decoration: underline;
  }
 
  hr {
    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;
  }
 
  h2, h3 {
    page-break-after: avoid;
  }
}>