Slideshow

[dtp81390]

Hello,

I am a professor and I would like to turn my powerpoint presentations into slides in Obsidian, this way I can link to terms or block reference definitions into a slide etc.

However I have some styling, images and animations in ppt that I do not think are possible in obsidian. Looking for someone to help me with this process or provide insight into doing this.

Below are a few examples of slides. Class starts in a week and I would like to test this out. Thanks in advance

[heumed]

I’ve been looking for the same - unfortunately, both obsidian’s help documentation and forum are sparse when it comes to slides- leading me to believe it’s not a super common use case in the community. I even went over reveal.js documentation - wasn’t super helpful either.

In addition to the examples mentioned above, Powerpoint has staple layouts: Title and two text columns below, one text column (either left or right) and one picture, etc…

It would be great if someone more familiar with markdown and reveal js can describe how these are accomplished. Most of the reveal js examples I found did not attempt to replicate these layouts.

[eableson]

You’re probably better off by building a personal workflow around reveal-md based on files in Obsidian. This will give you a lot more control than the built-in presentation stuff and you can do things like locally designed themes. Plus since reveal-md is designed to be the interface between a fully markdown source and the reveal-js engine you can do stuff like run a custom preprocessor to tweak things to exactly the way you like.

An example: I have a preprocessor that converts the Obsidian Wiki Links to markdown links that reveal-md can parse properly and I just added a check for cases where I use the syntax ![[filename.png|300]] to force the size of an image with the element height tag in the presentation.

Once you get into the stuff like custom layouts you’ll need to be pretty well steeped in CSS to build a custom theme that you can map to tags or something in the Obsidian source files. I’m way out of my depth on modern CSS but learning lots!

[Hileotech]

Any good resource or step-by-step guide on how to “play” with reveal-md?

I read the Github “README.md”, but I’m not that good in this field, and I can’t even figure out how to install reveal-md (I can guess I need to use terminal, but I’m using macOS…)

Thanks for any hint!

[eableson]

Yeah - there’s some heavy lifting there if you haven’t spent a lot of time with git, homebrew et al.

The alternate method (which adds or at least changes the complexities involved) would be using their Docker image so that all of the their code is encapsulated into a container so that you don’t need to install and maintain everything into your native environment.

Quick sample method:
docker run --rm -p 1948:1948 -p 35729:35729 -v path-to-your-slides:/slides webpronl/reveal-md:latest /slides --watch

This assumes you’ve installed the Docker desktop application.

That will get you the basics running just fine. Pulling the command apart we have:

• docker run (pretty obvious)
• -rm (delete the container when you’re done with it)
• -p (maps a network port from the container to a port on your Mac)
• 1948:1948 publishes the presentation on port 1948, so it’s available at http://1948/
• 35729:35729 maps the port that allows you to modify the source files and the presentation in the browser will be updated in real-time
• -v path-to-your-slides:/slides (maps the folder on your Mac where the presentation files are stored to the directory /slides inside the container so the app can use them in the expected place
• webpronl/reveal-md:latest (the name of the docker container in the registry, downloading the latest version)
• /slides --watch (used with the 35729 port to monitor the slides directory for changes

Other useful options to add to the command line:

• –theme solarized (pick your theme from the available options)
• -v path-to-other-resources:/resources (maps a folder for additional code resources)
• –preprocessor /resources/reveal-md-pre.js (run a pre processor on your text files)

I had to add the pre processor to help tweak the Obsidian files to a markdown that reveal.js is happier with. This hacked together one makes the following changes:

• Converts Obsidian Wiki style links to markdown links (useful for embedded images)
• handles wiki style links that set the height of an image in pixels with a pipe to the appropriate html for reveal.js

// Checks for Wikilinks for embedded links
// Looking for graphic links with ![[]] - mapped to ![]()
// and then replace size overrides with |xxx pixels to the html .element height parameter
module.exports = (markdown, options) => {
  return new Promise((resolve, reject) => {
return resolve(
  markdown
    .split('\n')
    .map((line, index) => {
      if (!/\!\[\[/.test(line) || index === 0) return line;
		  line.replace(/\!\[\[(.*?)\]\]/, "![]($1)")
		  if (/\!\[\]\(.*\|.*?\)/.test(line)) {
		  	return line.replace(/\!\[\]\((.+)\|(.+)\)/, "![]($1) <!-- .element height="$2" -->")	
		  } else {
		  	return line;
		  }
    })
    .join('\n')
);
  });
};

Quick notes : some of the forum text handling combines double hyphens to an em-dash

[Hileotech]

Thanks, @eableson !

I really appreciate you answer and its depth!
What you wrote is above my knowledge. I’ll give it a try and report back.

EDIT: news after a few tests

I succesfully installed reveal-md, but without using docker (installed node instead). I don’t think it’s a big issue for this conversation to go on…

The problem I’m now facing is about embedded images: they simply do not appear, and all I can see in the slide is something like ![[image.jpg|300px]] . As far as I can understand, your “preproc.js” file shoul face exactly this problem, and I “injected” this js file like this: reveal-md FILENAME.md --PREPROC_FILE.js. But… no image appears.
Using Obsidian “built-in” presentation, of course, presents correctly all embedded images, so there shouldn’t be any broken link.

Any hint, @eableson ? Thanks in advance!

EDIT2: I’m currently using --- for separating slides and ---- for vertical slides

[heumed]

While it would be great to have slides integrated with my PKM, the slide making process also needs to be as efficient as possible. At least in my neck of academia, slides/presentations are an extra, adding to typical workloads without really being resourced/reimbursed. So I need to put them together as quickly as possible.

So far, I don’t see a solution for quickly making slides in Obsidian that are within a reasonable distance of PPT’s polish without a way higher overhead. Would love to be proven wrong.

Meanwhile, another thread that may be helpful for those of us looking for slide functionality in Obsidian.

[heumed]

… and another approach to slides using Hugo. Planning to give it a whirl when I get the chance.