ThemeSet

Source: theme_set.js:36

Marpit theme set class.

Constructor

Create a ThemeSet instance.

Parameters

• opts (Object, optional)
  • opts.cssNesting (boolean, optional, default: true) — Enable CSS nesting support.

Instance Methods

add(css: string): Theme

Add theme CSS from string.

Parameters

• css (string) — The theme CSS string.

Returns

• Theme — A created Theme instance.

Throws

• Will throw an error if the theme name is not specified by @theme metadata.

addTheme(theme: Theme)

Add theme instance.

Parameters

• theme (Theme) — The theme instance.

Throws

• Will throw an error if the theme name is not specified.

clear()

Removes all themes from a themeSet object.

delete(name: string): boolean

Remove a specific named theme from a themeSet object.

Parameters

• name (string) — The theme name to delete.

Returns

• boolean — Returns true if a theme in current ThemeSet existed and has been removed, or false if the theme does not exist.

get(name: string, fallback?: boolean): Theme | undefined

Returns a specific named theme.

Parameters

• name (string) — The theme name to get.
• fallback (boolean, optional, default: false) — If true, return instance's default theme or scaffold theme when specified theme cannot find.

Returns

• Theme | undefined — Returns specified or fallback theme, or undefined if fallback is false and the specified theme has not existed.

getThemeMeta( theme: string | Theme, meta: string, ): string | Array.<string> | undefined

Returns value(s) of specified metadata from a theme. It considers @import and @import-theme rules in getting meta value. On the other hand, the default theme specified by the instance is not considered.

To support metadata with array type, it will merge into a flatten array when the all of got valid values that includes imported themes are array.

Parameters

• theme (string | Theme) — The theme name or instance.
• meta (string) — The meta name to get.

Returns

• string | Array.<string> | undefined

getThemeProp(theme: string | Theme, prop: string): *

Returns the value of specified property name from a theme. It considers @import and @import-theme rules in getting value.

It will fallback the reference object into the instance's default theme or scaffold theme when the specified theme is undefined.

Parameters

• theme (string | Theme) — The theme name or instance.
• prop (string) — The property name to get.

Returns

• *

has(name: string): boolean

Returns a boolean indicating whether a specific named theme exists or not.

Parameters

• name (string) — The theme name.

Returns

• boolean — Returns true if a specific named theme exists, otherwise false.

pack(name: string, opts?: Object): string

Convert registered theme CSS into usable in the rendered markdown by Marpit#render.

This method is designed for internal use by Marpit class. Use Marpit#render instead unless there is some particular reason.

Parameters

• name (string) — The theme name. It will use the instance's default theme or scaffold theme when a specific named theme does not exist.
• opts (Object, optional) — The option object passed by Marpit#render.
  • opts.after (string, optional) — A CSS string to append into after theme.
  • opts.before (string, optional) — A CSS string to prepend into before theme.
  • opts.containers (Array.<Element>, optional) — Container elements wrapping whole slide deck.
  • opts.containerQuery (boolean | string | Array.<string>, optional) — Enable CSS container query by setting true. You can also specify the name of container for CSS container query used by the @container at-rule in child elements.
  • opts.printable (boolean, optional) — Make style printable to PDF.
  • opts.inlineSVG (Marpit~InlineSVGOptions, optional) — Apply a hierarchy of inline SVG to CSS selector by setting true. (Experimental)

Returns

• string — The converted CSS string.

themes(): Iterator.<Theme>

Returns a Iterator object that contains registered themes to current instance.

Returns

• Iterator.<Theme>

Instance Fields

default: Theme | undefined

An instance of default theme.

While running ThemeSet#pack, ThemeSet will use this theme when the definition of theme directive or the theme with specified name is not found.

By default, Marpit does not provide default theme (undefined).

metaType: Object

The default type settings for theme metadata added by ThemeSet#add.

A key of object is the name of metadata and a value is the type which of String and Array. You have to set Array if the theme allows multi-time definitions in same meta key.

/**
 * @theme example
 * @foo Single value
 * @foo allows only one string
 * @bar Multiple value 1
 * @bar Multiple value 2
 * @bar Multiple value 3
 * ...

const themeSet = new ThemeSet()

themeSet.metaType = {
  foo: String,
  bar: Array,
}

themeSet.add(css)

console.log(themeSet.getThemeMeta('example', 'foo'))
// => 'allows only one string'

console.log(themeSet.getThemeMeta('example', 'bar'))
// => ['Multiple value 1', 'Multiple value 2', 'Multiple value 3']

cssNesting: boolean

A boolean value indicating whether the theme set is enabling CSS nesting or not.

size: number

Return the number of themes.