baileyjm02 / markdown-to-pdf

A GitHub Action to make PDF and HTML files from Markdown

Hey, I'm Bailey 👋

• 🧑‍🏭  I like open-source, and I'm happy to collaborate on cool projects.
• 💬  Ask me about anything, I prefer email.
• 👨‍💻  You can read more about me on my website: bailey.ceo.

markdown-to-pdf's Issues

Long code snippets get cut-off in PDF

Code snippets added in .md file using ``` get cut off on the right end if they are too long to fit in the pdf. The issue similar to that with tables.
Thanks

Target single markdown file

As discussed in #26, the input_dir should also accept a single file path. Two options for completing this are the following:

• Check if the path ends in .md (or .markdown) and if so only pass a return array with a length of one.
• Check if the path is a directory, if not, pass the path into the array directly which will result in a length of one.

^{Originally posted by @tomking July 16, 2021}
Hello, I see that the action takes an input directory to pull .md files from for conversion. I was wondering if it is possible to target a single .md file rather than an entire directory? I didn't see anything about this in the readme, apologies if I missed it and thank you for your time!

Any way to include emojis in the conversion?

Hi - thank you so much for sharing this action. It's really useful!

I'm struggling to convert emojis in the markdown file, either as the emojis themselves 🌺 or as the shorthand :hibiscus:.

Do you know if it is possible to keep emojis in the conversion? Thank you!

Large image size breaks rendering

Hi,

I started running into an issue while using this action that seems to be linked to the markdown-to-pdf container. Haven't really changed anything on my end other than some content in markdown and some more pictures to render. Here's the error out put:

Error: Invalid protocol: data:
    at Request.init (/node_modules/request/request.js:458:31)
    at new Request (/node_modules/request/request.js:127:8)
    at request (/node_modules/request/index.js:53:10)
    at /node_modules/request/index.js:61:12
    at Function.get (/node_modules/request/index.js:100:12)
    at /markdown-to-pdf.js:170:11
    at new Promise (<anonymous>)
    at encodeImage (/markdown-to-pdf.js:169:9)
    at ConvertImageRoutes (/markdown-to-pdf.js:111:22)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
ERROR: SyntaxError: Invalid regular expression: /data:image/png;base64,iVBORw0KGgo....
........

omitted for brevity

........YII=/: Nothing to repeat
    at new RegExp (<anonymous>)
    at ConvertImageRoutes (/markdown-to-pdf.js:112:32)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async /markdown-to-pdf.js:229:15**
Built HTML file: UserGuide.html
Built PDF file: UserGuide.pdf
Gracefully shut down image server.
(node:1) UnhandledPromiseRejectionWarning: TimeoutError: Navigation Timeout Exceeded: 30000ms exceeded
    at /node_modules/puppeteer/lib/LifecycleWatcher.js:142:21
  -- ASYNC --
    at Frame.<anonymous> (/node_modules/puppeteer/lib/helper.js:110:27)
    at Page.goto (/node_modules/puppeteer/lib/Page.js:629:49)
    at Page.<anonymous> (/node_modules/puppeteer/lib/helper.js:111:23)
    at /markdown-to-pdf.js:159:14
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:1) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)

I did upgrade my action to use 1.0.1 in case that was the issue but I'm still getting this consistently now.

Add example PDF output or screenshot

MacOS - Container action is only supported on Linux

Getting this error on MacOS

Container action is only supported on Linux

Is MacOS not supported?

No images in the pdf file

I have a markup document that has 'mermaid' diagrams.

I use 'compile-mermaid-markdown-action' to produce 'png' image files.
The '.md' files are in a 'documentation' folder.
The '.png' files are in a 'documentation/images' folder.

When I run 'markdown-to-pdf' the generated 'html' files work (they have a link to the 'images' folder png files.
But, the pdf file doesn't contain any images.

The link sin the '.md' file are like:

I use the following configuration:
- name: Generate PDF Document
uses: baileyjm02/markdown-to-pdf@v1
with:
input_dir: documentation
output_dir: documentation
images_dir: documentation
build_html: true

problem with Light Mode and Dark Mode

good job! this GitHub Action is very interesting!

I have a question:

in README it's possible to insert an image with a tag that indicates in which mode it should be viewed:

![Light-Mode](./img/img5-light.png#gh-light-mode-only)
![Dark-Mode](./img/img5-dark.png#gh-dark-mode-only)

if my pc has light mode, only the first image is chosen otherwise the second. Problem is that both images are inserted in the pdf. solution?

Allow user to feed customised values for parameters

Greetings. I have tried a couple of tools to convert .md to .pdf using GitHub, so far yours works the best. Thanks for the great job!

Regarding the subject line, I am actually referring to this particular line:

markdown-to-pdf/markdown-to-pdf.js

Line 141 in 053ffda

let PDFLayout = {

If I am not wrong, those items are the options for page.pdf(), and I feel it would be good if you could provide us a way to feed in our values. I didn't realise the default values there could actually cause an issue until I saw my table headings are missing out their background colours. It could be fixed if I am able to set printBackground to true.

Rendering images from multiple paths

I am trying to render our README.md and we have images in multiple subdirectories of the repository, i.e., .github/assets/screenshot.png, src/assets/logo.svg etc. How would I go about embedding these? I set images_dir to ./ (. which would be what I would have expected to set produced an error) to no avail. I also set image_import and neither the empty string nor ./ worked (the folders have no common path component).

Font face support in theme.css

Hi thanks for the amazing project!

I got an issue that I could not use customized local font using @font-face in the style css file.

@font-face {
  font-family: 'my-font';
  src: url("font/my-font.ttf") format('truetype');
}

body {
  font-family: 'my-font';
  font-size: 12px;
  color: #444444;
  background-color: #ffffff;
}

no font is embed into the generated PDF file.

Given input path, /github/workspace/, was not found in filesystem!

Hi, thanks for your tool. I tried with it but always encounter the path not found error:

# .github/workflows/convert-to-pdf.yml

name: Docs to PDF
# This workflow is triggered on pushes to the repository.
on:
  workflow_dispatch: {}
  push:
    branches:
      - master
    # Paths can be used to only trigger actions when you have edited certain files, such as a file within the /docs directory
    paths:
      - '**.md'
      - 'images/**'

jobs:
  converttopdf:
    name: Build PDF
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: baileyjm02/markdown-to-pdf@v1
        with:
          input_dir: main
          output_dir: pdfs
          images_dir: docs/images
          # for example <img src="./images/file-name.png">
          image_import: images
          # Default is true, can set to false to only get PDF files
          build_html: false
      - uses: actions/upload-artifact@v1
        with:
          name: docs
          path: pdfs

This is my PR https://github.com/EthicalML/awesome-production-machine-learning/pull/357/files
and my error in running the workflow:

Any idea what to do with it? @BaileyJM02 Appreciated!

Image not rendering in the PDF

As part of the discussion in #17, I tried the steps provided in the suggestions provided by the other users.

I also followed all the appropriate steps as provided in the documentation, but it is still not producing the images when the converted PDF file is released.

Here is the excerpt of the workflow:

# Code ....
  steps:
    # More Code...
      with:
        input_dir: Journals
        output_dir: pdf
        images_dir: Journals/images
        image_import: images

My markdown files are stored in Journal directory, and images are stored in Journal/images directory.
I even tried adding single quotes over the directory names (string values), but it still wasn't rendering in that area.

This is the code that was added in the Markdown file:

<div align="center">
  <img src="./images/image.png" width="60%" />
</div>

Is there anything in particular I would need to fix this issue?
Any help would be greatly appreciated.

Feature request: render code-block with mermaid

GitHub md supports mermaid

flowchart LR
    A[like] --> B((this))

but with this action, the plain source code.
I want to get the diagram rendered PDF file

Option to recursively look for .md files

Hey,

Is there any option for the github action to look for .md files recursively ? If not, how should I approach this to add this feature?

Images in HTML Build

Using the following folder structure and action configuration I am able to generate a PDF with the images embedded but the HTML build does not include images. Hopefully it's just a minor thing on my side but I do notice the images are not copied over when the artifact is uploaded.

Folder structure:

docs/src/markdown.md
docs/src/images/*.jpg
docs/dest

And here is my action:

    - name: Create PDF and HTML
      uses: BaileyJM02/[email protected]
      with:
        input_dir: docs/src
        images_dir: docs/src/images
        image_import: ./images
        output_dir: docs/dest

    - uses: actions/upload-artifact@v1
      with:
        name: docs
        path: docs/dest

Regarding the image_import: ./images option:

• If I DON'T include it then images do not display in either PDF or HTML (expected behavior).
• If I DO include it then images only display in the rendered PDF. They DO NOT display in the rendered HTML file (unexpected behavior).
• If I DO include it, then the image tags are replaced with http://localhost:3000/imagename.png in the HTML. There are no base64 encoded images included in the output HTML.

Am I missing something here?

Give the user the ability to skip the the creation of PDF files

Task Lists not being rendered on PDF

I was trying to add Task Lists in my Markdown file to be rendered in my PDF file. I added it in the following manner:

- [ ] This is a task
- [ ] This is another task
- [ ] Task 3

• This is a task
• This is another task
• Task 3

But it is being rendered in the below manner:

Could you kindly fix this issue as well as I really want to fully utilise this for my academic research.

Usage example is not consistent with documentation

The usage example

        with:
          markdown_dir: docs

This key of markdown_dir does not exist, rather the documentation should reference input_dir. Without input_dir the default path is just the GITHUB_WORKSPACE.

Footnotes not rendering

Footnotes does not seem to be rendering in pdf.

Is that possible to rename the generated pdf file?

Optimization: process dirs checks before running the image

Description:

The current Dockerfile installs numerous dependencies prior to validating the input directories. This could potentially lead to unnecessary resource usage and time consumption, especially if the input directories are invalid.

wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - && \
    sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' && \
    apt-get update && \
    apt-get -y install xvfb gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 \
    libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 \
    libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 \
    libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 \
    libxtst6 ca-certificates fonts-liberation libnss3 lsb-release xdg-utils wget curl google-chrome-stable \
    fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf && \
    rm -rf /var/lib/apt/lists/*

To optimize this process, it is proposed to validate the input directories and other checks before installing the dependencies. This way, if there are any issues with the directories, the error can be returned promptly, avoiding the unnecessary installation of dependencies. This change will make the Dockerfile more efficient and responsive.

Cut Off Tables in PDF - scaling

Dear @BaileyJM02 ,

Thank you for the Action! But i have run into a problem today:

I have quiet packed tables. In github they are rendered without a scroll bar, but in the PDF the table is cut off.
Github: https://github.com/HannesWuensche/Readme2PDF
PDF: https://github.com/HannesWuensche/Readme2PDF/blob/main/%5BDokumentation%5D_Readme2PDF.pdf

It would be nice to render the pdf on basis of the scaling of the single Readme.md view, since it is not so Packed.
Readme View: https://github.com/HannesWuensche/Readme2PDF/blob/main/Readme.md

Or have a scaling option to reduce the overall font size. Is there a way to adjust scaling of the PDF output or tables within the pdf?
THX
Hannes

Soft line breaks are converted into hard line breaks

GitHub flavoured markdown should have soft line breaks but hard line breaks are used (https://github.github.com/gfm/#soft-line-breaks)

You can see an example at:

• Markdown: KirstieJane/fun-with-a....docs/README.md
• PDF: KirstieJane/fun-with-a....pdfs/README.pdf

(Initially reported in #14)

Page breaks for PDF files

Hello there! Thanks for the awesome action. It was simple to set up, and I love the quick concatenation of several folders and directories to pull from, in order, when generating a PDF. It's great.

I'm curious, would there be a way to configure the action to start a new page in the PDF document for each Markdown file it encounters? It would help me segment some of my content and make it easier to read, especially with a table of contents. It seems the converter first generates HTML, then a PDF from that, so I'm not sure what the technique would be to separate pages, but it'd be an awesome feature if possible. If you have any thoughts let me know, and I'd be happy to help if I can.

Feature: Add user defined variables for template

Hi!
It will be great if there will be ability to define custom variables for the template. On example, I want to create first page of generated pdf as title page where I define title of document, authors, creation/modification date, etc.

It can be done thru adding action inputs parameter where .json file with template variables defined.

And then (just quick mockup):

let jsonData = require(path_to_user_variables.json);

And for:

markdown-to-pdf/src/markdown-to-pdf.js

Line 210 in 1be2677

let view = {

Change to:

let view = {
    title: title,
    style: this._style,
    toc: toc,
    content: body,
    vars: jsonData
};

In template:

<div class='title'>
{{{vars.documentTitle}}}
</div>
<div>
{{{vars.author}}}
</div>

Action hanging forever after error

I get the following logs, and the action just hangs:

Built HTML file: final.html
Built PDF file: final.pdf
Gracefully shut down image server.
(node:1) UnhandledPromiseRejectionWarning: TimeoutError: Navigation Timeout Exceeded: 30000ms exceeded
    at /node_modules/puppeteer/lib/LifecycleWatcher.js:142:21
  -- ASYNC --
    at Frame.<anonymous> (/node_modules/puppeteer/lib/helper.js:110:27)
    at Page.goto (/node_modules/puppeteer/lib/Page.js:629:49)
    at Page.<anonymous> (/node_modules/puppeteer/lib/helper.js:111:23)
    at /markdown-to-pdf.js:159:14
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:1) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:1) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Readme.md in Root Directory not recognised, infinite loop

He,
since end of last week I get the following Error Message:

Started image server with image folder route '/github/workspace/.github/pictures'.
Markdown files found: Readme.md
(node:1) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open '/github/workspace/.Readme.md'
at Object.openSync (fs.js:462:3)
at Object.readFileSync (fs.js:364:35)
at GetFileBody (/markdown-to-pdf.js:113:12)
at /markdown-to-pdf.js:267:21
(node:1) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:1) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

My .yml:

uses: baileyjm02/markdown-to-pdf@v1
with:
input_dir: .
output_dir: .
image_import: .github/pictures #Uncomment if u use imgges in your Readme.md
images_dir: .github/pictures #Uncomment if u use imgges in your Readme.md
build_html: false

Since my "input_dir" is root but can not be empty I set it to ".". Worked till last week.
Obviously the "." causes the Problem:

no such file or directory, open '/github/workspace/.Readme.md'

Thank you