Syntax highlighting for Xmin blogdown hugo theme

2
votes

I have created a blog with the Xmin theme, but the code syntax is not hghlighted by default. So, I am following the instructions here to highlight the code.

Based on the instructions, I have put the following code:

In head_custom.html:

<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css" rel="stylesheet">

and in foot_custom.html:

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/r.min.js"></script>

<script>
hljs.configure({languages: []});
hljs.initHighlightingOnLoad();
</script>

In both files, I did not put <!DOCTYPE html> at the top because there was no instruction to do that.

After this, I saved the files and run blogdown:::serve_site(). But the syntax is not highlighted. What am I missing here?

Another question: If I want to highlight the syntax with different colors, what exactly do I need to copy paste? I have looked into https://cdnjs.com/libraries/highlight.js but do not understand how can I use it.

Edit:

  • Github repo: https://github.com/durraniu/rgems

  • Session Info:

    R version 4.0.2 (2020-06-22) Platform: x86_64-w64-mingw32/x64 (64-bit) Running under: Windows 10 x64 (build 19041)

     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   [7] base     

 loaded via a namespace (and not attached):  [1] Rcpp_1.0.5      bookdown_0.20   digest_0.6.25   later_1.1.0.1    [5] mime_0.9        R6_2.4.1        jsonlite_1.7.0  magrittr_1.5     [9] evaluate_0.14   blogdown_0.20   rlang_0.4.7     promises_1.1.1  [13] rstudioapi_0.11 rmarkdown_2.3   tools_4.0.2     servr_0.18      [17] httpuv_1.5.4    xfun_0.16       yaml_2.2.1      compiler_4.0.2  [21] htmltools_0.5.0 knitr_1.29
1
rhugoblogdown
Could you provide a full reproducible example (e.g. a Github repo) as well as your sessionInfo()? – Yihui Xie
@YihuiXie, I have added the link to Github repo and sessionInfo(). Thank you. – umair durrani

1 Answers

1
votes

The problem is that you have both layouts/partials/foot_custom.html and themes/hugo-xmin/layouts/partials/foot_custom.html. The former will override the latter (more info in Section 2.6 of the book).

To solve your problem, move the code from the latter foot_custom.html to the former.