How to add Header and Footer to a Markdown File?

Question

I have a more general use case where I need to add my company logo to the Header of each page when I convert the Markdown to PDf document. It is important to note that it is not the most basic question where I just need to add an image but instead I need a header and footer similar to as we do in a word file.

I have tried to figure out the solution but I got to know that it is possible using Sweave and in R Markdown. The markdown I have is Github Markdown.

I used Typora to crete the markdown and there is no option provided by Typora to do the same. Luckily I found that I could add Header and Footer to a Markdown by adding an Extension "Markdown-Pdf" to VS-Code but still it is not possible to configure the header and footer.

The official document of markdown-pdf gives the setting of markdown-pdf.headerTemplate but giving this argument a style does not work.

Onto

I can recommend pandoc, see pandoc.org/MANUAL.html#creating-a-pdf and pandoc.org/MANUAL.html#templates – Marilla

Answer 1

You have to add the html code in the options of the extension.

Open settings, search for markdown-pdf.headerTemplate and put in your header styling, including the image. The image must be base64 encoded.

Here an example of how I use those settings with a title and a image.

"markdown-pdf.headerTemplate": "<div style=\"font-size: 9px; margin-left: 1cm;\"> <span>Some specific header text</span></div> 
<div style=\"margin-left: auto; margin-right: 1cm; \"> 
<img style='display:block; width:55px;' id='base64image' 
src=\"data:image/jpeg;base64,/9j/4A...A/9k=\"/></div>"

Unfortunately only base64 encoded images are working. For larger images this means o lot of code.

Ammeter

Answer 2

Had this issue too. Solved it by writing a Python script. It takes an image, converts it to Base64, and auto-updates the markdown-pdf.headerTemplate in VS Code's settings.json. You can even throw in your own HTML template. Just run the script and your next Markdown PDF will have the header you want.

import argparse, base64, json, logging, os, platform from PIL import Image

Example usage:

python3 ImageBase64VscodeConfigurator.py --i input.png --o output.txt --c 85 --s 50 --html new_template.html --header

Leatherette