How Templates Affect Rendering

Each template defines its own typographic system. The heading font, body font, code font, sizes, weights, and line heights all come from the template configuration. Google Fonts are loaded automatically based on the template's font selections.

• Heading font: Applied to H1 through H6. Can differ from body font.
• Body font: Applied to paragraphs, lists, blockquotes, and other body text.
• Code font: Applied to inline code and fenced code blocks.
• Heading scale: Each level (H1 through H6) has its own size multiplier.
• Line height: Body text typically uses 1.5 to 1.8 for comfortable reading.
• Font weights: Separate weight settings for headings and body text.

Every template includes a complete color set for both light and dark modes. The 16 color values (background, text, heading, accent, link, border, code background, code text, blockquote border/background/text, table border/header background/header text/alternating row, HR) are applied consistently to all Markdown elements.

Switching between light and dark mode changes only the color values. Typography, spacing, and element styles remain the same.

Templates support three distinct blockquote rendering styles:

Left Border

A colored vertical bar on the left side of the blockquote. The border color and width come from the template configuration. This is the most common style.

Background Fill

The blockquote receives a subtle background color with padding. No left border. The background color comes from the template's blockquote background value.

Italic with Border

Combines a left border with italic text styling. The blockquote text is rendered in italic, with a colored border on the left.

Templates control how table borders and backgrounds render:

Full Borders

Every cell has visible borders on all sides. Header row has a distinct background color.

Horizontal Lines

Only horizontal borders between rows. No vertical cell borders. Cleaner, more modern appearance.

Minimal

Borders only on the header row separator. Body rows have no visible borders, relying on alternating row colors for visual separation.

Templates can also toggle alternating row background colors (striping) for improved readability in data-heavy tables.

Four HR rendering styles are available:

• Thin: A single 1px line using the template's HR color.
• Thick: A bold line, typically 3px, for stronger visual separation.
• Dashed: A dashed line pattern for a lighter feel.
• Gradient: A gradient that fades from the HR color to transparent at both ends.

Template configuration controls multiple aspects of code block rendering:

• Background color and text color for the code container
• Border radius (corner rounding) from 0px to 16px
• Code font family (monospace font selection)
• Line number visibility toggle
• Inline code background and text color

• Image border radius: Controls corner rounding on images (0px to 24px).
• Link underline: Toggle whether links show an underline. When off, links are distinguished by color only.
• Link color: Distinct color for hyperlinks, with hover state.

Template colors are automatically applied to diagrams and charts:

• Mermaid diagrams: Template colors are injected via Mermaid's theme variables. Node fills, edge colors, text colors, and pie slice colors all adapt to the template.
• Graphviz diagrams: SVG CSS injection overrides default colors. Node fills are mixed from the template accent color, edges use the border color, and text uses the template text color.
• Chart.js charts: Chart colors are NOT automatically themed. You must specify colors explicitly in the chart JSON configuration using backgroundColor and borderColor.

Callouts retain their type-specific colors regardless of the template. Each of the 13 callout types (NOTE, TIP, IMPORTANT, WARNING, CAUTION, SUCCESS, BUG, EXAMPLE, QUESTION, TODO, QUOTE, ABSTRACT, FAILURE) has a fixed color associated with its type. Templates do not override callout colors, ensuring consistent visual meaning across all themes.

Every template includes print-specific CSS activated when a visitor prints a published page or saves it as PDF through the browser:

• The Unmarkdown badge is hidden automatically
• Navigation elements and interactive controls are removed
• Page breaks are inserted to avoid splitting headings from their content
• Code blocks and tables stay together on the same page where possible
• Background colors are simplified for printer-friendly output
• Link URLs are shown inline for print readability