როგორ დავამატოთ LaTeX განტოლებები Astro ბლოგის პოსტებში

ეს დოკუმენტი აჩვენებს როგორ გამოიყენოთ LaTeX განტოლებები თქვენი Markdown ფაილებში AstroPaper-ზე. LaTeX არის მძლავრი ტიპოგრაფიული სისტემა, რომელიც ხშირად გამოიყენება მათემატიკური და სამეცნიერო დოკუმენტებისთვის.

ფოტო Vitaly Gariev-ის მიერ

შინაარსის ცხრილი

ინსტრუქციები

ამ განყოფილებაში ნახავთ ინსტრუქციებს, თუ როგორ დავამატოთ LaTeX-ის მხარდაჭერა თქვენი Markdown ფაილებში AstroPaper-ზე.

1. დააინსტალირეთ საჭირო remark და rehype დამატებები შემდეგი ბრძანების გაშვებით:

   1
   pnpm install rehype-katex remark-math katex

2. განაახლეთ Astro კონფიგურაცია ამ დამატებების გამოსაყენებლად:

   1
   // ...
   2
   import remarkMath from "remark-math";
   3
   import rehypeKatex from "rehype-katex";
   4
   
   5
   export default defineConfig({
   6
     // ...
   7
     markdown: {
   8
       remarkPlugins: [
   9
         remarkMath,
   10
         [remarkToc, { heading: "(table of contents|შინაარსის ცხრილი)" }],
   11
         [remarkCollapse, { test: "(Table of contents|შინაარსის ცხრილი)" }],
   12
       ],
   13
       rehypePlugins: [rehypeKatex],
   14
       shikiConfig: {
   15
         // მეტი თემისთვის, ეწვიეთ https://shiki.style/themes
   16
         themes: { light: "min-light", dark: "night-owl" },
   17
         wrap: false,
   18
       },
   19
     },
   20
     // ...
   21
   });

3. შემოიტანეთ KaTeX CSS თქვენი პოსტის განლაგების ფაილში

   KaTeX სტილების კოდ-დაყოფის მეშვეობით ეფექტურად ჩატვირთვის უზრუნველსაყოფად, შემოიტანეთ CSS პირდაპირ თქვენი პოსტის განლაგებაში (მაგ., src/layouts/PostDetails.astro). ეს საშუალებას აძლევს Astro-ს აგების მეშვეობით ავტომატური კოდ-დაყოფა და ბუნდელის ოპტიმიზაცია.

   1
   ---
   2
   import { render, type CollectionEntry } from "astro:content";
   3
   import Layout from "@/layouts/Layout.astro";
   4
   // ... სხვა შემოტანები
   5
   
   6
   import "katex/dist/katex.min.css";
   7
   
   8
   export interface Props {
   9
     // ...
   10
   }
   11
   ---

   ეს მიდგომა აღემატება გარე CDN სტილების დაკავშირებას, რადგან:

   • არა ბლოკირდება რენდერი: CSS იკრიბება თქვენი გვერდის JavaScript-ის ერთად, არა ცალკე გამოკრებულია
   • კოდ-დაყოფა: CSS მხოლოდ იმ გვერდებზე ჩაიტვირთება, რომლებიც რეალურად მათემატიკურ განტოლებებს იყენებენ
   • ავტომატური ოპტიმიზაცია: Astro ავტომატურად ამცირებს CSS-ს და ოპტიმიზებს
   • ოფლაინ მხარდაჭერა: არ არის გარე CDN დამოკიდებულება—ყველაფერი თვითმომსახურებელი

4. ბოლო ეტაპად, დაამატეთ ტექსტის ფერი katex-ზე typography.css-ში.

   1
   @plugin "@tailwindcss/typography";
   2
   
   3
   @layer base {
   4
     /* სხვა კლასები */
   5
   
   6
     /* Katex ტექსტის ფერი */
   7
     .prose .katex-display {
   8
       @apply text-foreground;
   9
     }
   10
   
   11
     /* ===== კოდის ბლოკები და სინტაქსის ხაზგასმა ===== */
   12
     /* სხვა კლასები */
   13
   }

და voilà, ეს სეტაპი საშუალებას გაძლევთ დაწეროთ LaTeX განტოლებები თქვენი Markdown ფაილებში, რომლებიც სათანადოდ გამოჩნდება საიტის აგების დროს. როდესაც თქვენ ეს გააკეთებთ, დოკუმენტის დანარჩენი ნაწილი სწორად დაიხატება.

წრფივი განტოლებები

წრფივი განტოლებები იწერება ერთი დოლარის ნიშნებს შორის $...$. აქ არის რამდენიმე მაგალითი:

1. ცნობილი მასა-ენერგიის ეკვივალენტობის ფორმულა: $E = mc^2$
2. კვადრატული ფორმულა: $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$
3. ეილერის იდენტობა: $e^{i\pi} + 1 = 0$

ბლოკის განტოლებები

უფრო რთული განტოლებებისთვის ან როცა გსურთ განტოლება დამოუკიდებელ სტრიქონზე იყოს, გამოიყენეთ ორმაგი დოლარის ნიშნები $$...$$:

გაუსის ინტეგრალი:

1
$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

რიმანის ზეტა ფუნქციის განმარტება:

1
$$ \zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s} $$

მაქსველის განტოლებები დიფერენციალური ფორმით:

1
$$
2
\begin{aligned}
3
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
4
\nabla \cdot \mathbf{B} &= 0 \\
5
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
6
\nabla \times \mathbf{B} &= \mu_0\left(\mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t}\right)
7
\end{aligned}
8
$$

მათემატიკური სიმბოლოების გამოყენება

LaTeX უზრუნველყოფს უამრავ მათემატიკურ სიმბოლოს:

• ბერძნული ასოები: $\alpha$, $\beta$, $\gamma$, $\delta$, $\epsilon$, $\pi$
• ოპერატორები: $\sum$, $\prod$, $\int$, $\partial$, $\nabla$
• ურთიერთობები: $\leq$, $\geq$, $\approx$, $\sim$, $\propto$
• ლოგიკური სიმბოლოები: $\forall$, $\exists$, $\neg$, $\wedge$, $\vee$