Kolibry

Customizations

Kolibry is fully customizable, from styling to tooling configurations. It allows you to configure the tools underneath (Vite, UnoCSS, Monaco, etc.)

Frontmatter Configures

You can configure Kolibry in the frontmatter of your first slide, the following shows the default value for each option.

---
# theme id or package name
# Learn more: https://kolibry.dev/themes/use.html
theme: 'default'
# title of your slide, will auto infer from the first header if not specified
title: 'Kolibry'
# titleTemplate for the webpage, `%s` will be replaced by the page's title
titleTemplate: '%s - Kolibry'
# information for your slides, can be a markdown string.
info: false
# author field for exported PDF
author: Your Name Here
# keywords field for exported PDF, comma-delimited.
keywords: keyword1,keyword2

# enable presenter mode, can be boolean, 'dev' or 'build'
presenter: true
# enabled pdf downloading in SPA build, can also be a custom url
download: false
# filename of the export file
exportFilename: 'kolibry-exported'
# export options
# use export CLI options in camelCase format
# Learn more: https://kolibry.dev/guide/exporting.html
export:
  format: pdf
  timeout: 30000
  dark: false
  withClicks: false
  withToc: false
# syntax highlighter, can be 'prism' or 'shiki'
highlighter: 'prism'
# show line numbers in code blocks
lineNumbers: false
# enable monaco editor, can be boolean, 'dev' or 'build'
monaco: 'dev'
# download remote assets in local using vite-plugin-remote-assets, can be boolean, 'dev' or 'build'
remoteAssets: false
# controls whether texts in slides are selectable
selectable: true
# enable slide recording, can be boolean, 'dev' or 'build'
record: 'dev'

# force color schema for the slides, can be 'auto', 'light', or 'dark'
colorSchema: 'auto'
# router mode for vue-router, can be "history" or "hash"
routerMode: 'history'
# aspect ratio for the slides
aspectRatio: '16/9'
# real width of the canvas, unit in px
canvasWidth: 980
# used for theme customization, will inject root styles as `--kolibry-theme-x` for attribute `x`
themeConfig:
  primary: '#5d8392'

# favicon, can be a local file path or URL
favicon: 'https://cdn.jsdelivr.net/gh/kolibryjs/kolibry/assets/favicon.png'
# URL of PlantUML server used to render diagrams
plantUmlServer: 'https://www.plantuml.com/plantuml'
# fonts will be auto imported from Google fonts
# Learn more: https://kolibry.dev/custom/fonts
fonts:
  sans: 'Roboto'
  serif: 'Roboto Slab'
  mono: 'Fira Code'

# default frontmatter applies to all slides
defaults:
  layout: 'default'
  # ...

# drawing options
# Learn more: https://kolibry.dev/guide/drawing.html
drawings:
  enabled: true
  persist: false
  presenterOnly: false
  syncAll: true

# HTML tag attributes
htmlAttrs:
  dir: 'ltr'
  lang: 'en'
---

Check out the type definitions for more options.

Per slide configuration

In addition, every slide accepts the following configuration in the Frontmatter block:

  • clicks (number): Custom clicks count (learn more here).
  • disabled (boolean): Completely disable the slide.
  • hide (boolean): Hide sub-slides when using src (learn more here).
  • hideInToc (boolean): Hide the slide for the <Toc> components (learn more here).
  • layout (string): Defines the layout component applied to the slide (learn more here and here).
  • level (number): Override the title level for the <Title> and <Toc> components (only if title has also been declared, learn more here).
  • preload (boolean, default true): preload the next slide (learn more here).
  • routeAlias (string): create a route alias that can be used in the URL or with the <Link> component (learn more here).
  • src (string): Includes a markdown file (learn more here).
  • title (string): Override the title for the <Title> and <Toc> components (learn more here).
  • transition (string | TransitionProps): Defines the transition between the slide and the next one (learn more here).

Directory Structure

Kolibry uses directory structure conventions to minimalize the configuration surface and make extensions in functionality flexible and intuitive.

Refer to the Directory Structure section.

Config Tools