A Slidev theme for laboratory presentations with customizable components
npm install slidev-theme-gtlabo
学術発表やプレゼンテーション用に設計されたSlidev用カスタムテーマ。引用管理、数式表示、階層リストなどの機能を提供します。
``bash`
npm install slidev-theme-gtlaboslides.md
Add the following frontmatter to your . Start Slidev then it will prompt you to install the theme automatically.
---
theme: slidev-theme-gtlabo
---
Learn more about how to use a theme.
This theme provides the following layouts:
> TODO:
このテーマは以下のコンポーネントを提供します:
`vue`
機能:
- インライン引用番号の表示([1]形式)
- 画面下部に現在のページの引用情報を表示
- 引用番号の自動管理
- 複数ページにわたる引用の追跡
使用例:
`markdown`
この技術について
`vue`
機能:
- 全ての参考文献を一覧表示
- 学術スタイルでの引用フォーマット
- DOI、URL、ISSN等の情報表示
- ソート機能(キー、著者、年別)
プロパティ:
- style: 引用スタイル(academic、ieee、apa)sortBy
- : ソート基準(key、author、year)
`vue`
chapter="section1"
current-section="intro"
/>
機能:
- 章・セクションの進捗表示
- 現在位置の可視化
- ページ番号表示
- 動的なプログレスバー
プロパティ:
- chapter: 章のキーchapterData
- : 章の情報オブジェクトcurrentSection
- : 現在のセクションcurrentChapter
- : 現在の章
`vue`
container-tag="p"
:simple="false"
:disable-markdown="false"
/>
機能:
- LaTeX数式の自動レンダリング
- インライン数式($...$)とブロック数式($$...$$)
- Markdownサポート(太字、イタリック、リンク等)
- KaTeX による数式描画
- シンプルモード対応
プロパティ:
- text: 表示するテキストcontainerTag
- : コンテナのHTMLタグsimple
- : シンプルモード(基本的な数式のみ)disableMarkdown
- : Markdownを無効化customDelimiters
- : カスタム区切り文字
`vue`
color="sky-800"
/>
機能:
- 左側のカラーバーと組み合わせたタイトル表示
- UnoCSS/Tailwindカラー対応
- カスタムカラー対応
- スロットコンテンツ対応
プロパティ:
- title: タイトルテキストcolor
- : カラー(Tailwind形式またはHEX)
`vue`
color="sky-700"
/>
機能:
- 左側のアイコン(矢印)と組み合わせたタイトル表示
- UnoCSS/Tailwindカラー対応
- カスタムカラー対応
プロパティ:
- title: タイトルテキストcolor
- : カラー(Tailwind形式またはHEX)
`vue`
text="本文テキスト"
container-class="my-4"
/>
機能:
- タイトル付きのカラーボックス
- HTMLタグ対応
- マーキング機能(v-mark)
- カスタムスタイル適用
プロパティ:
- title: ボックスのタイトルtext
- : ボックスの本文containerClass
- : 追加のCSSクラス
機能:
- SVGベースの入れ子円グラフ
- データ構造の階層表示
- アニメーション効果
- 課題提起セクション付き
- パーセンテージ表示
特徴:
- 外側の円:全体データの分類(構造化/非構造化)
- 内側の円:構造化データの詳細分類
- 自動アニメーション効果
- 完全にカスタマイズ可能なSVG
は、BibTeX形式の参考文献をSlidev用の引用形式に変換するツールです。
Pythonで実装されています。
dev/bib2slidev.ipynbを参照してください。🛠️ 設定方法
$3
frontmatter に
citations を追加:`yaml
---
citations:
smith2023:
author: "Smith, J."
title: "Research on AI"
journal: "Journal of AI"
year: "2023"
doi: "10.1000/example"
jones2022:
author: "Jones, A."
title: "Machine Learning Basics"
publisher: "Tech Press"
year: "2022"
---
`$3
`yaml
---
chapters:
intro:
title: "はじめに"
sections:
overview:
title: "概要"
objectives:
title: "目的"
method:
title: "手法"
sections:
approach:
title: "アプローチ"
implementation:
title: "実装"
---
`📱 使用例
`vue
:chapter-data="{ title: '研究手法' }"
chapter="method"
current-section="approach"
/>
text="提案手法では、損失関数 $L = \frac{1}{n}\sum_{i=1}^{n}(y_i - \hat{y_i})^2$ を最小化します。"
/>
- 手法の特徴
- 高精度
- 高速処理
- 省メモリ
この手法は で提案されました。
title="重要なポイント"
text="この手法により従来手法より20%の性能向上を実現しました。"
/>
`🎨 スタイル
テーマは以下のカラーパレットを使用:
- プライマリ: Sky(
sky-600、sky-700、sky-800)
- セカンダリ: Gray(gray-600、gray-700、gray-800)
- アクセント: Blue(blue-500、blue-600)📦 依存関係
- Vue 3
- Slidev
- UnoCSS/Tailwind CSS
- KaTeX(数式レンダリング)
- Lucide Icons
Contributing
-
npm install
- npm run dev to start theme preview of example.md
- Edit the example.md and style to see the changes
- npm run export to generate the preview PDF
- npm run screenshot` to generate the preview PNG