Quarto 1.3 Pre-release Notes

Published

December 2, 2022

Custom HTML Article Layout Widths

Starting in Quarto v1.3, you may control the width of the sidebar, body, and margin columns of HTML page layouts using YAML or SCSS variables. The baseline width(s) that you provide will be used to calculate widths for the different responsives sizes and layouts using in HTML documents. To set these options in YAML, you may use:

format:
  html: 
    grid:
      sidebar-width: 300px
      body-width: 900px
      margin-width: 300px

Similarly, in a custom theme scss file, you may set variables like:

// The left hand sidebar
$grid-sidebar-width: 250px !default;

// The main body
$grid-body-width: 800px !default;

// The right hand margin bar
$grid-margin-width: 250px !default;

// The gutter that appears between the above columns
$grid-column-gutter-width: 1.5em !default;

Mermaid diagram theming

Quarto v1.3 updates Mermaid to version 9.2.2, and adds a number of theming options to diagram.

New default: mermaid follows Quarto’s theme

Starting in v1.3, Quarto will use the current theme’s colors for Mermaid diagrams by default. If you use Quarto’s bootswatch built-in themes (or a custom theme that uses the same SCSS variables), Mermaid diagrams in Quarto will automatically follow your project themes.

The SCSS variables used by the default Mermaid theme shipped with quarto, together with their default values, are:

$mermaid-bg-color: $body-bg;
$mermaid-edge-color: $secondary;
$mermaid-node-fg-color: $body-color;
$mermaid-fg-color: $body-color;
$mermaid-fg-color--lighter: $body-color-lighter;
$mermaid-fg-color--lightest: $body-color-lightest;
$mermaid-font-family: $font-family-sans-serif;
$mermaid-label-bg-color: $body-bg;
$mermaid-label-fg-color: $primary;
$mermaid-node-bg-color: $primary-transparent;
$mermaid-node-fg-color: $primary;

These have CSS variable counterparts that can also be overridden:

:root {
  --mermaid-bg-color: #{$mermaid-bg-color};
  --mermaid-edge-color: #{$mermaid-edge-color};
  --mermaid-node-fg-color: #{$mermaid-node-fg-color};
  --mermaid-fg-color: #{$mermaid-fg-color};
  --mermaid-fg-color--lighter: #{$mermaid-fg-color--lighter};
  --mermaid-fg-color--lightest: #{$mermaid-fg-color--lightest};
  --mermaid-font-family: #{$mermaid-font-family};
  --mermaid-label-bg-color: #{$mermaid-label-bg-color};
  --mermaid-label-fg-color: #{$mermaid-label-fg-color};
  --mermaid-node-bg-color: #{$mermaid-node-bg-color};
  --mermaid-node-fg-color: #{$mermaid-node-fg-color};
}

Mermaid built-in themes

If you want to use Mermaid’s own themes, you can do so by configuring the mermaid option in your YAML front matter:

html:
  mermaid:
    theme: forest

The available themes from mermaid are: default, dark, forest, and neutral.

kbd shortcode

The kbd shortcode can be used to describe keyboard shortcuts in documentation. On Javascript formats, it will attempt to detect the operating system of the format and show the correct shortcut. On print formats, it will print the keyboard shortcut information for all operating systems.

Minimal example:

To print, press {{< kbd Shift-Ctrl-P >}}. To open an existing new project, press {{< kbd mac=Shift-Command-O win=Shift-Control-O linux=Shift-Ctrl-L >}}.

PDF Rendering Impovements

SVG Figure Support

Starting in Quarto 1.3, we support rendering of PDF documents that include SVG files, automatically converting them to PDF images if rsvg-convert is available on the system path during rendering.

You can learn more about installing libsvg (which provides rsvg-convert), see https://wiki.gnome.org/Projects/LibRsvg. To install on specific platforms, follow the below instructions:

Remote Image Reference Rendering

Starting in Quarto 1.3, when rendering PDFs, Quarto will automatically fetch remote image references and properly embed them within the PDF.