カスタマイズ

Slidevは、スタイリングからツールの設定まで、フルカスタマイズが可能です。Slidevの配下にあるツール(ViteWindi CSSMonacoなど)を設定することが可能です。

フロントマターの設定

最初のスライドのフロントマターで、Slidevの設定をすることができます。以下に各オプションのデフォルト値を示しています。

---
# テーマのIDもしくはパッケージ名
theme: 'default'
# スライドのタイトル 指定されていない場合、最初のヘッダーから自動的に推測されます。
title: ''
# webページのタイトルテンプレート `%s`は各ページのタイトルで置き換えられます。
titleTemplate: '%s - Slidev'

# SPAビルドにおけるPDFダウンロードを有効化します。カスタムURLを使用することも可能です。 
download: true
# シンタックスハイライト 'prism'か'shiki'が選択可能です。
highlighter: 'prism'
# コードブロックに行番号を表示します。
lineNumbers: false
# Monacoエディタを有効化します。デフォルトでは開発環境のみ有効です。
monaco: 'dev'

# スライドのカラースキーマを変更します。'auto'、'light'または'dark'を指定可能です。
colorSchema: 'auto'
# vue-routerのためのrouterModeを指定します。"history"または"hash"が指定可能です。
routerMode: 'history'
# スライドのアスペクト比を指定します。
aspectRatio: '16/9'
# canvasの実際の横幅を指定します。単位はpxです。
canvasWidth: 980

# faviconにはローカルファイルのパスか、URLを使用できます。
favicon: 'https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png'
# フォントはGoogle Fontsから自動的にimportされます。
# 詳細: https://sli.dev/custom/fonts
fonts:
  sans: 'Roboto'
  serif: 'Roboto Slab'
  mono: 'Fira Code'

# デフォルトのフロントマターはすべてのスライドに適用されます。
defaults:
  layout: 'default'
  # ...

# スライドの情報をMarkdownで記述することができます。
info: |
  ## Slidev
  My first [Slidev](http://sli.dev/) presentations!
---

より詳しいオプションはtype definitionsを参照してください。

ディレクトリ構造

Slidevはディレクトリ構造の規約を利用して、設定を最小化し、機能の拡張を柔軟かつ直感的に行えるようにしています。

ディレクトリ構造のセクションを参照してください。

ツールを設定する