How to Create Custom-Styled PDFs from Markdown and CSS

Markdown is a lightweight markup language that makes it easy to format text for web and document creation. When it comes to distributing readable and printable content, converting Markdown to PDFs can be very helpful. This blog post will guide you through the essentials of creating practical and useful PDFs from your Markdown files.

Use Metadata to Improve PDF Properties

Metadata can be added to the Markdown to enhance the quality of the information in the PDF document. For example, the author, creation date, file size, keywords, etc.

Structure Your Markdown Document

To effectively create a good PDF from a Markdown string, the Markdown must be well-structured. Below are some Markdown structuring elements:

1. Headings

Markdown allows up to six levels of headings to make content hierarchically organized. These can be created using hash symbols (#).

e.g.

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

2. Paragraphs

To create paragraphs, the text must be written on different lines. To separate paragraphs properly, leave a blank line between them.

e.g. This is a standard paragraph.

‍

Paragraphs are blocks of text separated by blank lines.

3. Blockquotes

To emphasize a quote or a block of text, use the greater-than sign (>) to create a blockquote.

e.g. > This is a blockquote. It's used to highlight quoted text.

4. Lists

There are two types of lists: unordered and ordered. An unordered list can be created using a plus sign (+), a dash (-), or an asterisk (*). An ordered list can be created using numbers followed by a period.

e.g.

Unordered list:
- Item 1
- Item 2
- Item 3‍

Ordered list:
1. First
2. Second
3. Third

5. Codeblocks

Inline code must have one backtick (`) before and after it to be created. For code blocks, three backticks (```) are required before and after the block.

6. Horizontal Rules

A horizontal line can be created to separate content using either three dashes (---), three asterisks (***), or three underscores (_ _ _).

7. Links

To create a clickable hyperlink, place a call-to-action (CTA) or short description between square brackets [], followed by the link in parentheses ().

e.g. [Vist 0CodeKit](https://www.0codekit.com)

8. Images

To insert images, place an exclamation mark (!) before the alt text between square brackets [], followed by the link in parentheses ().

e.g. 

9. Tables

Tables can be created with the help of dashes (-) and pipes (|).

e.g.

| Column 1 | Column 2 |
|----------|----------|
| Data 1 | Data 2 |

10. Emphasis

Words can be emphasized by making the text bold or italic using underscores (_) or asterisks (*). To italicize text, place an underscore or asterisk before and after the text. To make text bold, place two underscores or asterisks before and after the text.

e.g. *This text is italicized.* / _This text is italicized._

**This text is bold.** / __This text is bold.__

11. Strikethrough

To strike through text, that is, to draw a horizontal line through the text, place two tildes (˜˜) before and after the text.

e.g. ~~This text is strikethrough.~~

Fine-Tune the Styling

Structure of a CSS Rule

• First, selectors are needed to target the HTML elements to which the style is to be applied.
  • Headings: h1, h2, h3, h4, h5, h6
  • Paragraphs: p
  • Blockquotes: blockquote
  • Lists: ul (unordered list), ol (ordered list), li (list items)
  • Code: pre (for block code), code (for inline code)
  • Horizontal Rules: hr
  • Links: a
  • Images: img
  • Tables: table, th (table heading), td (table data)
• Second, a declaration block is needed to contain all the CSS properties and values to be applied. Each declaration needs to be enclosed in curly braces {}. Also, each declaration must end with a semicolon (;).
• Third, properties are the part of the element that is to be styled. For example, the color, font size, etc.
• Fourth, the value determines the property's worth. For example, red, 16px, etc.

It would look something like this:

selector {
         property: value;
         property: value;
}

CSS Styling Adjustments

Color and Text Styling

• color: Set the color of the text.
• background-color: Define the background color of an element.
• font-family: Specify the font type.
• font-size: Adjust the size of the text.
• text-align: Align text (e.g., left, center, right).
• line-height: Set the space between lines of text.

Spacing and Layout

• margin: Control the space outside an element.
• padding: Control the space inside an element’s border.
• width and height: Define the dimensions of an element.
• border: Add borders, with control over width, style, and color.
• border-radius: Round the corners of an element.

List Styling

• list-style-type: Determine the type of list marker (e.g., disc, circle, square for unordered, decimal, lower-alpha for ordered).
• list-style-position: Set the position of list markers (inside, outside).

Table Styling

• border-collapse: Control the collapsing of table borders (collapse, separate).
• border-spacing: Set the space between table cells when borders are separated.
• vertical-align: Align content vertically within a cell.
• table-layout: Determine table layout algorithm (e.g., auto, fixed).