Post-Platform Digital Publishing Toolkit
Page
  • Show page
  • Old revisions
  • Backlinks
  • Back to top
    • Site
  • Recent Changes
  • Media Manager
  • Sitemap
    • User
  • Register

    • Page tools

  • Show page
  • Old revisions
  • Backlinks
  • Back to top

    • Site tools

  • Recent Changes
  • Media Manager
  • Sitemap

    • User tools

  • Register
    •
    Trace:

    Differences

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

    Link to this comparison view

    Both sides previous revisionPrevious revision
    Next revision    		Previous revision
    articles:digital-publishing [2025/02/19 10:54] – ipekarticles:digital-publishing [2025/02/22 08:55] (current) – ipek
    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]] [[https://pandoc.org/installing.html|Installing Pandoc]]
    Line 7: Line 7:
     **Building a blog-like website with pandoc**: **Building a blog-like website with pandoc**:
      
    -1) 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 make a start. 
      
    -2) Converting the .docx file via command line:  +**1)** 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.  
    -pandoc --extract-media=. -s file_name.docx -t markdown -o file_name.md+ 
     +**2)** Converting the .docx file via command line:  
     +<code> pandoc --extract-media=. -s file_name.docx -t markdown -o file_name.md </code>
      
     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. 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.
      
    -3) Converting the markdown file into html is possible via the command-line and also via the PanWriter. Via the command line: +**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  +<code> pandoc file_name.md -f markdown -t html -s -o file_name.html </code>
      
     Or you can export the markdown file to html via PanWriter. Or you can export the markdown file to html via PanWriter.
    Line 22: Line 24:
     {{: pandoc_converted_example.png?700|}} {{: pandoc_converted_example.png?700|}}
      
     +You can build your site even entirely out of tables and style them in your html file, here some [[https://www.w3schools.com/html/html_tables.asp|intro 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 a html file out of multiple markdown files]].
     +
     +**3b)** Once you have a markdown file, you can convert the markdown file 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 an example css file 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>
    articles/digital-publishing.1739962440.txt.gz · Last modified: 2025/02/19 10:54 by ipek