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

Hi everyone :wave:,

today I want to share my first public release of Advanced Slides.

demo

Obsidian has already implemented a slide functionality. Unfortunately, it’s a very simple implementation, that lacks important features, which forces you to leave Obsidian if you want to make serious presentations - until now!

Advanced Slides is an open source alternative to the build in slides plugin, which creates beautiful slides, in Obsidian, based on the Obsidian Markdown Synthax.

Features

  • Embed your notes into your slides
  • Live Preview while editing your slides
  • Themes allow you to change the appearance of your slides
  • Annotations allow you to change the style of your slides
  • Full support of the Obsidian Markdown Syntax

Github

8 Likes

Is it possible to configure reveal.js with this plugin? For example, I really wish to show page numbers by turning on slideNumber. It seems the built-in slide doesn’t provide any exposure of reveal.js's APIs: such a pity.

sure since version 0.2.0 you can pass reveal options through frontmatter.

---
slideNumber: true
---

Here is a list of all available Options

Excellent!

Is it possible to customize the lines to separate pages?

From your explanation,
— and – are used for ‘horizontal’ and ‘vertical’ slides.

For example, it would be great if
<!--- ---> for horizontal presentation.
and
<!-- --> for vertical presentation.
can be used because they don’t affect the document preview.

Yes it is,

you can use the frontmatter properties separator and verticalSeparator:

---
verticalSeparator: xxx
---

# Slide  1

xxx

# Slide  2

That’s nice.

Thank you for your great work.

I’ve just played with version 0.7.0 and it works very well. Meanwhile, I want to report that:

  1. it seems using a different render for LaTeX equations. For example, obsidian’s built-int slide can render $s^{-2}_{n}\sum_{i=1}^{n}$ correctly, but this plugin fails. I remember it’s a known issue of some render because there are multiple underscores _ in the equation.
  2. This syntax ![[test.png|10x10]] embeds the image correctly, but it seems 10x10 has not effect on the image’s size.
  3. With CJK characters (no space between characters), the emphasis in 是__一个世界__ can’t be rendered but 是**一个世界** works OK.
  4. Is it possible to add support for *.excalidraw.md files from excalidraw plugin?

This is the normal markdown behaviour since underscore is a reserved character for italic format. I’ve created a workaround that escapes every latex expression with backticks (``). This should do the job

Will be fixed with 0.9.0

Nice find, will be fixed in 0.9.0

Sure, i will integrate after we have a stable 1.0

1 Like

First of all, thank you very much for this cool plugin.

I saw that it’s possible to define styles in the markdown. Do these apply to the current slide or to the entire document?

Saw you experimented with layouts in the Mattropolis theme
Do you plan to provide templates for slides in the future?

Styles are always applied to the entire document. The final definition of a css class is the one in which the document is displayed

Yes, that’s right. I had the idea, similar to what I know from PowerPoint, for example, to define format templates for standard layouts and to integrate them into advanced slides. However, I am not an expert on css and am afraid that I will not be able to support these layouts properly when users have issues with them.

Short update on the current status:

  • All bugs reported in this thread have been fixed.
  • All features planned for version 1.0 have been developed
  • A pull request for inclusion in the community plugins has been made, but is still waiting to be accepted.

For those who can’t wait, 0.10.0 can now also be installed with BRAT.

1 Like

Hi MSzturc, thanks very much for your effort. It looks very good now!
1, regarding Slide Annotations, it changes only the text content’s background color. I’m not sure if it is only a display issue on my computer:

2, regarding backgournd image, if we write something like:

<section data-background-image="test.jpeg" >

## content in markdown

</section>

, this snippet sets the background correctly, but the markdown content is not rendered.

Hi @janisc

you’re right the documentation part about slide annotation was misleading. I’ve fixed it and i’ve added a part about slide backgrounds

1 Like

With version 0.12 Advanced Slides contains a library of layout components that should simplify the creation of slides. The first component that I introduced is split, which divides a slide into several parts, making it easy to create a 2 or 3 column layouts. Here i described how you use the split layout. Have fun testing

Added support for Excalidraw Plugin in 0.13.0.
It’s required to activate Auto-Export SVG / PNG in Excalidraw Settings.

1 Like

Can you implement the automatic slideshow feature like Tryit Editor v3.7.

It would be great if the slildeshow can be started again when it ends.

This already is implemented. Simply add the following properties in frontmatter:

---
autoSlide: 2000
loop: true
---

There more options to tweak the auto slide behavior. You will find a documentation on them here

Thank you for your answer.
I didn’t know that there are so many features which have been implemented already.

Yeah that might be a bit tricky to know. Since Advanced Slides is using reveal.js for slide rendering most of the features of reveal could be used in Advanced Slides as well. I’ve tried to describe all features of Advanced Slides in the documentation.