`joplin-plugin-revealjs-slides`

A Joplin plugin for presenting notes. Internally, this uses the reveal.js library.

Screenshot: A Joplin plugin window showing a slideshow. The current slide states that KaTeX, highlight.js, and Mermaid are supported.

Example presentation

````markdown # `joplin-plugin-revealjs-slides` --- - Separate slides with `---`s (if you're using the rich text editor, press the "horizontal line" button). - The rest of this example presentation will assume you're using the markdown editor. --- This plugin uses [reveal.js](https://revealjs.com/) internally. [Read about writing reveal.js presentations here](https://revealjs.com/vertical-slides/). --- ## A note on markdown rendering `joplin-plugin-revealjs-slides` uses Joplin's markdown renderer internally *not* `reveal.js`'s markdown renderer.

Thus, some of [reveal.js's markdown features are not supported](https://revealjs.com/markdown/).

However, this also means that many of Joplin's built-in features are supported. (For example, slideshows can be customized with [userstyle.css](https://discourse.joplinapp.org/t/introduction-to-customising-joplin-userchrome-css-userstyle-css/21370)).

--- [Note links can also be included](:/9aeb224225314a1b9d7ee977ffeb3078) (though note that they may not work perfectly!) Slides can be linked to like this: [link to slide 3](#3). --- # $\KaTeX$ is supported. ```js // highlight.js is supported (through Joplin's // markdown renderer). function foo() { alert('test'); } ``` --- **Mermaid** is also supported ```mermaid graph TD; Mermaid-->Also; A-->B; Also-->Works; B-->Works; ``` --- **Speaker notes** can be created using an ``` ``` A setting exists to show speaker notes (when available). ---

# Keyboard shortcuts

Press f to enter fullscreen and esc to exit fullscreen.

Press p to print the slideshow.

Press q or navigate to the last slide to show the `Exit` button.

Press ? to see a list of additional shortcuts.

--- # Animating code blocks Code blocks with highlighted line numbers need to be specified in HTML. See [the upstream reveal.js documentation](https://revealjs.com/code/#manual-highlighting) for details. Example:


// This
// is
// a test
// of code blocks.

--- # More For additional features, see the [reveal.js documentation](https://revealjs.com/backgrounds/). ```` > [!NOTE] > > Other examples can be found [on this plugin's GitHub repository](https://github.com/personalizedrefrigerator/joplin-plugin-revealjs-slides/tree/main/examples). >

Installing

Search for "reveal.js" under the plugins tab in Joplin's settings. screenshot shows "reveal.js" in the search bar of the "plugins" tab of Joplin's settings.

Keyboard shortcuts

Press f to enter fullscreen and esc to exit fullscreen.
Press p to print the slideshow.
Press q or navigate to the last slide to show the Exit button.
Press ? to see a list of additional shortcuts.

Custom theme

It's possible to customize the theme for a slideshow with CSS by adding a <style> block to the top of a note. To do this:

Make sure that the markdown editor is active. In markdown mode, the toggle button near the top of the screen should look like this (the "markdown" side should be highlighted):

At the top of the note, add the following:

<style>
   :root > body {
       --r-main-color: white;
       --r-heading-color: white;
       --r-background-color: darkgray;
       --r-link-color: lightblue;
   }
</style>

Adjust the colors in the <style> block to customize the theme.
Start the presentation.

Note: Other editable theme variables are listed here.

Exporting

HTML: For a web browser

To export a presentation to an HTML directory, right-click on a note, select export, then select "PRESENTATION.HTML - Export presentation as HTML":

A file dialog will then appear. Use this dialog to select an output directory.

The slides plugin will create a presentation subfolder within that directory, then a subfolder for the current note's notebook, then a .presentation.html file for the current note. Opening that file in a web browser allows viewing the presentation outside of Joplin. Note that this file uses resources in other parts of the presentation/ directory, so publishing or sharing just the .presentation.html file is not sufficient.

Note: Exported presentations use a light theme by default. See the Custom theme section above for how to customize the presentation and export theme.

Notes

Avoid running a presentation with untrusted markdown input.
- While it should be safe to do so, it is very possible that a vulnerability exists.
- reveal.js has features like iframe backgrounds that could pose a security risk (even though, in the iframe case, this plugin attempts to mitigate this by disabling JavaScript in iframe backgrounds).
A keyboard shortcut can be associated with starting the slideshow. To do this, open Joplin's settings, click "Keyboard shortcuts", and search for "slideshow". Next, click in the "keyboard shortcut" column. .
Press ? while in presentation mode to see a list of slideshow shortcuts.

Known issues

Starting a presentation while the rich text editor is open may clear your undo history! The plugin briefly switches to the markdown editor before running the presentation. This switch may cause issues.
Does not support HTML notes.
If the note viewer is hidden, the presentation dialog will not update.

Disclaimer

The developer of this plugin is not affiliated with reveal.js.

Development

# Development ## Building the plugin The plugin is built using Webpack, which creates the compiled code in `/dist`. A JPL archive will also be created at the root, which can use to distribute the plugin. To build the plugin, simply run `yarn run dist`. The project is setup to use TypeScript, although you can change the configuration to use plain JavaScript. ## Updating the plugin framework To update the plugin framework, run `npm run update`. In general this command tries to do the right thing - in particular it's going to merge the changes in package.json and .gitignore instead of overwriting. It will also leave "/src" as well as README.md untouched. The file that may cause problem is "webpack.config.js" because it's going to be overwritten. For that reason, if you want to change it, consider creating a separate JavaScript file and include it in webpack.config.js. That way, when you update, you only have to restore the line that include your file.

personalizedrefrigerator / joplin-plugin-revealjs-slides

readme