How to open listing items in a new tab when using reveal.js slide shows?

[TarJae]

Update:
Thanks to @mcanouil for clarification. I added the remaining information to be complete.

Description

I asked this on stackoverflow https://stackoverflow.com/questions/79502269/how-to-open-listing-items-in-a-new-tab-when-using-reveal-js-slide-shows.

I'm working on a Quarto blog where each post consists of a reveal.js slide show. My index.qmd file uses the listing: feature to automatically list all posts inside the posts/ folder.

However, when I open a reveal.js slide show, I cannot easily return to the main index page to navigate to another slide show. This issue only occurs with reveal.js presentations - if the posts were regular articles, I could simply use the browser's back button or site navigation.

To solve this, I want each listed item in index.qmd to open in a new tab (i.e., add target="_blank" to each link). This way, the index page remains open, and I can easily switch between presentations.

The newly added information:
To solve this, I want each listed item in index.qmd to open in a new tab (i.e., add target="_blank" to each link). This way, the index page remains open, and I can easily switch between presentations.

In index.qmd, I attempted:

---
listing:
  contents: posts
  sort: "date desc"
  type: default
  image-placeholder: "images/logo.png"
  categories: true
  sort-ui: false
  filter-ui: false
  format: "[{{title}}](../{{path}}){target='_blank'}"  # Invalid property error
---

But this gives an error:

Property name 'format' is invalid

Is there a way to modify Quarto's listing behavior to make all links open in a new tab?

Alternatively, is there a way to customize the output format of listing: to insert target="_blank" dynamically?

Additional info:

• I'm using Quarto's default blog setup with listing: in index.qmd.

• This issue only happens with reveal.js slide shows.

• For regular posts, I can return to the index page without problems.

• I want a dynamic solution instead of manually writing links for each post.

I can't provide a minimal reproducible example because this requires a full Quarto project setup.

[mcanouil]

I asked this on stackoverflow https://stackoverflow.com/questions/79502269/how-to-open-listing-items-in-a-new-tab-when-using-reveal-js-slide-shows.

Be aware that this (i.e., cross-posting) is considered by many on the internet as a "bad practice" to say the least as it is not respectful of the time spent on the platforms by users trying to help as they might be spending time addressing an issue already solved elsewhere.

Also, this makes your current post incomplete.

So, I'm going to request two things to help future readers:

1. mention on your StackOverflow post that the follow up is here, in order to avoid having StackOverflow users waste their time.
2. update your post to be complete. I mean, don't request user coming here to have to switch between platforms to understand the question.

Thank you for your understanding.

Reminder that the documentation on listings are:

• https://quarto.org/docs/websites/website-listings.html
• https://quarto.org/docs/websites/website-listings-custom.html
• https://quarto.org/docs/reference/projects/websites.html#listings

[TarJae]

Thank you very much for this clarification. I am very interested in doing things correctly.

1. I mentioned on StackOverflow that the follow-up is here.
2. I updated the post to be complete.

[cderv]

I don't think we have a configuration for that. I see two features you could leverage

• External Links can be configured to open in a new window. But your presentation are internals 🤔
• With Custom listing you can do your own template and add the attributes wherever you want. So for your presentation listing you could use a custom one.

Last idea is a workaround:

• Either post process your html output (using post-render script)
• Either add a JS after body in the listing page that would find the link you want end add the target attributes. It is post processing but live in browser when the page loads.

Hope it helps

[mcanouil]

Note that this can be done at the EJS level. It would only mean that target is now reserved for Quarto as path is currently.

[mcanouil]

I have a proof of concept (#12293): adding <%= item.target ? `target="${item.target}"` : "" %> next to href="<%- item.path %>" in the default listings allows to set target.

From quarto create project blog:

---
title: "12276"
listing:
  contents:
    - path: posts/post-with-code/index.qmd
      target: _blank
    - path: posts/welcome/index.qmd
  sort: "date desc"
  type: default
  categories: true
  sort-ui: false
  filter-ui: false
page-layout: full
title-block-banner: true
---

Screen.Recording.2025-03-14.at.21.43.08.mov

[TarJae]

Thank you very much for your contribution. The issue only arises when the blog post is a revealjs presentation. Additionally, I don't fully understand how I'm supposed to install the updated version of Quarto on my system.

Once more for clarity: I have a Quarto blog with an index.qmd page that references the folder posts via listing: contents: posts. Within the posts folder are individual blog entries—for example, Post A in folder A, Post B in folder B, etc. Each of these folders (A, B, etc.) contains an index.qmd file with the respective blog entry. Up to this point, everything works fine. However, the crucial detail is that all these posts are revealjs presentations.

I tried to install the updated Quarto version via quarto-cli as described here:
https://github.com/mcanouil/quarto-cli/tree/feat/listing-allow-target-href
Unfortunately, I couldn't manage this successfully. It ended with the error message: "The project is out-of-sync -- use renv::status() for details," and my blog no longer started. Anyway, I've reinstalled Quarto from scratch, deleted the quarto-cli folder, and now everything runs as before.

I just don't understand how to navigate back from a revealjs slideshow to the listing overview. Thanks again for your effort and time!

[thealanjason]

Hi @TarJae. I was facing a similar issue.
You could have a look at https://quarto.org/docs/presentations/revealjs/presenting.html#navigation-options
Setting history: false in the revealjs options will allow you to use the arrow keys on the keyboard for navigating the slides, but when you click the Back button on the browser, this will take you back to the listing overview.

I hope this helps you :)

[TarJae]

thank you that helps.

[TarJae]

Meanwhile I have created a solution using lua filter:

in RStudio go and create a new quarto blog.
in posts/post-with-code example replace code with this (to mimic a revealjs presentation):

---
title: "Post With Code"
format: 
  revealjs:
    slide-level: 2
    theme: simple
    transition: fade
    smaller: true
    scrollable: false
    center-title-slide: true
    footer: This is my revealjs presentation. Normally it is not possible to get back to index site. But with lua filter we can achieve this!
author: "Harlow Malloc"
date: "2025-03-24"
categories: [news, code, analysis]
filters:
  - reveal-header.lua
image: "image.jpg"
---

# Slide 1

- Hi

# Slide 2

-   Hello!

add these two files to the posts/post-with-code folder:
a.) click-here.png (you download it as icon)

b.) reveal-header.lua containing this code (simple a text file with ending .lua instead of .txt):

function Header(el)
  quarto.doc.include_text("in-header", [[
  <div id="home-button">
    <a href="https://stackoverflow.com/questions/tagged/r?tab=Newest" class="btn btn-lg btn-success">
      <img src="click-here.png" alt="Home" style="height: 20px; vertical-align: middle; margin-right: 8px;" /> </a>
  </div>
  ]])
end

where the StackOverflow page is only the placeholder for the index site of your online blog.

Here is how it works:

[mcanouil]

You don't need a LUA filter for this, it's a bit overkill in my opinion (it's also a bit "weird" to add HTML content such as a link in the header part of the page).

include-in-header:
  - text: |
      <div id="home-button">
        <a href="https://stackoverflow.com/questions/tagged/r?tab=Newest" class="btn btn-lg btn-success">
          <img src="click-here.png" alt="Home" style="height: 20px; vertical-align: middle; margin-right: 8px;" />
        </a>
      </div>