Commit 438b4f5

HPCesia <me@hpcesia.com>
2025-02-07 09:59:54
feat: support LaTeX formula
1 parent 807f2ad
Changed files (5)
src/constants/cdn.mjs
@@ -1,4 +1,6 @@
 export const CDN = {
   twikoo: 'https://cdn.jsdelivr.net/npm/twikoo@1.6.41/dist/twikoo.nocss.js',
+  mathjaxFont:
+    'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/output/chtml/fonts/woff-v2',
   giscus: 'https://giscus.app/client.js',
 };
src/content/posts/markdown.md
@@ -41,6 +41,12 @@ use triple backticks to create code blocks.
 ```
 ````
 
+$\LaTeX$ formulas are also supported, inline formula like $e^{i\pi} + 1 = 0$ or block formula like:
+
+$$
+ \int_{-\infty}^{+\infty} e^{-x^2} \mathrm{d}x = \sqrt{\pi}
+$$
+
 ## Heading Level 2
 
 Other GitHub Flavored Markdown features include:
src/styles/markdown.scss
@@ -310,4 +310,9 @@ article {
       vertical-align: middle;
     }
   }
+
+  // 数学样式
+  mjx-container[display='true'] {
+    overflow: auto;
+  }
 }
astro.config.mjs
@@ -1,4 +1,5 @@
 // @ts-check
+import { CDN } from './src/constants/cdn.mjs';
 import { rehypeWrapTables } from './src/plugins/rehype-wrap-tables.mjs';
 import { remarkReadingTime } from './src/plugins/remark-reading-time.mjs';
 import { rehypeHeadingIds } from '@astrojs/markdown-remark';
@@ -8,7 +9,9 @@ import icon from 'astro-icon';
 import pagefind from 'astro-pagefind';
 import { defineConfig } from 'astro/config';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeMathJaxCHtml from 'rehype-mathjax/chtml';
 import remarkGithubBlockQuote from 'remark-github-beta-blockquote-admonitions';
+import remarkMath from 'remark-math';
 
 // https://astro.build/config
 export default defineConfig({
@@ -31,6 +34,7 @@ export default defineConfig({
       defaultColor: false,
     },
     remarkPlugins: [
+      remarkMath,
       remarkReadingTime,
       // @ts-expect-error - types are not up to date
       [
@@ -59,6 +63,14 @@ export default defineConfig({
           },
         },
       ],
+      [
+        rehypeMathJaxCHtml,
+        {
+          chtml: {
+            fontURL: CDN.mathjaxFont,
+          },
+        },
+      ],
       rehypeWrapTables,
     ],
   },
package.json
@@ -29,7 +29,9 @@
     "postcss-load-config": "^6.0.1",
     "reading-time": "^1.5.0",
     "rehype-autolink-headings": "^7.1.0",
+    "rehype-mathjax": "^6.0.0",
     "remark-github-beta-blockquote-admonitions": "^3.1.1",
+    "remark-math": "^6.0.0",
     "sass": "^1.84.0",
     "sharp": "^0.33.5",
     "tailwindcss": "^3.4.17",