1,4c1,40
< {{- /* Head custom content area start */ -}}
< {{- /*     Insert any custom code (web-analytics, resources, etc.) - it will appear in the <head></head> section of every page. */ -}}
< {{- /*     Can be overwritten by partial with the same name in the global layouts. */ -}}
< {{- /* Head custom content area end */ -}}
---
> <!-- KaTeX support. Source: https://github.com/adityatelange/hugo-PaperMod/issues/236 -->
> <!-- I modified the condition to enable KaTeX. -->
> {{ if and .Site.Params.math (ne .Params.math false) }}
> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
>     onload="renderMathInElement(document.body,
>     {
>         delimiters: [
>             {left: '$$', right: '$$', display: true},
>             {left: '$', right: '$', display: false},
>             {left: '\\(', right: '\\)', display: false},
>             {left: '\\[', right: '\\]', display: true}
>         ]
>     }
> );"></script>
> {{ end }}
> <!-- End KaTeX support. -->
> 
> <!-- Image zoom effect -->
> <!-- Source: https://adityatelange.in/blog/hugo-image-zoom-in/#sample-image-with-zoom-in-effect -->
> <style>
>     @media screen and (min-width: 769px) {
>         /* .post-content is a class which will be present only on single pages
>             and not lists and section pages in Hugo */
>         .post-content input[type="checkbox"]:checked ~ label > img {
>             transform: scale(1.6);
>             cursor: zoom-out;
>             position: relative;
>             z-index: 999;
>         }
> 
>         .post-content img.zoomCheck {
>             transition: transform 0.15s ease;
>             z-index: 999;
>             cursor: zoom-in;
>         }
>     }
> </style>
> <!-- End image zoom effect -->