Preso[^fn1]
What is preso[^getpreso]?
How does it work?
Nice things
6 levels of headers
We have lists[^fn4]
We can show code
And background images, with automated filter
We can override the filter, too
We can also have images on the left
And on the right
Or have multiple as background, in vertical slices[^fn2]
You can add speaker notes
Export
Presentation mode
Tips
Enjoy!

  1. An Obsidian plugin by rberenguel

Preso1

bar

foo

  1. You can find the plugin here

What is preso1?

  • Lightweight plugin to create presentations in Markdown in Obsidian
  • Inspired by the way Deckset presentations are built
  • Works in Obsidian desktop and obsidian mobile
  • Can export presentations as HTML+CSS+JS or HTML+CSS only

bar

foo

How does it work?

Slides are separated by a Markdown rule separator, three dashes --- on its own line.

Paragraphs? Just type.

New lines between paragraphs? Just leave a line empty.

bar

foo

  1. You can also override CSS per paragraph if you feel like you really need to. Sometimes you do

Nice things

You can add numbers to your slides

As well as a footer icon/image

And a footer proper.1

They are enabled until they are not. And you can re-enable them later, too.

bar

I shrug a lot

4 / 17

6 levels of headers

Second

Third

Fourth

Fifth
Sixth

bar

I shrug a lot

5 / 17

  1. And footnotes. I always forget the footnote syntax…

We have lists1

  • Unordered lists
  • …

And obviously

  1. UnOrdered lists
  2. …

bar

I shrug a lot

6 / 17

We can show code

squares = [x * x for x in range(1, 11)]

qsort [] = []
qsort (p:xs) = qsort (filter (< p) xs) ++ [p] ++ qsort (filter (>= p) xs)

std::vector<int> v = {4, 1, 3, 2};
std::sort(v.begin(), v.end(), [](int a, int b) { return a < b; });

bar

I shrug a lot

7 / 17

And background images, with automated filter

bar

I shrug a lot

8 / 17

We can override the filter, too

bar

We can also have images on the left

bar

And on the right

bar

  1. With or without filter

Or have multiple as background, in vertical slices1

bar

I shrug a lot

12 / 17

You can add speaker notes

 ^ This would be a speaker note (any line starting with a hat)

You can see speaker notes in the exported slides, too

bar

I shrug a lot

13 / 17

  1. Images and fonts are inlined as data URLs

  2. security!

Export

You can export to standalone1

  • HTML+CSS+JS

or

  • HTML+CSS only2

bar

I shrug a lot

14 / 17

Presentation mode

  1. Export to HTML+CSS+JS
  2. Press P to open the presentation window amaze.gif
  3. Switch your slides to full screen
  4. Enjoy having a view of the previous slide, next slide and speaker notes while you present
  5. You can use your keyboard's ← and → on the presenter view to advance

bar

I shrug a lot

15 / 17

Tips

  • Writing slides is best in source mode, not on live preview mode. The plugin forces the editor to source mode when switching to a Preso and restores it when leaving.
  • Some things depend on having / not having spaces between things. In case of doubt, try to do it like in this example slides 😏

bar

I shrug a lot

16 / 17

Enjoy!

bar

If you have tried to open the speaker notes slide you'll see it

Speaker Notes

Next

Previous