Advanced Slides - Create markdown-based reveal.js presentations in Obsidian

This plugin could really be important for me teaching my students. I tried to install it via BRAT, and later by extracting the ZIP file into the plugins folder, as you describe in the documentation. When I try to activate it, there’s an error message: “Failed to load plugin obsidian-advanced-slides”. Tried it in my vault and with a new empty vault without other plugins and default settings. Didn’t work there also. What could I possibly be doing wrong? Thanks!

Agree- For folks in academia like myself, this plug in could be a real game changer. It would be great if it were in community plug ins. Any way we can inquire as to what the timeline for that looks like?

This is fixed with 0.14.2
There was a corrupt dependency i’ve used, rolled back to a stable state and locked all dependencies for now.

Installation through BRAT / manual should work.

A pull request for inclusion in the community plugins has been made, but is still waiting to be accepted.

Yes, now I was able to activate the plugin. Thanks! But there’s still an error.

  • I copy the code from “First Steps” in the documentation into an empty note.
  • I click the “Show Slide Preview” button. → Pane “Slide Preview” appears.
    • But: the pane is empty. No text visible.
    • Click on “Refresh Slides”: still no text.
  • I click the button “Open in browser” in the Slide Preview pane → the browser opens with “localhost:3000”.
    • But its only loading and doesn’t display anything. Only one single time there was a message in the brower, something like “Open the Preview in Obsidian first.”

Any ideas?

@MSzturc thank very much for Advanced Slides, it’s a beautiful plugin. However, I have a couple of questions to ask you

  1. Scale image to a width of 100 px Not Working for me![[Image.jpg|100]] only 100x100
  2. How to center an image?
  3. How to generate fragments lists? e.g : like a Marpit: The skinny framework for creating slide deck from Markdown
  4. Where can I download css themes for revealjs?

Here is how to generate fragments:

1 Like

Would changing the default port number 3000 to something else help?

That’s suspicious.

Advanced Slides installs all the dependencies that are necessary for displaying a presentation when activated for the first time. It seems that you encountered an error on this process. Thats why the preview is not displayed. Can you post a Screenshot of you your VAULT/.obsidian/plugins/obsidian-advanced-slides/ directory?

Are there any error in the obsidian developer tools console? (You can access them by TopMenu->View->Toggle Developer Tools)

As quickfix i would suggest to install Advanced Slides manually since in this method the installation of the dependencies is not necessary.

There was a bug in image rendering, this is fixed with 0.15.0

There is no central place for reveal.js themes, but you could search for them in github or gitlab.

I’ve added the option for custom themes to use my own theme (css/mattropolis.css) in first place but im sure as soon as one of the talented theme creators in this community gets his hands on Advanced Slides there will be more and more themes for it.

1 Like

What a wonderful plugin! Thanks so much for creating it. I have two questions / feature requests:

simply write note: and everything after it will be a speaker note.

Example:

## My Slide

This is part of my Presentation


note: this is not! Only the speaker might see this text.

- and this bulletpoint
- or this picture

![](https://picsum.photos/id/1005/250/250) 

To access the speaker view you have to open Slide Preview and click on the Open in Browser Button in the top right corner. Your Slide will open in your default web browser. Press the »S« key on your keyboard to open the notes window.

Wow that’s cool, love the clean syntax by adding the properties of the image inside the Images name. Currently it’s not possible to do something link this without some css magic but i will put it on the roadmap :slight_smile:

2 Likes

@Wen : Thanks for the tip. Changed the port to another number, but didn’t work.

@MSzturc : Thank you! I tried that: deinstalled the plugin, deleted the plugins folder, and installed the newest version manually. But again: it doesn’t display the preview nor the presentation in the browser.

But never mind: In the meantime I searched for other options and found remark.js on Git. That doesn’t work in Obsidian, but I can use it for my presentation next week. Thanks for your work!

Thank u very much @MSzturc How can I use the mattropolis.css theme? Do I write in theme: csss/mattropolis.css in the YAML?

Correct, but i guess you have a typo in your YAML.

---
theme: css/mattropolis.css

---

### Rendered in Mattropolis theme

1 Like

Awesome plugin @MSzturc ! I already created a template for future use.

What I noticed, as I was testing was that the live preview flicks on and off constantly whenever you are making changes. This is distracting, is there a way to make the refresh either manual or less distracting?

I also enjoyed your custom tag for auto-layouts. I wonder if it makes sense to have some standard layouts like the ones on powerpoint (image on the right, text on the left and a header on the top for instance) that you could easily swap between slides? These would probably need to be provided as custom CSS I guess and then tag every slider with a comment to use a particular layout.

I’ve improved the rendering of the slide preview. The flickering should not be as annoying as before. Please retest with 0.19.0. Nevertheless, i’ve added a Setting to disable auto reload of live preview and a command & hotkey to reload it on demand.

1 Like

Hi @MSzturc :wave: and thank you so much for bringing the reveal.js magic to Obsidian :pray:. I was wondering if the auto-animate functionality of reveal.js (Auto-Animate | reveal.js) was available in the advanced slides plugin. If so, what markdown command should I use ?Cheers.

1 Like

Sure, you have to annotate the slide like this:

<!-- .slide: data-auto-animate -->

# Hallo

---

<!-- .slide: data-auto-animate -->

# Hallo
# ygauthier

Wunderbar ! Thank you so much :+1: