Maëlle Salmon’s article about Rmd and Hugo

Han Oostdijk


Date last run: 29Apr2020


When I saw the article Miscellaneous Wisdom about R Markdown & Hugo Gained from Work on our Website by Maëlle Salmon I was interested to try out the part where she shows how to use a knitr hook to change the output of a plot chunk. In this blog entry I note down my findings.

I could not get it to work because the generated html for the figure specified the wrong directory (folder). Studying the generated html I saw that references point back to the public folder of the generated website by prefixing with ../../../../../ e.g. <link rel="stylesheet" href="../../../../../css/style.css" /> . If I do that also for the file name of the image the image is indeed displayed.

I am not sure why it works for Maëlle without this change but in the past I often have had trouble with the paths of generated images. So probably my Hugo configuration is not standard. As an aside I also do not use pandoc to generate the pages of the website: see Custom rendering of Hugo posts and notes .

knitr hook for plot

So I have included the following setup chunk (copied the one by Maëlle and added inserted the ../../../../../ to find the image file 5 levels upwards) :

`​``{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
  # from
  plot = function(x, options) {
    hugoopts <- options$hugoopts
      "{", "{<figure src=", # the original code is simpler
      # but here I need to escape the shortcode!
      # '"', x, '" ', # HOQC replaced by next line:  
      '"../../../../../', x, '" ',
      if (!is.null(hugoopts)) {
          sep = " "

Using the Hugo options for the figure shortcode

I use the following chunk to create the plot. For visibility reasons the chunk specification is spread over more than one line. In actual use the specification should be in one line.

`​``{r pressure, echo=FALSE, 
   hugoopts = list(alt="informative alternative text", 
      caption="this is a caption", 

This produces the (very interesting) plot:

informative alternative text

this is a caption

The generated figure specification in the html file

The figure above is produced by the following html:

    <img src="../../../../../post/2020-04-29-maelle-salmon-article-about-rmd-and-hugo_files/figure-html/pressure-1.png"
         alt="informative alternative text" 
            <p>this is a caption</p>

The generated figure specification in the md file

{​{<figure src="../../../../../post/2020-04-29-maelle-salmon-article-about-rmd-and-hugo_files/figure-html/pressure-1.png" 
alt="informative alternative text" 
caption="this is a caption" 

The code for the Hugo shortcode for figure

The code for the Hugo shortcode for figure can be found here . Here we see that this shortcode has the following parameters:

Session Info

This document was produced on 29Apr2020 with the following R environment:

  #> R version 4.0.0 (2020-04-24)
  #> Platform: x86_64-w64-mingw32/x64 (64-bit)
  #> Running under: Windows 10 x64 (build 18363)
  #> Matrix products: default
  #> locale:
  #> [1] LC_COLLATE=English_United States.1252 
  #> [2] LC_CTYPE=English_United States.1252   
  #> [3] LC_MONETARY=English_United States.1252
  #> [4] LC_NUMERIC=C                          
  #> [5] LC_TIME=English_United States.1252    
  #> attached base packages:
  #> [1] stats     graphics  grDevices utils     datasets  methods   base     
  #> loaded via a namespace (and not attached):
  #>  [1] compiler_4.0.0 magrittr_1.5   tools_4.0.0    glue_1.4.0     stringi_1.4.6 
  #>  [6] knitr_1.28     stringr_1.4.0  xfun_0.13      rlang_0.4.5    evaluate_0.14 
  #> [11] purrr_0.3.4