From c13ec311636d5e057c6895e353e1c1a4e570f582 Mon Sep 17 00:00:00 2001
From: Piotr Held <pjheld@gmail.com>
Date: Tue, 30 Jan 2024 20:44:19 +0100
Subject: [PATCH] perf: enable equation numbering in MathJax (#1520)

If you place your equations inside $$\begin{equation}...\end{equation}$$
you will get MathJax equation numbering. As described here:
https://docs.mathjax.org/en/latest/input/tex/eqnumbers.html

BREAKING CHANGES: if you used \begin{equation} inside $$ you will
get equation numbering which was not previously present.
---
 _includes/js-selector.html               |  4 +++-
 _posts/2019-08-08-text-and-typography.md |  9 ++++++++-
 _posts/2019-08-08-write-a-new-post.md    | 23 ++++++++++++++++++-----
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/_includes/js-selector.html b/_includes/js-selector.html
index 3515106..0e7f6f4 100644
--- a/_includes/js-selector.html
+++ b/_includes/js-selector.html
@@ -85,7 +85,9 @@
         displayMath: [
           ['$$', '$$'],
           ['\\[', '\\]']
-        ]
+        ],
+        /* equation numbering */
+        tags: 'ams'
       }
     };
   </script>
diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md
index e2cf403..7bf569d 100644
--- a/_posts/2019-08-08-text-and-typography.md
+++ b/_posts/2019-08-08-text-and-typography.md
@@ -134,7 +134,14 @@ fi;
 
 The mathematics powered by [**MathJax**](https://www.mathjax.org/):
 
-$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$
+$$
+\begin{equation}
+  \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}
+  \label{eq:series}
+\end{equation}
+$$
+
+We can reference the equation as \eqref{eq:series}.
 
 When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
 
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
index 9240f05..86194ed 100644
--- a/_posts/2019-08-08-write-a-new-post.md
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -69,7 +69,6 @@ authors: [<author1_id>, <author2_id>]   # for multiple entries
 ---
 ```
 
-
 Having said that, the key `author` can also identify multiple entries.
 
 > The benefit of reading the author information from the file `_data/authors.yml`{: .filepath } is that the page will have the meta tag `twitter:creator`, which enriches the [Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#card-and-content-attribution) and is good for SEO.
@@ -107,9 +106,11 @@ math: true
 ---
 ```
 
-After enabling the mathematical feature, you can add math equations with the following syntax: 
+After enabling the mathematical feature, you can add math equations with the following syntax:
 
 - **Block math** should be added with `$$ math $$` with **mandatory** blank lines before and after `$$`
+  - **Inserting equation numbering** should be added with `$$\begin{equation} math \end{equation}$$`
+  - **Referencing equation numbering** should be done with `\label{eq:label_name}` in the equation block and `\eqref{eq:label_name}` inline with text (see example below)
 - **Inline math** (in lines) should be added with `$$ math $$` without any blank line before or after `$$`
 - **Inline math** (in lists) should be added with `\$$ math $$`
 
@@ -120,6 +121,17 @@ $$
 LaTeX_math_expression
 $$
 
+<!-- Equation numbering, keep all blank lines  -->
+
+$$
+\begin{equation}
+  LaTeX_math_expression
+  \label{eq:label_name}
+\end{equation}
+$$
+
+Can be referenced as \eqref{eq:label_name}.
+
 <!-- Inline math in lines, NO blank lines -->
 
 "Lorem ipsum dolor sit amet, $$ LaTeX_math_expression $$ consectetur adipiscing elit."
@@ -243,7 +255,7 @@ For instance, when using images:
 The parsing result will automatically add the CDN prefix `https://cdn.com` before the image path:
 
 ```html
-<img src="https://cdn.com/path/to/flower.png" alt="The flower">
+<img src="https://cdn.com/path/to/flower.png" alt="The flower" />
 ```
 {: .nolineno }
 
@@ -267,7 +279,7 @@ And then, the image source of Markdown can write the file name directly:
 The output will be:
 
 ```html
-<img src="/img/path/flower.png" alt="The flower">
+<img src="/img/path/flower.png" alt="The flower" />
 ```
 {: .nolineno }
 
@@ -285,7 +297,7 @@ image:
 ---
 ```
 
-Note that the [`img_path`](#image-path) can also be passed to the preview image, that is, when it has been set, the  attribute `path` only needs the image file name.
+Note that the [`img_path`](#image-path) can also be passed to the preview image, that is, when it has been set, the attribute `path` only needs the image file name.
 
 For simple use, you can also just use `image` to define the path.
 
@@ -420,6 +432,7 @@ You can embed a video with the following syntax:
 ```liquid
 {% include embed/{Platform}.html id='{ID}' %}
 ```
+
 Where `Platform` is the lowercase of the platform name, and `ID` is the video ID.
 
 The following table shows how to get the two parameters we need in a given video URL, and you can also know the currently supported video platforms.