Include reveal.js presentation in a quarto project

[314a]

How to include revealjs slides as a properly rendered in a quarto project?

The following minimal setup doesn't render the inserted slides as revealjs slides, but with the css styles of the project. How is possible to include the rendered reveal.js as a slidedeck as shown in quarto/presentations/revealjs?

1. Create new quarto project: quarto create-project quarto_slides --type website
2. Create a folder with a revealjs source file slides/index.qmd and the following content:

---
title: "Habits"
author: John Doe
date: March 22, 2005
output: revealjs::revealjs_presentation
---

## Getting up

- Turn off alarm
- Get out of bed

## Breakfast

- Eat eggs
- Drink coffee

3. Refer to the slides with the following snippet in the main index.qmd of the project:

<iframe class="slide-deck" src="slides/index.html"></iframe>

[jjallaire]

The problem is this line here:

output: revealjs::revealjs_presentation

That's an R Markdown output format specifier. For Quarto you need to do this:

format: revealjs

Then things should work as expected.

[314a]

Thanks a lot. It is working now in a website project.

I have a further question, is it intended behaviour that when rendering/previewing a book project only the files listed in the _quarto.yml chapters, appendices are rendered?

Even by using the render option - "*.qmd. And how to go about having non-referred files rendered?

Minimal example:

1. Create new quarto project: quarto create-project quarto_slides --type book
2. Create a folder with a revealjs source file slides/index.qmd and the following content:

---
title: "Habits"
author: John Doe
date: March 22, 2005
output: revealjs
---

## Getting up

- Turn off alarm
- Get out of bed

3. Refer to the rendered slides in the main index.qmd of the project:

# Preface {.unnumbered}

This is a Quarto book.

To learn more about Quarto books visit <https://quarto.org/docs/books>.

Lecture Slides
```{=html}
<iframe class="slide-deck" src="slides/index.html"></iframe>
```

[jjallaire]

Yes, that is intended behavior (the book render list is drawn exclusively from the chapters and appendices). You could create a post-render script that renders other files: https://quarto.org/docs/projects/quarto-projects.html#pre-and-post-render-scripts

[314a]

Thanks a lot. Meanwhile I started writing a post-render script. The stripped down version should render a file to the output folder specified in the quarto.yml file.
The following code works well when running the file "test.ts" with deno run --allow-run _resources/scripts/test.ts, but when invoking it as a post-render script, the error message is: "Files\Quarto\bin\quarto.js""==""" cannot be processed syntactically at this point. (there seems to be an issue with the path to the quarto executable.

File test.ts:

const p = Deno.run({ cmd: ["cmd", " /c ", "quarto", "--version"] }); // create subprocess
await p.status(); 

same holds for running a batch file. The following batch file batch.cmd runs smoothly standalone, but results in the same error, if invoked as a post-render script in quarto.

echo check pandoc version:
pandoc --version

echo check quarto version:
quarto --version

[jjallaire]

Thanks for this additional report! I can reproduce this as well. I'm going to create a new GH issue to track this.

[314a]

Cool, thanks a lot.

[sebacea]

Hi, any news on this?

[alejandrohagan]

how can you change the size of the iframe? the above works for me but the presentation is only available from a very small window

[cderv]

Look at the attributes of <iframe>, you should be able to set width and height https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

[tomkom]

HI @314a ! :)
Could you pelase share your yml that is able to produce the book and slides together? I am producing slides form the book chapters, so that is fine, but cannot figure out how to keep this together in a single yml ( I have two different ymls, where I have to sync content).

[lsbjordao]

Hello people,

I follow 314a's examples and the ouput appears like this:

The reveal presentation built into the project is unconfigured, and all slides appear on one page with a scroll bar.

I tried 'embed-resources: true' in YAML, but it doesn't work too.

Anyone could help?

[cderv]

Can you share a repo project as example with what you tried exactly ?

I follow 314a's examples

What example website is it ? I see only the revealjs doc shared, and not the website project

[lsbjordao]

Hi Mr. cderv,

Repo: https://lsbjordao.github.io/project2/

I found the error... It's just that the project created before was a 'book'!
With format: 'website', it works!
But I really needed to embed the reveal presentation in a book. Is there a forecast for this implementation?
It's possible to make a website with a layout almost similar to the book, and the crossrefs will work too.

Really thanks!

[nataschake]

Hi! I find this thread as most relevant to the question below:
I have a set of presentations sharing its own _metadata.yml (and styles/backgrounds/...).
I would like to have a Quarto website showing the list of those presentations, with the ability to watch the slides.

The problem: despite _metadata.yml defined and mentioned in .qmd metadata section, all slides generated with the styles of the website, not with their predefined styles.

The mve project to test

The question: is it ever possible to have separated styles of the quarto website AND styles of presentations to be shown at the site?

[cderv]

This is because the revealjs format is not seen as you put it inside metadata-file YAML field.

To share metadata between files in a project, look at : https://quarto.org/docs/projects/quarto-projects.html#shared-metadata

You can place for example _metadata.yml in your markdown/ folder if all sub .qmd should be revealjs.

