Search code examples
cssyamlquarto

Quarto with a CSS in the parent directory

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: ...
---

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.

Solution

  • 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.