search

yzane / vscode-markdown-pdf

Markdown converter for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf
Other
1.01k stars 204 forks source link

Adding a watermark / background image to every page #256

Open ghost opened 3 years ago

ghost commented 3 years ago

Is it possible to add a watermark to the exported PDF using this markdown-pdf plugin?

pablaasmo commented 2 years ago

One possible solution is:

  1. Make a css-style file like i.e. (file-name: draft-watermark.css in a CSS folder)

\@media print { .draftWatermark { display: block; width:40%; position: fixed; top: 40%; left: 30%; font-size: 82px; font-weight: bold; opacity: 0.5; color:grey; z-index: 5; transform: rotate(-45deg); } }

\@media screen { .draftWatermark { display: block; width:40%; position: fixed; top: 40%; left: 30%; font-size: 82px; font-weight: bold; opacity: 0.5; color:grey; z-index: 5; transform: rotate(-45deg); } }

.draftWatermark::before { content: "DRAFT"; }

  1. Add a setting in the project settings.json file:

"markdown.styles": ["css/draft-watermark.css"],

  1. In your markdown file add:

[//]: # (Comment out if you want to remove to the draft watermark) ::: draftWatermark :::

This should generate pages with a "draft" watermark on: image

BTW: This also adds a watermark to the HTML generated document.