Customize anchor-sections.css with blogdown

Question

I saw in the html_document help page an easy-way to customize the anchor style by adapting the anchor-section class. This works well for individual Rmd documents.

I would like to know how to achieve the same thing within blogdown. I thought that I could simply customize the static/rmarkdown-libs/anchor-sections/anchor-sections.css file.

This actually work temporarily, but is not working properly since this file is automatically regenerated every time any Rmd file is rendered.

I'm sorry I did not include a reprex, this is more of a technical question.

Succubus

You shouldn't modify any files under static/rmarkdown-libs/ since it is automatically created and will be overwritten, as you have discovered. You need to create another CSS file under static/, and include it in one of your (or your theme's) template files in the layouts/ folder. The precise way to to include it depends on the theme you use. Without a reprex, it's hard to tell you a general solution. You may study this minimal theme to understand how things work: bookdown.org/yihui/blogdown/templates.html and hopefully figure out how to make your custom CSS work with your theme. – Archdiocese

Thanks @YihuiXie - I was finally able to do what I want by creating a /static/css/custom.css file that I added in my Rmd YAML header with css: "/css/custom.css". This way, I keep your library (the js code is perfect for my need) and I overwrite your style. – Succubus

That surely works, but you'd have to do this for every post. If you could include it in a template file, it will work for all pages. As I said, it's too hard to tell what you need to do precisely because it depends on the theme, and we are not given the source of your site (if it's on Github, a link to your repo would be enough). – Archdiocese

The source is here: github.com/jplecavalier/personal-website/tree/dev. Note that I still have not push a single blog post, I'm still working on my first, it should be up soon. – Succubus

This is where your theme loads CSS files: github.com/jplecavalier/personal-website/blob/dev/themes/… I'm not familiar with the codebase of the academic theme, but I'm sure you can at least add a line like <link rel="stylesheet" href="/css/custom.css"> to the template. – Archdiocese