Transform Markdown into custom PDFs with CSS! Learn structuring, styling, and metadata tips for creating polished, professional documents efficiently.
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.
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.
To effectively create a good PDF from a Markdown string, the Markdown must be well-structured. Below are some Markdown structuring elements:
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
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.
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.
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
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.
A horizontal line can be created to separate content using either three dashes (---), three asterisks (***), or three underscores (_ _ _).
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)
To insert images, place an exclamation mark (!) before the alt text between square brackets [], followed by the link in parentheses ().
e.g. 
Tables can be created with the help of dashes (-) and pipes (|).
e.g.
| Column 1 | Column 2 |
|----------|----------|
| Data 1 | Data 2 |
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.__
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.~~
It would look something like this:
selector {
property: value;
property: value;
}
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.
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!
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.