Markdown PDF Styles

Stylesheets for VSCode Markdown PDF.

• Use preset styles:
  • Classic: Report, Letter, Resume
  • Academic: IEEE, APA
  • Others: Cheatsheet
• Or customize using barebone styles:
  • Font
  • Text
  • Indent
  • Spacing
  • Column
  • Others
• Optional headers & footers:
  • Webpage
  • Homework

Usage

To use the style, modify VSCode user settings.json according to the style below. A root project directory may also have .vscode/settings.json for project-wide preferences, which will override global settings.

Preset styles

Report

Replace variable $TITLE to report's title.

::: attributions
Urna Semper<br>Instructor’s Name<br>March 13, 2023
:::

::: title
Geology 101 Report
:::

::: subtitle
Sed et lacus quis enim mattis nonummy
:::

Lorem ipsum...

Letter

::: sender
Sender Name
:::

::: contact
1234 Main Street<br>Anytown, State ZIP<br>123-456-7890<br>no_reply@example.com
:::

29 April 2023

::: recipient
Recipient Name<br>4321 First Street<br>Anytown, State ZIP
:::

Lorem ipsum...

Resume

::: name
Your Name
:::

::: job
Job Title
:::

# Profile

Lorem ipsum...

::: contact
1234 Main Street Anytown, State ZIP&emsp;123-456-7890<br>no_reply@example.com&emsp;@social_media
:::

IEEE

IEEE style is an academic paper format with double column and serif font.

::: title
Paper Title* (use style: *paper title*)
:::

::: authors
Given Name Surname<br>
*dept. name of organization (of Affiliation)*<br>
City, Country<br>
email address or ORCID
:::

:::: content
Lorem ipsum...

::: references
1.  Awesome article
1.  Awesome website
:::
::::

APA

APA style is an academic paper format with sans serif font.

Replace variable $TITLE to article's title.

::: title
Paper Title
:::

::: subtitle
Author Name<br>
Department of Psychology, The George Washington University<br>
Instructor Name<br>
:::

Lorem ipsum...

::: references
Awesome article

Awesome website
:::

Cheatsheet

Keep as many content as possible with mini everything.

Custom styles

Only pick at maximum one in each category.

Font

Sans	Serif

Font family stylesheets with Noto Sans/Serif and JetBrains Mono, the default is system fonts.

{
  "markdown-pdf.styles": [
    ".../markdown-pdf-styles/styles/font-sans.css",
    ".../markdown-pdf-styles/styles/font-serif.css",
  ],
}

Text

Small	Normal

Text and code size stylesheets, the default is around 12pt.

{
  "markdown-pdf.styles": [
    ".../markdown-pdf-styles/styles/text-small.css",
    ".../markdown-pdf-styles/styles/text-normal.css",
  ],
}

Indent

Quarter	Half

Paragrah indentation and justification stylesheets, there is no indent by default.

{
  "markdown-pdf.styles": [
    ".../markdown-pdf-styles/styles/indent-quarter.css",
    ".../markdown-pdf-styles/styles/indent-half.css",
  ],
}

Spacing

Single	Double

Line height stylesheets, the default is around one-half inch.

{
  "markdown-pdf.styles": [
    ".../markdown-pdf-styles/styles/spacing-single.css",
    ".../markdown-pdf-styles/styles/spacing-double.css",
  ],
}

Column

Two	Three	Four

Column splitting stylesheets, the default is full column.

{
  "markdown-pdf.styles": [
    ".../markdown-pdf-styles/styles/column-two.css",
    ".../markdown-pdf-styles/styles/column-three.css",
    ".../markdown-pdf-styles/styles/column-four.css",
  ],
}

Others

Reference

A hotfix to prevent sup and sub for affecting line height.

{
  "markdown-pdf.styles": [
    ".../markdown-pdf-styles/styles/reference.css",
  ],
}

Headers & footers

Template for header and footer needs to be embedded in the settings.

Webpage

Header	Footer

Replace variable $URL to webpage link, $TITLE with document title.

{
  "markdown-pdf.headerTemplate": "<div style='font-size: 7pt; margin-left: 1cm; margin-right: 1cm;'> <span>$URL</span> </div>",
  "markdown-pdf.footerTemplate": "<div style='font-size: 7pt; margin-left: 1cm;'> <span>$TITLE</span> </div> <div style='font-size: 7pt; margin-left: auto; margin-right: 1cm;'> <span class='pageNumber'></span> / <span class='totalPages'></span> </div>",
}

Homework

Header	Footer

Replace variable $SUBJECT to student credential, $IMAGE_BASE64 to school logo (10px height), $TITLE to document title.

{
  "markdown-pdf.headerTemplate": "<div style='font-size: 7pt; margin-left: 1cm;'> <span>$SUBJECT</span> </div> <div style='margin-left: auto; margin-right: 1cm;'> <img src='$IMAGE_BASE64'> </div>",
  "markdown-pdf.footerTemplate": "<div style='font-size: 7pt; margin-left: 1cm;'> <span>$TITLE</span> </div> <div style='font-size: 7pt; margin-left: auto; margin-right: 1cm;'> <span class='pageNumber'></span> / <span class='totalPages'></span> </div>",
}