https://github.com/mcanouil/quarto-spotlight

A Quarto extension for Reveal.js allowing to highlight the current mouse position with a spotlight.
https://github.com/mcanouil/quarto-spotlight

quarto quarto-extension quarto-pub quartopub revealjs revealjs-plugin

Last synced: 2 months ago
JSON representation

A Quarto extension for Reveal.js allowing to highlight the current mouse position with a spotlight.

• Host: GitHub
• URL: https://github.com/mcanouil/quarto-spotlight
• Owner: mcanouil
• License: mit
• Created: 2023-02-10T09:16:45.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-20T21:55:41.000Z (6 months ago)
• Last Synced: 2024-10-09T22:04:54.529Z (4 months ago)
• Topics: quarto, quarto-extension, quarto-pub, quartopub, revealjs, revealjs-plugin
• Language: JavaScript
• Homepage: https://m.canouil.dev/quarto-spotlight/
• Size: 25.4 KB
• Stars: 22
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Spotlight Extension For Quarto `revealjs` Format

A plugin for [Reveal.js](https://github.com/hakimel/reveal.js) allowing to highlight the current mouse position with a spotlight.

## Installing

```bash

quarto add mcanouil/quarto-spotlight

```

This will install the extension under the `_extensions` subdirectory.

If you're using version control, you will want to check in this directory.

## Usage

Simply add the extension to the list of reveal plugins like:

```yaml

format:

  revealjs: default

  spotlight:

    # set pointer configuration options here

revealjs-plugins:

  - spotlight

```

## Options

You can control the appearance of the pointer by passing some additional options under a `spotlight` key.

| Option                       | Description                                                                                           |

| ---------------------------- | ----------------------------------------------------------------------------------------------------- |

| `size`                       | size of the spotlight. Default is `60`.                                                               |

| `lockPointerInsideCanvas`    | Locks the mouse pointer inside the presentation. Default is `false`.                                  |

| `toggleSpotlightOnMouseDown` | Toggle spotlight by holding down the mouse key. Default is `true`.                                    |

| `spotlightOnKeyPressAndHold` | The key code pressed and held to turn on spotlight, disabled when set to false. Default is `false`.   |

| `spotlightCursor`            | The cursor when spotlight is on. Can be "crosshair". Default is `none`.                               |

| `presentingCursor`           | The cursor when spotlight is off and in presentation mode. Can be "default". Default is `none`.       |

| `initialPresentationMode`    | Enable presentation mode, will also be true if toggleSpotlightOnMouseDown is true. Default is `true`. |

| `disablingUserSelect`        | Disable selecting in presentation mode. Default is `true`.                                            |

| `fadeInAndOut`               | Transition duration in ms to enable fade in and out, disabled when set to false. Default is `100`.    |

| `useAsPointer`               | Enable pointer mode. Default is `false`.                                                              |

| `pointerColor`               | Set pointer colour if pointer mode is enabled. Default is `red`.                                      |

## Example

Here is the source code for a minimal example: [example.qmd](example.qmd).  

View an example presentation at .

---

[Spotlight - Reveal.js Plugin](https://github.com/denniskniep/reveal.js-plugin-spotlight) by Dennis Kniep ([@denniskniep](https://github.com/denniskniep)) under Apache License 2.0.