Useful settings for "Markdown PDF" VSCode extension

README.md

Gist for nice header and footer

Useful for converting md files into technical documents

I wasted so much time on this that I decided that it is worthing a gist.

The Markdown PDF VS-code extension is using the puppeteer engine to render PDF. Setting up nice header and footer is not easy and we cannot get access to the temporary html that the engine is rendering.

In this gist:

• a CSS file that formats tables as grids, as expected by many technical documents.
• a portion of .vscode/settings.json that sets up:
  • the header with document name (actually file name. for removing the extension from the filename we need to fork and modify the extension
  • the footer with current page / tatal pages

The main advantage is adding gray lines to separate between the headers and the document itself.

Note

To force the engine to render a new page, put this line into the md file:

<div style="page-break-before: always;"></div>

pdf-styles.css

table {
  border-collapse: collapse; /* Prevents double borders */
  width: 100%;
}
th, td {
  border: 1px solid #06033d;
  padding: 8px;
  text-align: left;
}
code {
  background-color: #edecf4;
  color: #654603;
  padding: 2px 4px;
  font-family: 'Courier New', Courier, monospace;
  border-radius: 3px;
}
:not(pre):not(.hljs) > code {
  color: #654603;
}
a {
  color: #340101 !important; /* Force black text */
  text-decoration: none !important; /* Remove underline */
  font-weight: bold;
  font-size: 0.95em;
}
a[href]:before {
  content: 'Link: [';
  color: #340101;
}
a[href]:after {
  content: ']';
  color: #340101;
}

settings.json

{
"markdown-pdf.headerTemplate": "<div style='width:100%; height:16px; border-bottom:3px solid whitesmoke; color:whitesmoke; position:relative; font-size:12px; font-family: arial; box-sizing:border-box;'>  <span class='title' style='position:absolute; left:0.6cm; top:-5px;'></span>  <span style='position:absolute; left:8cm; top:0px; font-size:6px;'>(Converted with Markdown PDF)</span>  <span class='date' style='position:absolute; right:0.7cm; top:-5px;'></span></div>",
"markdown-pdf.footerTemplate": "<div style='height:100%;width:100%;position:relative;'><div style='width:100%; height:22px; border-top:3px solid whitesmoke;padding-top:3px; color:whitesmoke; font-size:12px; font-family:arial; box-sizing:border-box;position:absolute;bottom:-10px;'><div style='text-align:center'><span class='pageNumber'></span> / <span class='totalPages'></span></div></div></div>",
  "markdown-pdf.styles": [
    "docs/pdf-styles.css" // rel to workspace root
  ],
  "markdown-pdf.includeDefaultStyles": true, // Set to false if you want to completely override default styles
  "markdown-pdf.mermaidServer": "", // Set to an empty string to disable Mermaid rendering
}