An update on code folding with blogdown + Academic theme

Code folding with the Academic theme

1. You’ll first need to add the codefolding javascript assets. Create a folder called js under the /static directory of your site. Add the file codefolding.js.

2. Create a folder called css under the /static directory of your site. Add the file codefolding.css. This is the css for the buttons that will appear on your posts.

3. Add the file article_footer_js.html to the /layouts/partials directory of your site.

4. Add the file header_maincodefolding.html to the /layouts/partials directory of your site.

5. If you do not already have a file head_custom.html in the /layouts/partials directory, create it. Add the following lines of code to the file:

   {{ if not site.Params.disable_codefolding }}
     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
     <link rel="stylesheet" href="{{ "css/codefolding.css" | relURL }}" />
   {{ end }}

6. If you do not already have a file site_footer.html in the /layouts/partials directory, copy it over from /themes/hugo-academic/layouts/partials. Add the following lines of code to it, somewhere towards the bottom (see my version for example):

   <!-- Init code folding -->
   {{ partial "article_footer_js.html" . }}

7. If you do not already have the file page_header.html in the /layouts/partials directory, copy it over from /themes/hugo-academic/layouts/partials. Add the following line of code at appropriate points so that your posts will include the “Show/hide code” button:

    {{ partial "header_maincodefolding" . }}

   Note that you’ll likely need to add it twice due do conditionals in page_header.html. For example, my version of the file includes the partial at lines 62 and 91.

8. Modify your params.toml file (in the directory /config/_default) to include the following lines:

   ############################
   ## Code folding
   ############################
   
   # Set to true to disable code folding
   disable_codefolding = false
   # Set to "hide" or "show" all codes by default
   codefolding_show = "show"
   # Set to true to exclude the "Show/hide all" button
   codefolding_nobutton = false

Using the codefolding parameters

The params.toml file now has three parameters that control code folding:

• disable_codefolding controls whether to load the code folding scripts on your site. Set it to true to disable code folding globally.
• codefolding_show controls whether code blocks will be shown or hidden by default. If your previous posts have lots of code in them, set the default to show to minimize changes in the appearance of your site.
• codefolding_nobutton controls whether the “Show/hide code” button will appear at the top of posts that include code blocks. Set it to true to disable the button but keep the other code folding functionality.

The above parameters are defaults for your entire site. To over-ride the defaults, you can also set the parameters in the YAML header of any post:

• Set disable_codefolding: true to turn off code folding for the post.
• Set codefolding_show: hide to hide the code blocks in the post (as in this post).
• Set codefolding_nobutton: true to turn off the “Show/hide code” button at the top of the post (as in the present post).

I hope these instructions work for you. If not, questions, corrections, and clarifications are welcome. Happy blogging, y’all!