slidev-theme-gtlabo
学術発表・研究室ゼミ向けに設計された Slidev テーマ。引用管理、数式レンダリング、章構成プログレスバーを備える。 A Slidev theme built for academic and laboratory-style presentations — with citation management, LaTeX rendering, and a chapter/section progress header.
What it provides / 提供する機能
- 4 レイアウト —
cover,default,intro,end - 11 コンポーネント — 引用管理・数式表示・章ヘッダー・アラート・ハイライト等
- 章/節プログレス —
chapters構造を frontmatter に定義するだけで現在位置を自動描画 - BibTeX コンバータ —
dev/bib2slidev.ipynbによる BibTeX → frontmatter 変換 - UnoCSS 拡張 —
theme-color/text-mainカスタムトークン
01 Installation / インストール
Slidev 本体がインストールされた状態で、テーマを npm/pnpm からインストールします。Install the theme via your package manager alongside Slidev.
# npm
npm install slidev-theme-gtlabo
# pnpm
pnpm add slidev-theme-gtlabo
# yarn
yarn add slidev-theme-gtlabo
slides.md の frontmatter にテーマを指定します。Slidev を起動するとプロンプトで自動インストールを提案する挙動もあります。
---
theme: slidev-theme-gtlabo
---
MathText / EqRef 使用時に動的 import されます。
02 Quick Start / はじめの一枚
最小構成の slides.md 例です。cover → default → end の 3 枚を作ります。
---
theme: slidev-theme-gtlabo
meetingName: 研究室ゼミ #12
date: 2026-05-14
coverTitle:
first: 異常検知の近年動向
second: One-Class Neural Networks
author:
name: 山田 太郎
affiliation: XXX研究室
layout: cover
---
---
layout: default
---
<Header :chapter-data="{ title: 'はじめに' }" chapter="intro" />
本日の内容を紹介します。
---
layout: end
---
data/chapters.yaml / data/citations.yaml に切り出すだけでは Header / Citation / CitationListPage / EqRef から参照できません。
スライドプロジェクト側に setup/main.ts を作成し、defineAppSetup() で chapters / citations / equationRegistry を provide してください。
npm run dev で example.md のプレビュー、npm run export で PDF 出力、npm run screenshot で PNG 出力ができます。
03 Frontmatter Configuration / 全体設定
このテーマは $slidev.configs 経由で多数のキーを読み取ります。The theme consumes numerous top-level keys from the slides' head frontmatter.
- theme必ず
slidev-theme-gtlabo - meetingName発表の場の名前(表紙上部に表示) / Meeting title shown on cover
- date日付文字列(自由フォーマット) / Free-form date string
- coverTitle表紙タイトル。
{first, second}オブジェクト or 配列 / cover title as object or array of lines - titleSize
small/medium/large/xlarge/xxlarge(既定large) - author
{name, affiliation}。presenter 情報 / primary presenter - coAuthors
[{name, affiliation}, ...](最大 4 名表示) - chapters章/節の定義オブジェクト(§3.1)
- citations参考文献辞書(§3.2)
- citationStyle
numbered(既定)またはapa - thankYouMessageend レイアウトの副文(既定「ご清聴ありがとうございました」)
- contact
{email, twitter}。end レイアウトに表示
setup/main.ts が必要なケース:
chapters と citations を frontmatter に直接書く場合はそのまま動作します。
一方で data/chapters.yaml / data/citations.yaml に外出ししてテーマコンポーネント全体で共有したい場合は、setup/main.ts で import と provide() を行ってください。
my-slides/
├─ slides.md
├─ data/
│ ├─ chapters.yaml
│ └─ citations.yaml
├─ setup/
│ └─ main.ts # ← YAML を provide する
├─ components/
└─ package.json
import { defineAppSetup } from '@slidev/types'
import { reactive } from 'vue'
import chapters from '../data/chapters.yaml'
import citations from '../data/citations.yaml'
export default defineAppSetup(({ app }) => {
// グローバルプロパティとして注入
app.config.globalProperties.$chapters = chapters
app.config.globalProperties.$citations = citations
// provide/inject 用にも提供
app.provide('chapters', chapters)
app.provide('citations', citations)
// 数式レジストリ
const equationRegistry = reactive({
ids: [] as string[],
elements: {} as Record<string, Element>,
register(id: string, el: Element) {
if (!this.ids.includes(id)) this.ids.push(id)
this.elements[id] = el
},
unregister(id: string) {
this.ids = this.ids.filter(i => i !== id)
delete this.elements[id]
},
getNumber(id: string): number | null {
if (!(id in this.elements)) return null
const sorted = [...this.ids].sort((a, b) => {
const elA = this.elements[a]
const elB = this.elements[b]
if (!elA || !elB) return 0
const pos = elA.compareDocumentPosition(elB)
return pos & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
})
const index = sorted.indexOf(id)
return index >= 0 ? index + 1 : null
},
})
app.provide('equationRegistry', equationRegistry)
})
3.1 chapters / 章・節構造
進捗バー (Header) と目次 (SectionDivider) が共有するデータ構造です。ref キーは参考文献ページ専用で進捗バーから除外されます。ap で始まるキーは 付録(Appendix) として扱われ、通常章とは別のグループで描画されます。
slides.md の frontmatter に直接書くのではなく、スライドプロジェクト直下に data/chapters.yaml を作成してそちらに記述することを推奨します(data/citations.yaml と同様)。
slides.md の frontmatter では chapters: !include data/chapters.yaml のように外部参照するか、ビルド前に結合しつつ、setup/main.ts で chapters を import して app.provide('chapters', chapters) を行ってください。
章立ての改訂と本文編集の差分を分離でき、複数スライド間で章テンプレートを使い回すのも容易になります。Keep the chapter structure in
data/chapters.yaml at the root of your slide project rather than inline in the frontmatter, and provide it from setup/main.ts so the theme components can consume a shared source of truth.
my-slides/
├─ slides.md
├─ data/
│ ├─ chapters.yaml # ← 章・節構造はここに
│ └─ citations.yaml # ← 参考文献はここに
├─ setup/
│ └─ main.ts # ← chapters / citations を provide
├─ components/
└─ package.json
以下は data/chapters.yaml(もしくは frontmatter に直接書いた場合の chapters: 以下)の例です。
chapters:
intro:
title: はじめに
sections:
overview:
title: 概要
objectives:
title: 目的
method:
title: 提案手法
sections:
approach: { title: アプローチ }
impl: { title: 実装 }
ap1: # 付録
title: 数式の導出
sections:
lemma: { title: 補題 }
ref: # 参考文献ページ専用
title: 参考文献
ref→ 参考文献。Headerの進捗バーから除外される。ap/ap1/apA… → 付録。接頭辞apで自動判定。- それ以外 → 通常章。定義順でインデックスが振られる。
3.2 citations / 参考文献
辞書形式で定義します。キーが <Citation id="…"/> から参照される ID、値が書誌情報オブジェクトです。
slides.md の frontmatter に直接書くのではなく、スライドプロジェクト直下に data/citations.yaml を作成してそちらに記述することを推奨します。
slides.md の frontmatter では citations: !include data/citations.yaml のように外部参照するか、ビルド前に結合しつつ、setup/main.ts で citations を import して app.provide('citations', citations) を行ってください。
これにより bib2slidev で生成した YAML をそのまま貼れて、スライド本体の差分と参考文献の差分を分離できます。Put your bibliography in
data/citations.yaml at the root of your slide project rather than inline in the frontmatter, and provide it from setup/main.ts so citations resolve consistently across the deck.
my-slides/
├─ slides.md
├─ data/
│ └─ citations.yaml # ← 参考文献はここに集約
├─ setup/
│ └─ main.ts # ← citations と equationRegistry を provide
├─ components/
└─ package.json
smith2023:
author: "Smith, J. and Lee, H."
first_author: "Smith"
title: "Research on AI"
journal: "Journal of AI"
year: "2023"
chalapathy2019:
author: "Chalapathy, R. et al."
first_author: "Chalapathy"
title: "Anomaly Detection using One-Class Neural Networks"
journal: "arXiv preprint"
year: "2019"
url: "https://arxiv.org/abs/1802.06360"
次に示すのはフロントマターに直接書いた場合の形(等価)です。data/citations.yaml に切り出した場合も、キーと書誌フィールドの構造は全く同じです。
citations:
smith2023:
author: "Smith, J. and Lee, H."
first_author: "Smith" # APA 表示で使用
title: "Research on AI"
journal: "Journal of AI"
volume: "42"
number: "3"
pages: "112--130"
year: "2023"
doi: "10.1000/example"
url: "https://example.org"
issn: "1234-5678"
publisher: "Academic Press"
サポートされる書誌フィールド
| Field | Type | 用途 / Used by |
|---|---|---|
author | string | 著者(" and " 区切り推奨) |
first_author | string | APA スタイル時のインライン表示 |
title | string | 論文/記事タイトル |
journal | string | ジャーナル名 |
volume / number / pages | string | 巻号ページ |
year | string | 発行年 |
publisher | string | 出版社 |
doi | string | DOI(優先してリンク化) |
url | string | URL(doi 未指定時にリンク化) |
issn | string | ISSN 表記 |
3.3 表紙/著者情報の設定
meetingName: 情報処理学会 全国大会
date: 2026.05.14
titleSize: large
coverTitle:
first: 異常検知における
second: One-Class Neural Networks
# あるいは配列で複数行
# coverTitle:
# - "異常検知における"
# - "One-Class Neural Networks"
author:
name: 山田 太郎
affiliation: XXX研究室
coAuthors:
- { name: 佐藤 花子, affiliation: XXX研究室 }
- { name: 鈴木 次郎, affiliation: XXX研究室 }
contact:
email: yamada@example.ac.jp
twitter: @yamada
thankYouMessage: ご清聴ありがとうございました
04 Layouts / レイアウト
---\nlayout: xxx\n--- で各スライドに指定します。Specify each slide's layout via frontmatter.
cover Layout
プレゼンテーションの表紙。meetingName, date, coverTitle, author, coAuthors を自動で組版します。Swiss Style のグリッドと非対称なアクセント、マウント後のアニメーションが入ります。
default Layout
通常スライド用。bg-white 白背景、text-main カラー、Flex 縦並び、text-xl 基準。
Plain white slide — the workhorse layout, with only base spacing and typography applied.
---
layout: default
---
<Header :chapter-data="{ title: '提案手法' }" chapter="method" />
## 本文
- 箇条書き
- もう一つ
intro Layout
中央に大きな太字を配置するだけのシンプルレイアウト。章の導入や一言の引用に便利。
end Layout
「THANK YOU FOR LISTENING」を中央大見出しで出し、thankYouMessage, contact.email, contact.twitter を表示。背景には円/四角/ドットのゆっくりしたアニメーションが周期的に動きます。
05 Components / コンポーネント
Slidev のグローバルコンポーネント解決により、テンプレート内で追加 import なしで使用できます。
Header
各スライドのヘッダー部に配置し、章プログレスバー・現在位置・ページカウンターを描画します。Place this near the top of each content slide for a chapter/section progress bar and page counter.
Props
| Name | Type | Default | Description |
|---|---|---|---|
chapteropt | String | — | 現在の章のキー。chapters 定義のキーと一致させる |
chapterDataopt | Object | — | 章情報を直接渡す({title})。chapter より優先 |
currentSectionopt | String | — | 現在の節のキー。指定するとそのタイトルを表示し、該当セグメントを青色に |
currentChapteropt | String | null | chapter のエイリアス(現在位置のみ示したい時) |
Usage
<!-- 章ヘッダー(節なし) -->
<Header :chapter-data="{ title: 'はじめに' }" chapter="intro" />
<!-- 節ヘッダー(節タイトル表示) -->
<Header
chapter="method"
current-section="approach" />
adjustedCurrentPage = currentPage − 1。
Appendix (ap*) にいる時はバーも Appendix 章だけの一覧に切り替わります。ref ページは常に「完了」扱い。
SectionTitle
左側のカラーバーと巨大タイトル。スライド内の大見出しに使います。
提案手法
Props
| Name | Type | Default | Description |
|---|---|---|---|
titleopt | String | — | タイトル文字列。スロット使用時は無視 |
coloropt | String | sky-800 | Tailwind/UnoCSS カラー名 または 16進色 |
<SectionTitle title="提案手法" />
<SectionTitle color="indigo-700">スロットも可</SectionTitle>
<SectionTitle title="カスタム色" color="#db2777" />
SubSectionTitle
左に lucide-chevron-right アイコンを伴う中見出し。
2.1 モデル構造
| Name | Type | Default | Description |
|---|---|---|---|
titlereq | String | — | タイトル文字列 |
coloropt | String | sky-700 | アイコン色(Tailwind or HEX) |
SectionDivider
章の切り替わりで使う目次(TOC)ページ全体。chapters 定義から全章を描画し、nextChapter で指定した章を "NEXT" バッジ付きで強調します。Appendix 章が nextChapter の場合は APPENDIX 用の目次に切り替わります。
Props
| Name | Type | Default | Description |
|---|---|---|---|
nextChapterreq | String | — | 次に入る章のキー。ap* を渡すと Appendix 目次モード |
currentChapteropt | String | — | 進捗表示用の現在章キー |
sizeopt | 'xs'|'sm'|'md'|'lg'|'xl' | md | 列数とタイポグラフィの一括制御 |
Size matrix / 密度表
| size | columns | 章番号 | 章タイトル | section |
|---|---|---|---|---|
xs | 4 | text-2xl | text-[11px] | text-[9px] |
sm | 3 | text-3xl | text-xs | text-[10px] |
md | 2 | text-6xl | text-2xl | text-lg |
lg | 2 | text-7xl | text-xl | text-base |
xl | 1 | text-8xl | text-3xl | text-xl |
<SectionDivider next-chapter="method" size="md" />
<SectionDivider next-chapter="ap1" /> <!-- Appendix -->
Citation
インライン引用を描画します。citationStyle が numbered(既定)なら [1]、apa なら (Smith, 2023) 形式。ホバー時に全書誌情報をツールチップ表示し、現在ページの引用一覧は window.pageCitations に登録されます。
この手法は[1]で提案され、[2]で改良されました。
| Name | Type | Default | Description |
|---|---|---|---|
idreq | String | — | citations 辞書のキー |
この手法は<Citation id="smith2023" />で提案されました。
CitationListPage
参考文献一覧ページを生成。Header を自動で chapter="ref" として描画し、全エントリを学術スタイルで列挙します。
| Name | Type | Default | Description |
|---|---|---|---|
styleopt | 'academic'|'ieee'|'apa' | academic | 表示スタイル |
sortByopt | 'frontmatter'|'key'|'author'|'year' | frontmatter | 並び順。year は降順(新しい順) |
sizeopt | 'xs'|'sm'|'md'|'lg'|'xl'|'2xl' | md | 文字サイズ |
<CitationListPage />
<CitationListPage sort-by="year" size="lg" />
MathText
テキスト中の LaTeX 数式を KaTeX でレンダリングする強力なコンポーネント。インライン $...$ / \(...\)、ブロック $$...$$ / \[...\]、\begin{align} 等の環境、および基本 Markdown(**bold**, *em*, `code`, [link](url), 見出し, リスト, 引用, 水平線)をサポートします。
| Name | Type | Default | Description |
|---|---|---|---|
textopt | String | '' | 表示テキスト。スロット使用時は無視 |
containerTagopt | String | span | コンテナの HTML タグ(p, div など) |
containerClassopt | String | '' | コンテナに追加するクラス |
inlineMathClassopt | String | '' | インライン数式要素に追加するクラス |
blockMathClassopt | String | '' | ブロック数式要素に追加するクラス |
textClassopt | String | '' | テキスト部分に追加するクラス |
simpleopt | Boolean | false | KaTeX を使わず簡易スタイルのみ(軽量モード) |
disableMarkdownopt | Boolean | false | Markdown 処理を無効化 |
customDelimitersopt | Array | null | 数式の区切り文字定義を上書き |
eqopt | String | null | 数式番号 ID。指定すると EqRef から参照可能に |
eqPaddingopt | String | 2.5em | 数式番号の右余白 |
Supported delimiters
| Syntax | Type | Priority |
|---|---|---|
\begin{align}...\end{align}(align, equation, gather, multline, split 他) | block | 0 (highest) |
$$...$$ | block | 1 |
$...$ | inline | 2 |
\(...\) | inline | 3 |
\[...\] | block | 4 |
Built-in KaTeX macros
\R → ℝ, \N → ℕ, \Z → ℤ, \Q → ℚ, \C → ℂ
<MathText
text="損失関数は $L = \frac{1}{n}\sum_{i=1}^{n}(y_i - \hat{y_i})^2$ です。"
container-tag="p" />
<!-- 数式番号を振って EqRef から参照 -->
<MathText text="$$f(x) = wx + b$$" eq="linear" />
ここで式 <EqRef id="linear" /> は線形モデルを表します。
:simple="true" で KaTeX 読み込みをスキップし、青背景の等幅テキストとして表示されます。
ビルド時間短縮や低スペック PC での動作向け。
EqRef
MathText で eq プロパティを指定した数式を参照。(番号) 形式でリンク風に表示します。
式 (1) により、線形モデルが定義されます。
| Name | Type | Default | Description |
|---|---|---|---|
idreq | String | — | 対応する <MathText eq="..."/> の ID |
inject('equationRegistry') による番号管理。MathText が register() / unregister() を呼び出し、EqRef は getNumber() で参照します。Equation numbering is managed by a shared registry injected into both components.
AlertBox
左ボーダー付きの注意/情報ボックス。5 種の variant に応じて色・アイコンが変化します。
| Name | Type | Default | Description |
|---|---|---|---|
variantopt | 'warning'|'info'|'success'|'error'|'result' | warning | 種類。色とアイコンが切り替わる |
Variant chart
| variant | アイコン(Lucide) | 枠線 | 背景 |
|---|---|---|---|
warning | frown | slate-600 | slate-50 |
info | lightbulb | indigo-600 | slate-50 → white |
success | circle-check | green-600 | green-50 |
error | circle-x | red-600 | red-50 |
result | search-check | indigo-600 | slate-50 → white |
<AlertBox variant="info">本研究では〜を提案する。</AlertBox>
<AlertBox variant="result">精度が 20% 向上した。</AlertBox>
<!-- アイコンを独自に差し替え -->
<AlertBox variant="success">
<template #icon><lucide-star /></template>
カスタムアイコン付き。
</AlertBox>
HighlightText
文中の重要語を太字 + 下線/蛍光ペン風に装飾します。
本研究では 異常検知精度 の向上を目的とする。
| Name | Type | Default | Description |
|---|---|---|---|
variantopt | 'orange'|'indigo'|'red'|'green' | orange | 装飾色。indigo のみ下線スタイル、他はボーダーボトム |
本研究では <HighlightText>異常検知精度</HighlightText> の向上を目指す。
<HighlightText variant="indigo">重要語</HighlightText>
TextColorBox
上部タイトル + 下部本文のカラーボックス。タイトル背景は theme-color(#0284c7)の 30% 不透明。
| Name | Type | Default | Description |
|---|---|---|---|
titlereq | String | — | ヘッダー文字列。HTML 可 |
textopt | String | '' | 本文。<strong>, <em>, <span class="v-mark highlight"> 等が使える。スロット使用時は無視 |
containerClassopt | String|Array|Object | '' | ルート要素へのクラス |
titleClassopt | String|Array|Object | '' | タイトル行へのクラス |
textClassopt | String|Array|Object | '' | 本文段落へのクラス |
v-mark スタイル(本文中で利用可)
| Class | Effect |
|---|---|
.v-mark.underline | 下線 |
.v-mark.underline.orange | オレンジ色の 2px 下線 |
.v-mark.highlight | 黄色のマーカー |
.v-mark.highlight.blue / .green / .red | 各色のマーカー |
<TextColorBox
title="重要なポイント"
text='従来手法より <strong>20%</strong> の性能向上。'
container-class="my-4" />
<!-- スロットで複雑コンテンツ -->
<TextColorBox title="結論">
<ul>
<li>精度向上</li>
<li>計算量削減</li>
</ul>
</TextColorBox>
06 bib2slidev / BibTeX 変換ツール
dev/bib2slidev.ipynb に収録された Python 製ユーティリティ。BibTeX エントリを貼り付けて実行すると、citations フロントマター形式の YAML を出力します。
import re
def convert_bibtex(bibtex_text):
author = re.search(r'author\s*=\s*\{([^}]+)\}', bibtex_text).group(1)
title = re.search(r'title\s*=\s*\{([^}]+)\}', bibtex_text).group(1)
year = re.search(r'year\s*=\s*\{([^}]+)\}', bibtex_text).group(1)
# optional: journal, volume, number, pages, publisher, issn
first_author = author.split(' and ')[0].strip()
print(f"{first_author}:")
print(f' author : "{author}"')
print(f' title : "{title}"')
print(f' year : "{year}"')
Input → Output 例
@misc{chalapathy2019anomaly,
title={Anomaly Detection using One-Class Neural Networks},
author={Raghavendra Chalapathy and Aditya Krishna Menon and Sanjay Chawla},
year={2019},
url={https://arxiv.org/abs/1802.06360},
}
Raghavendra Chalapathy:
author : "Raghavendra Chalapathy and Aditya Krishna Menon and Sanjay Chawla"
journal : "arXiv preprint"
title : "Anomaly Detection using One-Class Neural Networks"
year : "2019"
Citation id="…" 側と揃うよう、必要に応じてキーを chalapathy2019 等に書き換えてください。
07 Recommended Workflow / 推奨制作フロー
- 章立ての設計。
chaptersを先に書ききると進捗バー/目次が一貫する。 - 参考文献の下準備。BibTeX があれば
bib2slidevで YAML 化してcitationsに貼る。 - 表紙と末尾。
author,coAuthors,contact,thankYouMessageを入れておく。 - 本文。章ごとに
SectionDivider :next-chapter="..."/+Header :chapter="..." :current-section="..."/を敷く。 - 推敲。
MathText,Citation,AlertBoxを入れ、最後にCitationListPageを一枚追加。 - 出力。
npm run export→ PDF、npm run screenshot→ PNG。
08 Styling / UnoCSS
テーマは UnoCSS を前提とし、uno.config.ts で以下のカスタムトークンを追加します。
- text-main
#1f2937— 既定本文色 - theme-color
#0284c7—TextColorBoxのタイトル背景等で使用 - fontSize.md
1rem(UnoCSS 既定とは異なるサイズマッピング) - --slidev-theme-primary
#5d8392(CSS 変数、themeConfigで上書き可)
Shiki テーマ
コードブロックは vitesse-light(light)/ vitesse-dark(dark)が既定。
09 Troubleshooting / よくあるつまずき
数式が描画されず原文のまま出る
KaTeX の動的 import に失敗している可能性あり。ネットワーク切断時は :simple="true" でフォールバック表示に切り替えできます。
If KaTeX import fails, set :simple="true" to fall back to plain styled text.
進捗バーの現在位置がずれる
Header は内部で currentPage − 1(表紙を除外)を行う前提です。表紙を複数ページ入れる構成では、chapter と current-section を明示的に渡してバーの点灯を確実にしてください。
Appendix が通常目次に出てしまう
キーが ap で始まっていない場合、通常章として扱われます(appendix1 → ap1 に変更)。
引用番号が [?] になる
Citation id="…" の ID が citations 辞書に存在しません。スペルミスまたは bib2slidev 出力のキー名が想定と違う可能性あり。
外部 YAML を置いたのに Header / Citation / EqRef が反映されない
data/chapters.yaml / data/citations.yaml を作っただけでは不十分です。setup/main.ts を配置し、../data/chapters.yaml と ../data/citations.yaml の import path、および app.provide('chapters', ...) / app.provide('citations', ...) / app.provide('equationRegistry', ...) を確認してください。
APA スタイルで (?, year) と表示される
書誌エントリに first_author フィールドを追加してください。author とは別にテーマが要求します。
Source: github.com/mksmkss/slidev-theme-gtlabo · MIT License