Is there a way to use common css in learnr tutorials?

Question

In the learnr R package, one suggestion for distribution is to bundle up tutorials into a package. However, to include custom css for a tutorial, it seems to require putting your .css file inside the unique subdirectory associated with each tutorial as:

+ inst/
|  + tutorials/
|  |  +- tutorial_A/
|  |  |  +- tutorial_A.rmd
|  |  |  +- custom.css
|  |  +- tutorial_B/
|  |  |  +- tutorial_B.
|  |  |  +- custom.css

The css file can be included with the yaml argument css: custom.css. Is there a way to simply put a single custom.css file in a higher-level directory (say as inst/tutorials/custom.css if it is shared by both tutorials? I've tried both relative and absolute paths, and nothing seems to work including the rather exotic yaml css: !expr system.file("tutorials/custom.css", package="my_package").

Note: I'm referring to an installed package and a tutorial loaded with learnr::run_tutorial('tutorial_A', 'my_package'). Simply running the Rmarkdown itself works.

score 3 · Answer 1 · answered Jul 08 '20 at 18:32

3

as far as I'm aware the css file has to be within the tutorial environment in a folder called css. I've been working on a package of learnr tutorials recently, and haven't found a way to work from a single style sheet across multiple tutorials.

answered Jul 08 '20 at 18:32

Andy Field

113
6

This was the answer for me :) – thus__ Dec 10 '20 at 15:38

score 2 · Answer 2 · answered Aug 16 '20 at 23:14

After much struggle, a partial solution is to create an html file that includes the desired css. For example, custom-css.html placed in inst/tutorials/. In my case, custom-css.html is simply a wrapper for the css as

<style type="text/css">

... all desired css ...

</style>

Then, one can include this in the knitted tutorial via standard yaml frontmatter

output: 
  learnr::tutorial:
    includes:
      in_header: !expr system.file("tutorials/custom-css.html",package="my_package")

This fix is only partial because the learnr tutorial-format.htm template includes the in_header files earlier than css files. Thus, some default css cannot be modified in this fashion.

This worked for me and can be combined with this list of CSS reset/removals: https://stackoverflow.com/questions/15901030/reset-remove-css-styles-for-element-only — GaelS, Mar 10 '22 at 15:40

Is there a way to use common css in learnr tutorials?

2 Answers2