markdown-pdf: Upgrade to 7.0.0 breaks CSS?

Has anyone else seen this? I upgraded to the new markdown-pdf 7.0.0 in order to get the new links-in-PDFs behavior, only to find that now my CSS is broken. As in, either markdown-pdf or PhantomJS (can’t tell which) just isn’t looking at my CSS file at all anymore. The output is exactly the same as if I take the cssPath value out of my markdown-pdf options entirely.

I have changed literally nothing in my app. All I did was npm update markdown-pdf, and wham, CSS is busted. I’ve double-checked that the CSS file really is still there, et cetera. Here’s how I’m invoking markdown-PDF:

fileList = buildFileList() // collect file information from src/documents/*.md
var options = {
    preProcessMd: preProcessMd,
    cssPath: "src/static/styles/default.css",
    remarkable: {
        html: true
    }
}

markdownpdf(options)
    .concat.from(
        fileList.map(function(val){ return val.path } )
    )
    .to(getOutputFilename(fileList[0].title), function () {
  console.log("Done.")
})

About this issue

Original URL
State: open
Created 8 years ago
Comments: 18 (3 by maintainers)

Commits related to this issue

Add unit test for the cssPath option This wasn't being tested for before. Spurred by issue #82. — committed to anko/markdown-pdf by anko 8 years ago
Update render.js Fix CSS issue in reference to #82. — committed to ckreon/js-markdown-pdf by ckreon 8 years ago

Most upvoted comments

Adding cssPath = 'file:///' + cssPath to the page.evaluate block of render.js fixes the problem for me.

// Add custom CSS to the page
page.evaluate(function (cssPaths) {
  var head = document.querySelector('head')
  cssPaths.forEach(function (cssPath) {
    cssPath = 'file:///' + cssPath
    var css = document.createElement('link')
    css.rel = 'stylesheet'
    css.href = cssPath

    head.appendChild(css)
  })
}, [args.cssPath, args.highlightCssPath])

+13

animeoakes on Mar 10, 2016

FYI, this is no longer a blocking issue for me. I switched from markdown-pdf to marked for md-to-html conversion plus wkhtmltopdf for html to pdf. Works great.

I still think the underlying issue for me was with phantom, not with markdown-pdf itself. What finally made me give up on this particular toolchain was converting all my .md files to one monolithic HTML, with a <style>block for the css, verifying that the HTML looks correct in the browser, manually invoking phantomjs on it as per your gist, and having phantom just plain hang on me. So F-it, I’m using a different tool. If you guys get tired of fighting with phantom, maybe give wkhtmltopdf a look?

Thanks for all your efforts in helping me narrow this down. If you want to close this issue as no-repro, I won’t object.

jasonb-vbt on Feb 10, 2016

I am trying to prepare a PR, however I am having trouble detecting the OS to be Windows to conditionally append file:/// to the CSS paths. The expression os.name === 'windows' is not returning true within the evaluate callback. I’m not familiar with PhantomJS, so I don’t know how to console.log(os.name) and see what it’s actually telling us the OS is within that evaluate callback. Any ideas?

animeoakes on May 19, 2016

https://nodejs.org/api/os.html#os_os_platform

Did you try os.platform() === 'win32' ?

roadmanfong on May 20, 2016