30-04-2021



The Markdown template file for cards in the Chip Shop game contains a lot of Markdown front matter fields for game mechanics. Not all are used on every card. Not all are used on every card. To compile an R Markdown document to PDF, there is nothing else you have to know. Pretty easy right? November 24, 2020, 9:46pm #7. Ok I did as follows: I click File, New File, R script then enter this code below and ran it to install the tinytex package. I checked on it to use it. It is a full-featured Markdown editor which allows you to quickly edit, format and convert text to HTML or XHTML, as well as export text as PDF. It is also a smooth-running and modern-looking editor that is based on the standard CommonMark and GitHub Flavoured Markdown and packs a set of user-friendly features.

Markdown is so easy to write, and PDFs are so easy to pass around. So going from Markdown to PDF should be easy, right? Well, it took some doing, but here’s something that should help folks out with the process.

Avd laptops & desktops driver. March 6, 2020

A Little History

Back in December of 2018, I wrote Convert Markdown to PDF with Pandoc and LaTeX, and showed how I got the Markdown to PDF process working, which saved the technical writers at my company hours and hours of work. Being able to whip through the process in seconds instead of days made life a whole lot easier.

Converting markdown to pdf with Hugo. In this post we will be taking a look at how to generate beautifully formatted documents with Hugo. The idea is to have a markdown to pdf conversion pipeline. So, let’s get started! My previous post was dedicated to a markdown to pdf conversion technique, which involved pandoc. Pandoc test1.md -f markdown -t html -s -o test1.html. The filename test1.md tells pandoc which file to convert. The -s option says to create a “standalone” file, with a header and footer, not just a fragment. And the -o test1.html says to put the output in the file test1.html.

But, there were a few issues. As I said previously, I wasn’t happy with the headings. Our finished PDFs had a lot of vertical white space between headings and code blocks. Another weird issue was that LaTeX didn’t really have equivalents to what is in HTML. Instead of <h1> and <h2>, LaTeX has section and subsection (with some other names for smaller headings). But they really only go down as far as <h5>.

While we could live with some of these idiosyncrasies, I was having trouble with a particular project. There was a character that just wouldn’t render, regardless of which font I was using. Acer driver. As part of the ensuing ruckus, I began to look for other ways to convert Markdown to PDF.

Convert Markdown to PDF in a New Way

What I found was a similar process, and the moving parts were things I knew oodles more about than LaTex. It dawned on me one day that I could use Pandoc to get from Markdown to HTML, then use a CSS template (not LaTeX) and something called WeasyPrint to get from there to a finished PDF. So I charged off in that direction, and a week or so later had some beautiful results.

So how does one go about convert Markdown to PDF? Well, it’s a fairly straightforward operation. It’s a two-step process now though, so the easiest way I’ve found is to make a Markdown file, then run a script I wrote on it. That script prompts for some input, then executes a couple of commands. I make changes as I need to, but this is how the script sits at the moment…

The Markdown to PDF Script

There are comments in this Bash script that explain how it works. Essentially though, it spits out a list of markdown files in the directory where we’re sitting, prompts us to copy and paste a filename, asks for a layout type, and then uses Pandoc to make the appropriate HTML and WeasyPrint to finally create the PDF.

I won’t post the whole CSS here, but I’ll run through some of the things that might make life easier for anyone trying to give this a spin. There’s a README.pdf that explains it all too, with examples.

The Markdown to PDF CSS Template

Declaring Fonts

Right up near the top of the file, we declare fonts. I’ve got the fonts that IBM open sourced a couple years ago, Plex. There are sans (for most everything) and monospace (for code and preformatted text) fonts I’ve declared. But you can plug in any fonts you want there. Just make sure to grab the regular, bold, and italic version of each, and put them in the same directory that I’ve stuck the Plex fonts in. Then refer to them the same way I did.

Styling Different Pages

Below the fonts declaration, there’s a @page :first. This is the cover page. There is a background image declared here, (the FossFolks logo in the example PDF). I’ve set an image size of 450×300 and gotten it working for me. But if you want a different size image, you’ll have to finagle the margins, playing with them until the image sits where you want it to. Moving forward, on other PDFs, you should probably stick to the same sized images so you don’t have to keep dorking with CSS.

The next type of page that’s declared is @page no-chapter. This is the Table of Contents page. Things here are set up pretty much the same as on the regular pages. But change them here (to do something like get rid of the logo and page number in the lower right maybe) if you want, and it won’t affect the rest of the document.

Next up is the @page. Anything after the Table of Contents page(s) in the PDF is effected. This looks about like the TOC does, but we can tweak here to alter the rest of the document.

At last there’s @page :blank. Honestly, I don’t quite recall what exactly this effects. When I figure it out I’ll update the README.

The remainder of the stylesheet should look familiar to anyone who knows anything about CSS.

Markdown To Pdf Book

Table of Contents Problem

There was one wee little issue, with the table of contents. When a list (the H3 headings are the list items) went over a page break, the items on the first page’s part got bumped up a bit.

The fix is to edit boxes.py. You’ll have to hunt for it, but it’s sitting in whichever directory WeasyPrint got installed into. Try this to find it:

It should be somewhere like: /usr/local/lib/python3.x/dist-packages/weasyprint/formatting_structure (on a Linux machine), or /usr/local/lib/python3.x/site-packages/weasyprint/formatting_structure/ Ads technologies 1.0.0 driver. (on a Mac).

