From 44f552cbcee83d037de0e59496bf6bb19eea2691 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 14 Apr 2024 04:34:32 +0800
Subject: [PATCH] feat(deps): move `MathJax` configuration to a separate file
 (#1670)

Move `MathJax` configuration to file `assets/js/data/mathjax.js` will help add extensions.
---
 _includes/js-selector.html            | 20 +-------------------
 _posts/2019-08-08-write-a-new-post.md | 10 +++++++++-
 assets/js/data/mathjax.js             | 25 +++++++++++++++++++++++++
 3 files changed, 35 insertions(+), 20 deletions(-)
 create mode 100644 assets/js/data/mathjax.js

diff --git a/_includes/js-selector.html b/_includes/js-selector.html
index 662e9a45f26..2e52c9622d5 100644
--- a/_includes/js-selector.html
+++ b/_includes/js-selector.html
@@ -72,25 +72,7 @@
 
 {% if page.math %}
   <!-- MathJax -->
-  <script>
-    /* see: <https://docs.mathjax.org/en/latest/options/input/tex.html#tex-options> */
-    MathJax = {
-      tex: {
-        /* start/end delimiter pairs for in-line math */
-        inlineMath: [
-          ['$', '$'],
-          ['\\(', '\\)']
-        ],
-        /* start/end delimiter pairs for display math */
-        displayMath: [
-          ['$$', '$$'],
-          ['\\[', '\\]']
-        ],
-        /* equation numbering */
-        tags: 'ams'
-      }
-    };
-  </script>
+  <script src="{{ '/assets/js/data/mathjax.js' | relative_url }}"></script>
   <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script>
   <script id="MathJax-script" async src="{{ site.data.origin[type].mathjax.js | relative_url }}"></script>
 {% endif %}
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
index 090453be9dd..0492b02930b 100644
--- a/_posts/2019-08-08-write-a-new-post.md
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -109,7 +109,9 @@ comments: false
 
 ## Mathematics
 
-For website performance reasons, the mathematical feature won't be loaded by default. But it can be enabled by:
+We use [**MathJax**][mathjax] to generate mathematics. For website performance reasons, the mathematical feature won't be loaded by default. But it can be enabled by:
+
+[mathjax]: https://www.mathjax.org/
 
 ```yaml
 ---
@@ -154,6 +156,12 @@ Can be referenced as \eqref{eq:label_name}.
 3. \$$ LaTeX_math_expression $$
 ```
 
+> Starting with `v7.0.0`, configuration options for **MathJax** have been moved to file `assets/js/data/mathjax.js`{: .filepath }, and you can change the options as needed, such as adding [extensions][mathjax-exts].  
+> If you are building the site via `chirpy-starter`, copy that file from the gem installation directory (check with command `bundle info --path jekyll-theme-chirpy`) to the same directory in your repository.
+{: .prompt-tip }
+
+[mathjax-exts]: https://docs.mathjax.org/en/latest/input/tex/extensions/index.html
+
 ## Mermaid
 
 [**Mermaid**](https://github.com/mermaid-js/mermaid) is a great diagram generation tool. To enable it on your post, add the following to the YAML block:
diff --git a/assets/js/data/mathjax.js b/assets/js/data/mathjax.js
new file mode 100644
index 00000000000..ca3d0de52c7
--- /dev/null
+++ b/assets/js/data/mathjax.js
@@ -0,0 +1,25 @@
+---
+layout: compress
+# WARNING: Don't use '//' to comment out code, use '{% comment %}' and '{% endcomment %}' instead.
+---
+
+{%- comment -%}
+  See: <https://docs.mathjax.org/en/latest/options/input/tex.html#tex-options>
+{%- endcomment -%}
+
+MathJax = {
+  tex: {
+    {%- comment -%} start/end delimiter pairs for in-line math {%- endcomment -%}
+    inlineMath: [
+      ['$', '$'],
+      ['\\(', '\\)']
+    ],
+    {%- comment -%} start/end delimiter pairs for display math {%- endcomment -%}
+    displayMath: [
+      ['$$', '$$'],
+      ['\\[', '\\]']
+    ],
+    {%- comment -%} equation numbering {%- endcomment -%}
+    tags: 'ams'
+  }
+};