Issues controlling header and footer styles using a stylesheet

[darcyowens]

Currently attempting to get styles applying to headers and footers using the API. I'm trying to use the examples given in this repo. Seems no style is applying, any insight or are headers and footers completely broken in v2 releases?

All I'm getting at the moment is a very small, illegible header.

Here's the code/stylesheet/header:

header.hbs

<h3>MDPDF - An elegant markdown to pdf converter</h3>

styles.css

h3 {
    font-size:60px;
    color: red;
}

index.js

let options = {
    source: pathname,
    destination: process.cwd() + "/" + pathname.replace('.md', '.pdf'),
    header: path.join(__dirname, 'header.hbs'),
    style: path.join(__dirname, 'styles.css'),
    pdf: {
        format: 'A4',
        orientation: 'portrait',
    quality: '100',
        header: {
            height: '20mm'
        },
        footer: {
            height: '20mm'
    },
        border: {
            top: '10mm',
        left: '10mm',
            bottom: '10mm',
            right: '10mm'
        }
    }
};

mdpdf.convert(options).then((pdfPath) => {
    console.log('PDF Path', pdfPath);
}).catch((err) => {
    console.error(err);
})

Using mdpdf 2.1.2.

[elliotblackburn]

Sadly it's a deffiency in chrome's Puppeteer. MDPDF takes the markdown and converts it to HTML, and then uses Puppeteer to render the HTML and convert to a PDF. Puppeteer doesn't allow you to apply styles to heads and footers at the moment using CSS.

Previously in v1 we used PhantomJS which did allow this but that project is now deprecated and unmaintained so we had to make the shift to puppeteer despite this sadly.

I would suggest raising a ticket with Puppeteer to ask about it.

[LucaBlackDragon]

Maybe one could use juice or inline-css to inline styles into the header/footer .hbs files before passing them to mdpdf (for inline-css, check this issue too)