Quarto with a CSS in the parent directory

Question

I want my CSS file to be shared by several Quarto R presentations, so this CSS file should be placed in a top directory. But Quarto seems to allow CSS files only in the same directory, or in a child directory. I have tried all these configurations without success, starting with the css option in the YAML header:

---
title: "my title"
author: "my name"
format:
  revealjs: 
    css: ...
---

• ../styles.css
• "../styles.css"
• ..\styles.css
• "..\styles.css"
• symlink 'style.css'
• https://raw.githubusercontent.com/zoometh/thomashuet/master/teachings/stats/styles.css
• "https://raw.githubusercontent.com/zoometh/thomashuet/master/teachings/stats/styles.css"
• https://github.com/zoometh/thomashuet/blob/main/teachings/stats/styles.css
• C:/styles.css
• "C:/styles.css"

But also outside the YAML, in the narrative parts and code chunks

<link href="../styles.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" type="text/css" href="C:/Rprojects/thomashuet/teachings/stats/styles.css">

<link href="https://raw.githubusercontent.com/xxx/xxx/master/teachings/stats/styles.css" rel="stylesheet">

``{css}
<link href="https://raw.githubusercontent.com/zoometh/thomashuet/master/teachings/stats/styles.css" rel="stylesheet" type="text/css">  
``

<link rel="stylesheet" type="text/css" href="C:/Rprojects/thomashuet/teachings/stats/styles.css">

So relative paths, absolute paths (local or GitHub), symbolic links, calls outside the YAML header, nothing works.

Answer 1

To share a common CSS stylesheet among several RevealJs presentations, using a CSS stylesheet stored in a GitHub repo seems a good idea.

But using raw.githubusercontent to link the stylesheet will not work, because raw.githubusercontent makes all files use the text/plain MIME type, even if the file is a CSS or JavaScript file. Therefore, the following will not work.

<link href="https://raw.githubusercontent.com/zoometh/thomashuet/master/teachings/stats/styles.css" rel="stylesheet" type="text/css">

One possible solution to this problem is to use jsDelivr.net (A free CDN for open-source projects). We can follow the steps described in this answer,

Steps:

• Find your link on GitHub, and click to the "Raw" version. Copy the URL. In your case which is, https://raw.githubusercontent.com/zoometh/thomashuet/main/teachings/stats/styles.css.

• Change raw.githubusercontent.com to cdn.jsdelivr.net.

• Insert /gh/ before your username.

• Remove the branch name (main in this case).

So the final URL would look like, https://cdn.jsdelivr.net/gh/zoometh/thomashuet/teachings/stats/styles.css. Now you can use this URL within a link tag in a html file and then include the html file using the include-in-header yaml key in the qmd file.

style.html

<link href="https://cdn.jsdelivr.net/gh/zoometh/thomashuet/teachings/stats/styles.css" rel="stylesheet" type="text/css">

presentation.qmd

---
title: "my title"
author: "my name"
format:
  revealjs: 
    include-in-header: style.html
---

---

Another good solution to this problem is to use Github pages which will host your repo at a special URL like https://‹your_github_userName›.github.io/‹repo›. And you can use this URL to point to a specific folder/files in your repo.