Broken vertical space when printing to HTML

[cvogt729]

This is a copy of issue mjbvz/vscode-github-markdown-preview-style#143.

I use the Markdown All in One extension primarily to print my Markdown documents to HTML. In version 2.0.4 of Markdown Preview Github Styling, all my documents print to HTML as expected as shown in the screenshot below.

However, version 2.1.0 of Markdown Preview Github Styling seems to have broken this. The same sample document now prints as:

The raw Markdown of this sample document is:

# Wikipedia - Ring

In mathematics, rings are algebraic structures that generalize fields: multiplication need not be commutative and multiplicative inverses need not exist. Informally, a ring is a set equipped with two binary operations satisfying properties analogous to those of addition and multiplication of integers. Ring elements may be numbers such as integers or complex numbers, but they may also be non-numerical objects such as polynomials, square matrices, functions, and power series.

Formally, a ring is a set endowed with two binary operations called addition and multiplication such that the ring is an abelian group with respect to the addition operator, and the multiplication operator is associative, is distributive over the addition operation, and has a multiplicative identity element. (Some authors define rings without requiring a multiplicative identity and instead call the structure defined above a ring with identity. See § Variations on the definition.)

Whether a ring is commutative has profound implications on its behavior. Commutative algebra, the theory of commutative rings, is a major branch of ring theory. Its development has been greatly influenced by problems and ideas of algebraic number theory and algebraic geometry. The simplest commutative rings are those that admit division by non-zero elements; such rings are called fields.

For now, my solution is to rollback the Markdown Preview Github Styling extension to version 2.0.4. The problem may be with how the Markdown All in One extension prints to HTML, in that the latest CSS variables are not supported: mjbvz/vscode-github-markdown-preview-style#143 (comment). In particular, the CSS variable --base-size-16 appears to be undefined.

Other Information

I use the following Markdown extensions in vscode:

• Markdown Preview Github Styling
• Markdown All in One
• Markdown Checkboxes
• Markdown Emoji
• Markdown Footnotes
• Markdown yaml Preamble

My settings relevant to Markdown are:

{
  "markdown.extension.print.absoluteImgPath": false,
  "markdown.extension.print.onFileSave": true,
  "markdown-preview-github-styles.colorTheme": "dark",
  "markdown.extension.print.theme": "dark",
  "markdown.extension.math.enabled": false
}

[Andy-Dihong-Luo]

A quick workaround is to add the following lines to the custom markdown CSS file in VS Code. For some reason, these variables are not well defined when printing to HTML files. Worked well on my machine.

.github-markdown-body {
    --base-size-4: 0.25rem;
    --base-size-8: 0.5rem;
    --base-size-16: 1rem;
    --base-size-24: 1.5rem;
    --base-size-40: 2.5rem;
    --base-text-weight-normal: 400;
    --base-text-weight-medium: 500;
    --base-text-weight-semibold: 600;
    --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo,
        Consolas, Liberation Mono, monospace;
}