https://github.com/mutsuntsai/slidev-theme-frankfurt

A theme for Slidev, inspired by the Frankfurt theme in Beamer.
https://github.com/mutsuntsai/slidev-theme-frankfurt

slidev slidev-theme

Last synced: about 2 months ago
JSON representation

A theme for Slidev, inspired by the Frankfurt theme in Beamer.

• Host: GitHub
• URL: https://github.com/mutsuntsai/slidev-theme-frankfurt
• Owner: MuTsunTsai
• Created: 2023-11-10T09:36:13.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-01T15:29:52.000Z (9 months ago)
• Last Synced: 2024-11-13T06:42:51.296Z (2 months ago)
• Topics: slidev, slidev-theme
• Language: Vue
• Homepage:
• Size: 1.52 MB
• Stars: 21
• Watchers: 1
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# slidev-theme-frankfurt

[![NPM version](https://img.shields.io/npm/v/slidev-theme-frankfurt?color=3AB9D4&label=)](https://www.npmjs.com/package/slidev-theme-frankfurt)

A theme for [Slidev](https://github.com/slidevjs/slidev), inspired by the Frankfurt theme in [Beamer](https://github.com/josephwright/beamer), well-suited for academic talks.

![](screenshots/01.png)

## Install

Add the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.

```yaml

---

theme: frankfurt

infoLine: true # on by default, can be turned off

author: 'Your name here' # shows in infoLine

title: 'Title' # shows in infoLine

date: '2023/01/01' # shows in infoLine, defaults to the current date

---

```

Learn more about [how to use a theme](https://sli.dev/themes/use).

## Using sections

The main feature of Frankfurt theme is the section and progress indicators on top. To divide your slides into sections, add the following frontmatter to the first page of each section:

```yaml

---

section: 'Section title'

---

```

## Components

This theme provides the following component:

```html

	Create a box for definitions, lemmas, theorems, etc.

```

![](screenshots/06.png)

## 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