Xaringan: Including a .css file from an external url?

[ndphillips]

Is there an easy way to include a .css file from a URL using xaringan? What I'd like to do is the following in my yaml:

title: "x"
author: "x"
date: "x"
output:
  xaringan::moon_reader:
    css: ["default", "http://www.link.com/my_css.css"]
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

But that doesn't work, can you recommend an alternative method? Thanks!!

[yihui]

I cannot reproduce your issue. With your css settings, I can get this in the HTML output file:

<link rel="stylesheet" href="http://www.link.com/my_css.css" type="text/css" />

which means it works. Please show an actual example.

[jhelvy]

I too cannot get this to work.

It seems that the css file has to be in the local file system on my computer for the style sheet to work. In the example below, I've tried linking to a css file on github, but when I view the resulting html file the styling is not applied.

title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
institute: "RStudio, Inc."
date: "2016/12/12 (updated: `r Sys.Date()`)"
output:
  xaringan::moon_reader:
    css: ["default", "https://raw.githubusercontent.com/emse6574-gwu/2019-Fall/master/classNotes/css/classNotes.css", "https://raw.githubusercontent.com/emse6574-gwu/2019-Fall/master/classNotes/css/fonts.css"]
    lib_dir: libs
---

hello world

[gadenbuie]

@jhelvy The issue you're seeing is due to the way that GitHub serves raw files. They are always served with MIME type of text/plain and not text/css. As a result many browsers will block loading of the CSS files due to MIME type mismatch.

[tcgriffith]

try to put this in a codechunk

htmltools::includeCSS("https://raw.githubusercontent.com/emse6574-gwu/2019-Fall/master/classNotes/css/classNotes.css")

[jhelvy]

@jhelvy The issue you're seeing is due to the way that GitHub serves raw files. They are always served with MIME type of text/plain and not text/css. As a result many browsers will block loading of the CSS files due to MIME type mismatch.

That did it! It was GitHub. I put my .css file on a different server and it works fine.

In my particular example from above, since I'm using GitHub pages to host that website, I just had to change the url to the GitHub pages site, which serves the .css file as desired.

[rakdhan]

@jhelvy The issue you're seeing is due to the way that GitHub serves raw files. They are always served with MIME type of text/plain and not text/css. As a result many browsers will block loading of the CSS files due to MIME type mismatch.

That did it! It was GitHub. I put my .css file on a different server and it works fine.

In my particular example from above, since I'm using GitHub pages to host that website, I just had to change the url to the GitHub pages site, which serves the .css file as desired.

hey there, can you please show me the url difference between the previous and latest css link.
i kinda have similar issue with this css below and it won't work on my github pages of master branch,
<link rel="stylesheet" href="./http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> thanks

[tcgriffith]

remove ./