The website of the unofficial Xaringan theme of the University of Bordeaux

Hi, I’m Laurent Bergé, and that’s the page of a Xaringan theme I created. I hope it can be useful. It’s MIT licensed so feel free to do whatever you want with it.

How to?

Just add the following three lines in your YAML header and you’re good to go.

css: "path_to/ub_theme.css"
includes:
  after_body: "path_to/ub_theme.html"

Update 2023: The theme does not work with recent versions of remark.js. I am not planning to fix it. Now you need four lines of code (to use an old remark version):

xaringan::moon_reader:
  chakra: libs/remark-latest.min.js
  css: "path_to/ub_theme.css"
  includes:
    after_body: "path_to/ub_theme.html"

The files can be found in the Github repo.

Tutorial

Here is a set of slides presenting the main features of the theme.

The source code of the presentation is here.

Why?

In the Fall 2021, fresh from having obtained a tenured position at the University of Bordeaux, I had to prepare new courses.

I finally decided to ditch Beamer for my courses (and Gosh I like Beamer) to start working with HTML presentations, i.e. Xaringan.

Why change? I’m not proud to say that the main motivating reason was to add GIFs in my presentations….

The transition quickly revealed to be painful however. I wanted the stuff to look in a certain way and knew I had to invest a bit of time on customization. I thought my journey was only about writing a few lines of CSS code. I couldn’t be more wrong.

My main source of frustration was the figure heights. Most of the time my figures were too tall, kicking the text out of the scene. I ended up with a constant feeling of bullying, unable to add a new figure without fear. Looks silly, right? Don’t laugh, that really drove me nuts!

The problem is: you can’t get around the figure height problem with just CSS. So I had to roll up my sleeves and start dealing directly with the fellow having all the powers: javascript. That was a rocky trip since it was the first time I really wrote JS code. I learned a lot. And now the heights are automatically adjusted.

Along the way, as I harnessed the power of javascript, I included more and more features. Although I parted with it, Beamer still lives in my heart and you may notice that some of these features only stem from Beamer nostalgia.

That’s the story. A few thousand lines of code, dozens of hours… just to place a few GIFs in a presentation.

Changelog

2023-10-27 - fix rendering of the tutorial - add limitation: theme not working with recent remark versions