🔧

[Slidev]フロントマターを概説してみる

2022/12/20に公開

フロントマターとは?

フロントマターとは、各スライドの冒頭の---で囲われた部分のことです。スライドに関する各種設定を行うことができます。

フロントマターの設定項目

layout

スライドのレイアウトを設定します。どのようなレイアウトがあるかはテーマによって異なります。詳しくは各テーマのページをご参照ください。

なお、デフォルトのテーマのレイアウトについては、以下のページで紹介しています。

title

スライドのタイトルを設定します。Webブラウザ上のタブに反映されます。titleが指定されていない場合は、最初のヘッダーがtitleとして設定されます。

title: ''

titleTemplate

タイトルのテンプレートとなります。%sにtitleに設定した文字列が入ります。デフォルトは%s - Slidevです。

titleTemplate: '%s - Slidev'

theme

スライドで使用するテーマを設定します。テーマは自分で作成したり、テーマギャラリーから選択することができます。デフォルトはdefaultです。

theme: default

addons

使用するアドオンを設定します。デフォルトは[]です。

addons: []

remoteAssets

リモートアセットのダウンロードに関する設定です。ダウンロードする場合にはtrueを、しない場合にはfalseを設定します。また、開発環境でのみ有効にする場合にはdev、ビルド時のみ有効にする場合にはbuildと設定することも可能です。デフォルトはfalseです。

remoteAssets: false

monaco

コードブロックにおけるMonacoエディタの使用に関する設定です。Monacoエディタを使用する場合には　trueを、しない場合にはfalseを設定します。また、開発環境でのみ有効にする場合にはdev、ビルド時のみ有効にする場合にはbuildと設定することも可能です。デフォルトはdevです。

monaco: dev

download

SPAにビルドした際に、ダウンロードボタンを表示するかしないかを設定します。trueにするとダウンロードボタンが表示されるようになります。デフォルトはfalseです。

download: false

codeCopy

コードブロックでコピーボタンを表示するかしないかを設定します。trueにするとコピーボタンが表示されるようになります。デフォルトはtrueです。

codeCopy: true

info

SPAにビルドした際に、Informationとして説明文を表示することが可能です。マークダウンで記述することが可能です。デフォルトではfalseになっています。

info: false

highlighter

コードブロックでのシンタックスハイライトの設定です。Slidevではシンタックスハイライトとして、PrismとShikiを使うことができます。デフォルトではprismとなっています。

highlighter: prism

lineNumbers

コードブロックで行番号を表示するかしないかを設定します。trueを設定すると、行番号を表示します。デフォルトではfalseになっています。

lineNumbers: false

colorSchema

スライドの配色に関する設定です。dark、light、all、autoから選択可能です。デフォルトではautoが設定されています。

colorSchema: auto

routerMode

SlidevはVueを使って作成されています。routerModeではVue Routerのモード設定を行います。hashもしくはhistoryが選択可能です。デフォルトではhistoryとなっています。

routerMode: history

hashモードとhistoryモードの違いについては、以下の記事をご参照ください。

aspectRatio

スライドのアスペクト比を設定します。16/9や1:1のように設定します。デフォルトでは16/9となっています。

aspectRatio: 16/9

canvasWidth

スライドの幅を設定します。単位はpxです。デフォルトでは980となっています。

canvasWidth: 980

exportFilename

スライドをエクスポートした際のファイル名を設定します。拡張子は自動的に追加されます。デフォルトではslides-export.pdf（あるいは.png）というファイル名でエクスポートされます。

exportFilename: ''

selectable

スライド中のテキストを選択できるようにするかしないかを設定します。trueを設定すると選択できるようになります。デフォルトではtrueとなっています。

selectable: true

themeConfig

テーマのカスタマイズをします。デフォルトでは{}となっており、何も設定されていません。
なお、どのようなオプションがあるかは各テーマのドキュメントをご参照ください。

Seriphテーマのカスタマイズ例:

theme: seriph
themeConfig:
  primary: '#5d8392'

fonts

スライドのフォントに関する設定です。デフォルトでは{}となっており、何も設定されていません。
なお、フォントはGoogle Fontsから自動的にインポートしてくれます。

fontsの設定例:

fonts:
  sans: 'Robot'
  serif: 'Robot Slab'
  mono: 'Fira Code'

favicon

Webブラウザのタブに表示されるアイコンを設定します。デフォルトはSlidevのアイコンになっています。(以下のURL)

favicon: https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png

drawings

スライドに対して行った描画に関する設定をします。デフォルトでは{}となっており、何も設定されていません。詳しくは以下のページをご参照ください。

drawingsの設定例:

drawings: 
  persist: true

plantUmlServer

ダイアグラムをレンダリングする際に使用するPlantUMLサーバのURLを指定します。デフォルトではhttps://www.plantuml.com/plantumlとなっています。

plantUmlServer: https://www.plantuml.com/plantuml

record

スライドのレコーディングに関する設定を行います。レコーディングを可能にする場合はtrueを設定します。また、開発環境でのみ有効にする場合にはdev、ビルド時のみ有効にする場合にはbuildと設定することも可能です。デフォルトはdevです。

record: dev

remote?

インバウンドリクエストにサーバを公開する際に設定します。remote?に設定した文字列がプレゼンターモードにアクセスする際のパスワードとして設定されます。デフォルトではfalseになっています。

remote?: false

css

使用するCSSエンジンを設定します。windicssとunocssから選択できます。ただしUnoCSSは2022/12/16現在試行中です。デフォルトはwindicssとなっています。

css: windicss

備考

permalink

Jekyllでは定義済みグローバル変数としてpermalinkがありますが、Slidevでは無効になっているようです。

published

また、Jekyllでは定義済みグローバル変数としてpublishedという変数もありますが、こちらもSlidevでは無効になっているようです。

参考サイト

フロントマターの設定 | Slidev

type definitions
Front Matter | Jekyll