Differences

This shows you the differences between two versions of the page.

--- articles:digital-publishing [2025/02/19 10:54] – ipek
+++ articles:digital-publishing [2025/06/10 20:47] (current) – wgp
@@ Line 1: / Line 1: @@
-**[[https://pandoc.org|Pandoc]]** is a tool to convert one file format to another like markdown, html, docx, rtf, txt, epub, LaTeX, PDF and many others.
+**[[https://pandoc.org|Pandoc]]** is a tool to convert one file format to another, like markdown, html, docx, rtf, txt, epub, LaTeX, PDF and many others.
-[[https://pandoc.org/installing.html|Installing Pandoc]]
+Pandoc is available for a wide range of operating systems like Linux, Windows, MacOS, BSD, and as a Docker image. For installing Pandoc, see [[https://pandoc.org/installing.html|installation instruction]] for your desired platform.
-Pandoc is a command-line tool, not a graphic user interface. But there is also the graphic user interface, the [[https://panwriter.com|Pan Writer]] tool, where you can write and see how it looks like in real life (more or less) and most importantly you can convert files via the interface without using the command-line. You need to install Pandoc nevertheless.
+Pandoc is a command-line tool, and does not have a graphic user interface (GUI). The [[https://panwriter.com|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**:
+**Building a blog-like website with Pandoc**:
-) You can create a doc file with your usual text editor program, Libre Office for example. You can insert tables to make your menu or buttons, or you can fill the page entirely with tables. Save it as .docx locally in your computer.
+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.
-) Converting the .docx file via command line:
+**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.
-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 usual Pandoc template that is being used in the markdown format.
+**2.** Now convert the .docx file to markdown via command line:
+<code> pandoc --extract-media=. -s file_name.docx -t markdown -o file_name.md </code>
-) Converting the markdown file into html is possible via the command-line and also via the PanWriter. Via the command line:
+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.
-pandoc file_name.md -f markdown -t html -s -o file_name.html
-Or you can export the markdown file to html via PanWriter.
+**3a.** Converting the markdown file into HTML is possible via the command-line and also via the PanWriter. Via the command line:
+<code> pandoc file_name.md -f markdown -t html -s -o file_name.html </code>
-An example of a html file converted from a .docx file:
+Or you can export the markdown file to HTML via PanWriter.
+An example of a HTML file converted from a .docx file:
 {{: pandoc_converted_example.png?700|}}
+You can build your site even entirely out of tables and style them in your HTML file, here you can find some [[https://www.w3schools.com/html/html_tables.asp|introduction to building tables]].
+[[https://www.youtube.com/watch?v=e62D-aayveY&list=PLP9IO4UYNF0VdAajP_5pYG-jG2JRrG72s|HTML - Tables]]
+You can also [[https://smallsharpsoftwaretools.com/tutorials/create-html-from-multiple-markdown-files/|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:
+<code>
+pandoc file_name.md -f markdown --css style.css -t html -s -o file_name.html
+</code>
+Download this CSS file example to try it out:
+<file CSS 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;
+  }
+}>
+</file>