https://github.com/krasimir/simpre
HTML presentation framework
https://github.com/krasimir/simpre
Last synced: 6 months ago
JSON representation
HTML presentation framework
- Host: GitHub
- URL: https://github.com/krasimir/simpre
- Owner: krasimir
- License: mit
- Created: 2022-02-05T07:16:29.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-07T19:16:50.000Z (about 1 year ago)
- Last Synced: 2024-11-07T11:44:35.593Z (11 months ago)
- Language: JavaScript
- Size: 11.9 MB
- Stars: 38
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SimPre - a 10KB HTML presentation framework
I've always wanted a minimalistic presentation framework that formats my slides correctly. SimPre scales and positions my content, using all the available space. In addition, it comes with a syntax highlighter and progress indicator.
Move on and see how to use it.
* Demo [simpre.vercel.app](https://simpre.vercel.app)
* Download [simpre.zip](https://simpre.vercel.app/simpre.zip)
## Usage
It's just a single HTML file:
```html
SimPre - The Simplest Presentation HTML Framework
Hey 👋
```
Every <section> tag is a slide:
```html
Slide with text
```
All the code lives outside the framework. Create a file, add the code inside and load the file via the following <script> tag:
```html
```
There is "smart" selection mode. When showing code, I often want to emphasize or hide part of it. To help myself in this direction, I did a little feature that you can turn on and off via the Shift key. Select part of the text on [this page](https://simpre.vercel.app) and press the Shift key to see how it works.
If you need to emphasize on a part of the code you can use the `data-sections` attribute on the `` tag. This will create a seprate slide for each of the sections. For example:
```html
<script
src="https://simpre.vercel.app/assets/is.js"
data-file="slides/template.html"
data-sections="2-8,10">
```
This will highlight the code between line 2 and 8 including. After that the code at line 10. You can also set a value of `!2-8,10` (notice the `!` in the beginning). This will trigger the first highlighting automatically.
In some cases you may need to implement a custom logic for your slide. If that's the case use the following data attributes attached to your `` tag:
```html
window.onEnter = async function (element) {
// ... do some potential async logic
}
window.onChange = async function (element, direction) {
// Return "true" if you want to move forward
// with the slide change.
return true;
}
```
The `onChangeCustomLogic` function will be fired when you try to go away from the slide. It will be called again and again until you execute the passed `done` callback. The `onEnterCustomLogic` is called when you enter the slide.
You can also use `Simpre.nextSlide()` and `Simplre.previousSlide()` global functions to control the slides.