blog/themes/mytheme/layouts/partials/head.html

<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>

<script src="https://cdn.tailwindcss.com"></script>

{{ if .IsPage }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" onload="renderMathInElement(document.body);"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
            delimiters: [
                {left: "$$", right: "$$", display: true},
                {left: "$", right: "$", display: false}
            ]
        });
    });
</script>
{{ end }}

<script>
    tailwind.config = {
      theme: {
        fontFamily: {
            'sans': ["'Source Sans 3'", "Pretendard", 'sans-serif'],
            'mono': ['monospace'],
        },
        extend: {
          lineHeight: {
            'extra-loose': '3',
            'seperate': '4'
          }
        }
      }
    }
</script>
<style type="text/tailwindcss">
    @layer base {
      h1 {
        @apply text-5xl;
      }
      h2 {
        @apply text-4xl;
      }
      h3 {
        @apply text-3xl;
      }
      h4 {
        @apply text-2xl;
      }
      h5 {
        @apply text-xl;
      }
      h6 { @apply text-lg; }
      h1, h2, h3, h4, h5, h6 {
        @apply font-semibold;
        @apply leading-[4rem];
        @apply mb-6;
      }
      p { @apply mb-6; }
      .katex-display {
        @apply m-8;
      }
    }
  </style>