المعادلات الرياضية في الويب (KaTeX)

Mohanad Alrwaihy

July 5, 2023

290

0

KaTeX هي مكتبة تنضيد للمعادلات الرياضية مفتوحة المصدر للويب تستخدم لتقديم تدوينات TeX كتدوينات HTML عادية.

4 دقائق للقراءة

KaTeX

لعرض صيغ الرياضيات على الويب ، لدينا خيارات متعددة للاختيار من بينها والتي يمكن أن تؤدي إلى عرض الصيغ الرياضية بطريقة قياسية قابلة للقراءة ومفهومة.

لدينا ثلاث طرق رئيسية لعرض المعادلات الرياضية على الويب 👇

  1. بأستخدام HTML فقط - يعتمد على الرموز والTags الخاصة بHTML وأضافة إلى التصميم بأستخدام CSS
  2. لغة الترميز الرياضي (MathML) - عن طريق HTML5 وأستخدام علامة ال</math>
  3. عن طريق أستخدام KaTeX أو MathJax (الطريقة المفضلة)

في هذه المدونة، سنركز على استخدام KaTeX لعرض المعادلات الرياضية.

ما هو KaTeX؟

هي واجهة برمجة تطبيقات بسيطة تستخدم لعرض المعادلات الرياضية في اغلب المتصفحات وهي سريعة ولا تعتمد على أي تبعيات.

الميزات

  • السرعة: تعرض KaTeX المعادلات الرياضية بشكل متزامن ولا تحتاج إلى إعادة تدفق الصفحة.
  • جودة الطباعة: يعتمد تخطيط KaTeX على Donald Knuth’s TeX ، المعيار الذهبي لتنضيد الرياضيات.
  • احتواء ذاتي: لا يحتوي KaTeX على تبعيات ويمكن تجميعه بسهولة مع موارد موقع الويب الخاص بك.
  • يمكن أستخدامه في الServer Side Rendering: ينتج KaTeX نفس النتيجة بغض النظر عن المتصفح أو البيئة ، بحيث يمكنك تقديم التعبيرات مسبقًا باستخدام Node.js وإرسالها بتنسيق HTML عادي.

شروط مهمة

قبل أن نتعرف على KaTeX دعنا نتعرف أولاً على الموضوعات المتعلقة بـ KaTeX التي يمكن أن تكون مربكة لفهمها في البداية.

TeX

هو نظام تنضيد رقمي لتعبيرات الرياضيات تم تصميمه وكتابته من قبل عالم الكمبيوتر والأستاذ Donald Knuth. لقد وضع معيارًا لكتابة تعابير الرياضيات المهنية للمنشورات.

LaTeX

هو نظام برمجي لإعداد الوثائق يستخدم على نطاق واسع في الأوساط الأكاديمية لتوصيل ونشر الوثائق العلمية. يستخدم LaTeX برنامج تنضيد TeX لتنسيق مخرجاته.

KaTeX

هي مكتبة جافا سكريبت عبر المتصفح تستخدم لتقديم وعرض الرموز الرياضية البسيطة أو المعقدة في متصفحات الويب. يسمح KaTeX باستخدام برنامج تنضيد TeX مباشرة في ملف HTML عن طريق تحويل بناء الجملة TeX إلى MathML وعرضه باستخدام CSS لمطابقة تنضيد TeX.

مثال KaTeX

لعرض تدوين الرياضيات باستخدام KaTeX نحتاج إلى تثبيته أولاً (معلومات أكثر على ذلك في القسم التالي) ولكن دعنا نرى كيف سيبدو 👇

CSHTML
<!-- Block -->
<span>The infinite sum $$\sum_{n = 1}^{+\infty} \frac{1}{n^2}$$</span>
<!-- Inline -->
<span>is equal to the real number \( \frac{\pi ^ 2}{6}\)</span>

MathML

لغة الترميز الرياضي ( MathML ) تستخدم لوصف التدوين الرياضي والتقاط كل من هيكله ومحتواه وهو حاليًا جزء من HTML5 ويمكن استخدامه مع علامة </math>

مثال MathML

CSHTML
<p>
  The infinite sum
  <math display="block">
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
      <mfrac>
        <mn>1</mn>
        <msup>
          <mi>n</mi>
          <mn>2</mn>
        </msup>
      </mfrac>
    </mrow>
  </math>
  is equal to the real number
  <math display="inline">
    <mfrac>
      <msup>
        <mi>π</mi>
        <mn>2</mn>
      </msup>
      <mn>6</mn>
    </mfrac></math
  >.
</p>

لسوء الحظ ، MathML هي الطريقة الوحيدة لاستخدام المعادلات الرياضية باستخدام HTML ولهذا السبب هناك العديد من المكتبات مثل KaTeX و MathJax التي ستحول جملة TeX إلى MathML وعرضه باستخدام تنضيد TeX.

أستخدم KaTeX

لتثبيت KaTeX تحقق من وثائق KaTeX التثبيت لمزيد من التفاصيل.

التثبيت في المتصفح

أسهل طريقة للبدء بـ KaTeX هي استيراد الScripts والStyles. يمكنك التحقق من مستندات تثبيت المتصفح لمزيد من الخيارات.

قالب بداية

يمكننا استخدام KaTeX مباشرة على المتصفح عن طريق الScripts الضرورية والStyles👇

CSHTML
<!DOCTYPE html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css" integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js" integrity="sha384-cpW21h6RZv/phavutF+AuVYrr+dA8xD9zs6FwLpaCct6O9ctzYFfFr4dgmgccOTx" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
  </head>
  ...
</html>

والأن يمكن أستخدام KaTeX بداخل الbody 👇

CSHTML
<body>
	<!-- Block -->
	<span>The infinite sum $$\sum_{n = 1}^{+\infty} \frac{1}{n^2}$$</span>
	<!-- Inline -->
	<span>is equal to the real number \( \frac{\pi ^ 2}{6}\)</span>
</body>

الوظائف المدعومة

يمكنك التحقق من صفحة وثائق KaTeX للوظائف المدعومة لمزيد من المعلومات حول وظائف TeX المدعومة المدعومة من KaTeX.

يمكنك أيضًا رؤية الوظائف المدعومة والوظائف غير المدعومة في الجدول المدعوم مرتبة أبجديًا.

تمديد

يمكن استخدام KaTeX من قبل مكتبات أخرى مثل React و Angular و Vue و Rust وغيرها الكثير يمكنك التحقق من القائمة هنا.

سأعرض مثالاً آخر على كيفية استخدام KaTeX مع React باستخدام react-katex

react-katex

تثبيت

POWERSHELL
  $ npm install react-katex
  # or
  $ yarn add react-katex

الأستخدام

لاستخدام react-katex يمكننا استيراد أنماط katex والمكونات التي يمكننا استخدامها لكتابة المعادلات الرياضية 👇

TSX
import 'katex/dist/katex.min.css';
import { InlineMath, BlockMath } from 'react-katex';

نمط الInline

سيساعد مكون InlineMath في عرض تدوين الرياضيات بنمط Inline 👇

TSX
<InlineMath math='\frac{\pi ^ 2}{6}' />

نمط الblock

سيساعد مكون BlockMath في عرض تدوين الرياضيات بنمط الBlock 👇

TSX
<BlockMath math='\sum_{n = 1}^{+\infty} \frac{1}{n^2}' />