How to Create Custom-Styled PDFs from Markdown and CSS

Transform Markdown into custom PDFs with CSS! Learn structuring, styling, and metadata tips for creating polished, professional documents efficiently.

Published
July 8, 2025

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. ![Alt text](path/to/image.jpg)

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).

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.