معالجة وتحويل معادلات Latex الى صيغة الرياضيات الطبيعية في مولد الصفحات Hugo

على مدونتي الاخرى استخدم مولد الصفحات الثابتة Hugo في صناعة المحتوى، ولاحظت اثناء التعديل عليها ان توليد الصفحات لا يدعم او يعالج المعادلات الرياضية المكتوبة بصيغة Latex.

بعد ما فحصت السورس كود اتضح لي انه لايوجد او لا يتم استدعاء اي مكتبة من المكاتب الي تستخدم في معالجة صيغة لاتيك، مثل MathJax و Katex وغيرهم.

سبق وجربت الاثنين على NextJS و Hugo. الـ MathJax فيها مزايا اكثر، والـKatex اخف واسرع بشكل عام وبحسب معلوماتي الكثير يفضلها للمدونات.

بدون دعم لمعالجة صيغة لاتيك لما تكتب معادلة وتنشر الصفحة يطلع الكود مثل ماهو، مثل هذا الشكل:

$\sum_{n=1}^{k} \frac{1}{n^2} = \frac{\pi^2}{6}$

في حين يفترض ان يتم تفسيره بحيث يطلع لنا شكل معادلة رياضية طبيعية كهذه:

وحتى نحل هذا الامر وباختصار راح نحتاج نستدعي مكتبة Katex من خلال استخدام الكود التالي:

في وقت نشر هذا المنشور اخر اصدار للمكتبة هو 0.16.7.

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

نحتاج نستدعي هذا الكود ضمن head.html، لهذا ممكن ننشئ ملف جديد بالاسم والمسار التالي، ضمن فولدر الستايل طبعًا. ويكون محتوى الملف هو الكود في الاعلى.

partials/katex.html

وحتى يتم استدعاء ملف katex.html في ملف head.html راح نحتاج نضيف الكود التالي في ملف الهيد.

{{- partial "katex.html" . -}}

وحتى تفعل او تعطل استدعاء المكتبة راح نحتاج نستخدم البرامتر التالي في ملفات المحتوى الماركداون.

---
math: true # true/false
---

بحيث نستطيع تفعيل او تعطيل استدعاء المكتبة بشكل منفرد لكل منشور (صفحة).