davidbgk
/
larlet-fr-david-cache
Volgen 1
Ster 0
Vork 0
Code Publicaties 0 Activiteit
A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
271 Commits
1 Branch
Tree: 81705e3436
Branches Labels
${ item.name }
Maak branch ${ searchTerm }
van '81705e3436'
${ noResults }
larlet-fr-david-cache/cache/2022/0c60682eeb1edfaf2c6c13cd30c.../index.md

index.md 6.2KB
Ruw Normal View Geschiedenis

More links
2 jaren geleden
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 
  1. title: How I create fancy PDF-documents in Markdown

  2. url: https://hund.tty1.se/2021/07/14/how-i-create-fancy-pdf-documents-in-markdown.html

  3. hash_url: 0c60682eeb1edfaf2c6c13cd30cce60d

  4. 

  5. <p class="date">Wednesday, July 14, 2021</p>

  6. 

  7. <p>I haven’t had the need to create any ‘fancy’ document in ages, but the other day I had to create a PDF-document with fancy formatting for a work related thing.</p>

  8. 

  9. <p>After some testing of various solutions and tools, I ended up with a setup using <a href="https://pandoc.org">Pandoc</a>, <a href="https://weasyprint.org/">WeasyPrint</a> and <a href="https://en.wikipedia.org/wiki/Markdown">Markdown</a>. I consider Markdown to be the best markup language and I use it for everything!</p>

  10. 

  11. <div class="grid-container">

  12.     <div class="grid-item single">

  13.         <a href="https://hund.tty1.se/img/pandoc-pdf.png">

  14.             <img src="https://hund.tty1.se/img/t/pandoc-pdf.png" alt="">

  15.         </a>

  16.         <figcaption>My example document</figcaption>

  17.     </div>

  18. </div>

  19. 

  20. <p>The source for this PDF-document looks like this:</p>

  21. 

  22. <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># H1 Header

  23. 

  24. I really like using Markdown.

  25. 

  26. 1. First item

  27. 2. Second item

  28. 3. Third item

  29. 4. Fourth item

  30. 

  31. &gt; This is some quoted text.

  32. 

  33. ```sh

  34. #!/bin/sh

  35. echo "This is a code block."

  36. ```

  37. </code></pre></div></div>

  38. 

  39. <p>And this is the CSS I used:</p>

  40. 

  41. <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nd">:root</span> <span class="p">{</span>

  42.   <span class="py">--blue</span><span class="p">:</span> <span class="m">#3465A4</span><span class="p">;</span>

  43. <span class="p">}</span>

  44. 

  45. <span class="k">@font-face</span> <span class="p">{</span>

  46.     <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'NotoSans'</span><span class="p">;</span>

  47.     <span class="nl">src</span><span class="p">:</span> <span class="sx">url('NotoSans-Condensed.ttf')</span> <span class="n">format</span><span class="p">(</span><span class="s2">'ttf'</span><span class="p">)</span>

  48. <span class="p">}</span>

  49. 

  50. <span class="nt">html</span> <span class="p">{</span>

  51.     <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'NotoSans'</span><span class="p">;</span>

  52.     <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.45em</span><span class="p">;</span>

  53. <span class="p">}</span>

  54. 

  55. <span class="nt">h1</span> <span class="p">{</span>

  56.     <span class="nl">font-size</span><span class="p">:</span> <span class="m">26px</span><span class="p">;</span>

  57.     <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--blue</span><span class="p">);</span>

  58.     <span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">0.15em</span><span class="p">;</span>

  59.     <span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#CCC</span><span class="p">;</span>

  60. <span class="p">}</span>

  61. 

  62. <span class="nt">pre</span> <span class="p">{</span>

  63.     <span class="nl">background-color</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.05</span><span class="p">);</span>

  64.     <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.1</span><span class="p">);</span>

  65.     <span class="nl">padding</span><span class="p">:</span> <span class="m">1em</span><span class="p">;</span>

  66.     <span class="nl">font-size</span><span class="p">:</span> <span class="m">12px</span><span class="p">;</span>

  67.   <span class="p">}</span>

  68. 

  69. <span class="nt">blockquote</span> <span class="p">{</span>

  70.     <span class="nl">background-color</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.05</span><span class="p">);</span>

  71.     <span class="nl">border-left</span><span class="p">:</span> <span class="m">5px</span> <span class="nb">solid</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.1</span><span class="p">);</span>

  72.     <span class="nl">padding</span><span class="p">:</span> <span class="m">0.1em</span> <span class="m">0.75em</span><span class="p">;</span>

  73. <span class="p">}</span>

  74. </code></pre></div></div>

  75. 

  76. <p>And this is the command I used to render the document:</p>

  77. 

  78. <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ pandoc --pdf-engine weasyprint -c style.css demo.md -s -o demo.pdf 

  79. </code></pre></div></div>

  80. 

  81. <h2 id="installation">Installation</h2>

  82. 

  83. <p>To make this work you need to install Pandoc and WeasyPrint. In Gentoo the packages are called <code class="language-plaintext highlighter-rouge">app-text/pandoc</code> and <code class="language-plaintext highlighter-rouge">dev-python/weasyprint</code>.</p>

  84. 

  85. <p>With that said. I did not install Pandoc from source myself. It simply requires way too many packages for my liking (when compiled from source):</p>

  86. 

  87. <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># emerge pandoc

  88. [...]

  89. Total: 133 packages (133 new), Size of downloads: 165,258 KiB

  90. </code></pre></div></div>

  91. 

  92. <p>I instead used a binary package that’s available from their <a href="https://github.com/jgm/pandoc/releases/">GitHub-page</a>. The archive weights in at about 14 MB and unpacked at about 68 MB. I then just put the folder in <code class="language-plaintext highlighter-rouge">~/.local/bin/</code> and created a symbolic link to the binary file.</p>