You could also defined

format: 
  revealjs: 
    ...

and then define format: revealjs in any .qmd that should use this format. Both will be merged. With this way, you need to be sure that all your .qmd have a format key.

metadata-file is inherit from Pandoc as a way to pass some meta for variables and all and it seems we don't account for it when resolving format and merging meta. It seems to be a bug... 🤔

[cderv]

I opened #6932 to discuss

[nataschake]

Thank you! What I did:

• moved revealjs-oriented _metadata.yml to markdown/ folder
• added to markdown/*.qmd rows

format: revealjs
metadata-files:
  - ../_metadata.yml

Now it renders Quarto website with its own styles and slides - with their style.
MVE is also updated

[cderv]

Good. You should not need metadata-files. _metadata.yml is a special file known by Quarto as Directory Metadata. See doc Iinked before: https://quarto.org/docs/projects/quarto-projects.html#directory-metadata

If this file is in a folder, it will be merged to apply to any .qmd / .ipynb in a subfolder. See about data merging at https://quarto.org/docs/projects/quarto-projects.html#metadata-merging

[brainfo]

Hi, how to hosting a reveal.js from quarto to github pages?
I was using reveal.js and push to the gh-pages branch, but it doesn't work with the working folders of quarto:

.
├── HAPPY_files
│   └── libs
│       ├── clipboard
│       │   └── clipboard.min.js
│       ├── quarto-diagram
│       │   ├── mermaid.css
│       │   ├── mermaid-init.js
│       │   └── mermaid.min.js
│       ├── quarto-html
│       │   ├── light-border.css
│       │   ├── popper.min.js
│       │   ├── quarto-html.min.css
│       │   ├── quarto-syntax-highlighting.css
│       │   ├── tabby.min.js
│       │   ├── tippy.css
│       │   └── tippy.umd.min.js
│       └── revealjs
│           ├── dist
│           │   ├── reset.css
│           │   ├── reveal.css
│           │   ├── reveal.esm.js
│           │   ├── reveal.esm.js.map
│           │   ├── reveal.js
│           │   ├── reveal.js.map
│           │   └── theme
│           │       ├── fonts
│           │       │   ├── league-gothic
│           │       │   │   ├── league-gothic.css
│           │       │   │   ├── league-gothic.eot
│           │       │   │   ├── league-gothic.ttf
│           │       │   │   ├── league-gothic.woff
│           │       │   │   └── LICENSE
│           │       │   └── source-sans-pro
│           │       │       ├── LICENSE
│           │       │       ├── source-sans-pro.css
│           │       │       ├── source-sans-pro-italic.eot
│           │       │       ├── source-sans-pro-italic.ttf
│           │       │       ├── source-sans-pro-italic.woff
│           │       │       ├── source-sans-pro-regular.eot
│           │       │       ├── source-sans-pro-regular.ttf
│           │       │       ├── source-sans-pro-regular.woff
│           │       │       ├── source-sans-pro-semibold.eot
│           │       │       ├── source-sans-pro-semibolditalic.eot
│           │       │       ├── source-sans-pro-semibolditalic.ttf
│           │       │       ├── source-sans-pro-semibolditalic.woff
│           │       │       ├── source-sans-pro-semibold.ttf
│           │       │       └── source-sans-pro-semibold.woff
│           │       └── quarto.css
│           └── plugin
│               ├── highlight
│               │   ├── highlight.esm.js
│               │   ├── highlight.js
│               │   ├── monokai.css
│               │   ├── plugin.js
│               │   └── zenburn.css
│               ├── markdown
│               │   ├── markdown.esm.js
│               │   ├── markdown.js
│               │   └── plugin.js
│               ├── math
│               │   ├── katex.js
│               │   ├── math.esm.js
│               │   ├── mathjax2.js
│               │   ├── mathjax3.js
│               │   ├── math.js
│               │   └── plugin.js
│               ├── notes
│               │   ├── notes.esm.js
│               │   ├── notes.js
│               │   ├── plugin.js
│               │   └── speaker-view.html
│               ├── pdf-export
│               │   ├── pdfexport.js
│               │   └── plugin.yml
│               ├── quarto-line-highlight
│               │   ├── line-highlight.css
│               │   ├── line-highlight.js
│               │   └── plugin.yml
│               ├── quarto-support
│               │   ├── footer.css
│               │   ├── plugin.yml
│               │   └── support.js
│               ├── reveal-menu
│               │   ├── menu.css
│               │   ├── menu.js
│               │   ├── plugin.yml
│               │   ├── quarto-menu.css
│               │   └── quarto-menu.js
│               ├── search
│               │   ├── plugin.js
│               │   ├── search.esm.js
│               │   └── search.js
│               └── zoom
│                   ├── plugin.js
│                   ├── zoom.esm.js
│                   └── zoom.js
├── HAPPY.html
├── HAPPY.qmd
└── img
    ├── 41467_2024_46986_Fig1_HTML.png
    └── sample_wsi.jpg

How to render a repo that can be pushed to gh-pages?

[mcanouil]

Please open a new discussion and share a minimal reproducible example.
Thank you!