We’re looking for something in the vicinity of line 320-350 of that file (which may change in future versions) that reads:

It essentially means 'if something is equal to something else', and we need it to say 'if something is NOT equal to something else' instead. We do it by replacing the first of those equals signs with an exclamation point, like this:

Rendering the TOC should work fine after this change.

The HTML Template

There really isn’t much else we have to mess with. In the templates directory you’ll find a default.html where we are able to customize some different things that show up. There’s a title, subtitle, author, email, and date, and we can see where those are showing up in a finished PDF. If we wanted to edit them though, to have something different showing up on the cover page, this is where we’d do it.

Markdown to PDF Summary

It’s a fairly slick process, especially considering where I started. The Pandoc and WeasyPrint communities were wicked helpful. Now, instead of fighting to squeeze a good looking PDF out (and having to really learn LaTeX), I can cough up a pretty cool looking PDF with some CSS, which is something I’m way more familiar with. And I’m hoping by sharing it here that I can save someone else from banging their head on a desk trying to figure it out starting from zero.

You can grab the template from this Github repository. Put it through it’s paces, and let me know how you make out.

Previous

Other Articles

A markdown-converter for Visual Studio Code

What's MarkdownConverter?

MarkdownConverter is a Visual Studio Code-extension which allows you to export your Markdown-file as PDF-, HTML or Image-files.
It provides many features, such as DateTime-Formatting, configuring your own CSS-styles, setting Headers and Footers, FrontMatter and much more.

Usage

  1. Set your desired conversion-types or skip this step to convert your markdown-file to PDF:
    • Open up your Visual Studio Code-Settings and set markdownConverter.ConversionType to an array of types:
  2. Optionally set the pattern for resolving the destination-path:
  3. Open up the command pallet (Ctrl, Shift+P) and search one of these commands:
    • Markdown: Convert Document (Markdown: Dokument Konvertieren in German) or mco (mk in German) for short
    • Markdown: Convert all Documents (Markdown: Alle Dokumente konvertieren) or mcd (madk in German) for short
    • Markdown: Chain all Documents (Markdown: Alle Dokumente verketten) or mcad (madv in German) for short
  4. Press enter and wait for the process to finish

Variable Substitution

Before the conversion, the markdown-file is preprocessed using Handlebars. Variables (such as {{ Author }}) are automatically replaced with the corresponding attribute-value.

Markdown To Pdf Npm

Example:

Following attributes are predefined and may be overridden by the document-attributes:

  • CreationDate
    A Date-value indicating the time of the creation of the markdown-file
  • ChangeDate
    A Date-value indicating the time of the last change of the content of the markdown-file
  • CurrentDate
    A Date-value representing the time of the conversion
  • Author
    The assumed name of the author according to GIT_AUTHOR_NAME, GIT_COMMITER_NAME, HGUSER, C9_USER, git, wmic or osascript
  • Attributes declared inside the vscode-settings (see Settings)

Date-Formatting

Date-attributes are being formatted by default. MarkdownConverter allows you to customize the format of every individual date.

You can format an individual date by using the FormatDate-helper like this:

Example:

You can override the default date-format for a document by adding a DateFormat attribute:

Example:

Custom Date-Formats

There are two predefined date-formats, namely Default and FullDate, which represent date-formats for your current locale.

If you use a specific date-format repeatedly you might want to specify a custom date-format using the markdownConverter.DateFormats setting (see [Settings][#settings]):

Markdown

settings.json

Example

Settings

Markdown

This is a list of the most important settings. To see all of them, install the extension and have a look into the settings-dialogue of vscode.

  • markdownConverter.DestinationPattern:
    Allows you to specify a pattern for resolving the destination-path. Following variables are substituted:
    • ${workspaceFolder}: Either the path to the workspace or the directory which contains the document.
    • ${dirname} The relative path from the ${workspaceFolder} to the directory which contains the document.
    • ${basename}: The name of the document-file without extension.
    • ${extension}: The file-extension of the destination-datatype.
    • ${filename}: The name of the document-file.
  • markdownConverter.ConversionType:
    The types to convert the markdown-document to.
  • markdownConverter.DefaultDateFormat:
    The date-format to apply to all dates by default.
  • markdownConverter.DateFormats:
    A set of names and their corresponding custom date-format.
  • markdownConverter.ChromiumArgs:
    Allows you to pass specific arguments to chromium for the conversion (such as --no-sandbox or --disable-gpu).
  • markdownConverter.Parser.SystemParserEnabled:
    This setting allows you to enable or disable the usage of vscodes internal markdown-parser. Using the internal markdown-parser might be very useful to you as it grants you access to all markdown-plugin extensions installed to your vscode.
  • markdownConverter.Parser.Toc.Enabled:
    Allows you to automatically include a table-of-contents for your document in your converted files.
  • markdownConverter.Document.Attributes:
    Using this setting you can specify default attributes which are applied to all your documents.
  • markdownConverter.HeaderTemplate and markdownConverter.FooterTemplate:
    The html-sourcecode of the header- and footer-section. Variable-substituion is supported here as well. Page-numbers and similar information can be included as described in the puppeteer docs.
  • markdownConverter.DefaultStyles:
    Allows you to disable the default styles. This might be useful if you want to create your own stylesheet from scratch.
  • markdownConverter.StyleSheets:
    A set of stylesheets to include in your document.