Styling - Nemu

Styles are plain objects. set_style assigns a default style per role, and a block level style merges on top of its role style for that one block.

Roles

set_style takes a partial map from role to style. The roles are:

type StyleRole =
  | "heading" | "paragraph" | "code" | "formula" | "list"
  | "link" | "group" | "divider" | "note" | "table" | "chart";

type RoleStyles = Partial<Record<StyleRole, StyleProperties>>;

doc.set_style({
  heading: { font_family: "inter", color: "#111827" },
  paragraph: { font_family: "source-serif-4", font_size: 11.5, line_height: 1.6 },
  link: { color: "#2563eb" },
});

A block then overrides its role with style:

{ type: "paragraph", text: "Centered note.", style: { text_align: "center", color: "#6b7280" } }

Style properties

StyleProperties is a CSS like bag. The fields that matter most for documents:

ColorLike

Text color. Accepts a hex string or a Color. See Color.

ColorLike

Background fill. Accepts a hex string or a Color. See Color.

string

One of the bundled font names or a custom registered name. See Fonts and weights.

number

Font size in points.

"normal" | "bold" | number

Selects a real weight by instancing the variable font. Accepts a weight name or a number. See Fonts and weights.

string

The math font name for formulas. See Formulas.

number

Line height multiplier.

"left" | "center" | "right" | "justify"

Horizontal text alignment.

boolean

Opt string parts into markdown parsing. See Inline content.

number | string

Outer spacing. Also margin_top, margin_right, margin_bottom, and margin_left.

number | string

Inner spacing. Also padding_top, padding_right, padding_bottom, and padding_left.

number | string

Box width.

number | string

Box height.

interface StyleProperties {
  color?: ColorLike;
  background_color?: ColorLike;
  font_family?: string;
  font_size?: number;
  font_weight?: "normal" | "bold" | number;
  font?: string;
  line_height?: number;
  text_align?: "left" | "center" | "right" | "justify";
  text_markdown?: boolean;
  margin?: number | string;
  padding?: number | string;
  width?: number | string;
  height?: number | string;
}

color and background_color accept a hex string or a Color, so ColorLike = string | Color. See Color.

​Roles

​Style properties

Roles

Style properties