From 6065289a0a1f1823224f54d180a030f8b837bcb9 Mon Sep 17 00:00:00 2001 From: yerslan <1362114751@qq.com> Date: Tue, 24 Feb 2026 14:41:08 +0800 Subject: [PATCH] Enhance MathJax integration by adding DEFAULT_SCRIPT_URL and allowing custom script URLs in loadMathJax. Update exports in related packages to include new configuration options. --- packages/html5/src/index.ts | 9 +++++---- .../src/components/MathJaxProvider.tsx | 2 ++ packages/mathjaxjs-react/src/index.ts | 2 +- packages/mathjaxjs/src/index.ts | 17 +++++++++++++++-- .../react/src/components/MathJaxProvider.tsx | 11 ++++++++++- 5 files changed, 33 insertions(+), 8 deletions(-) diff --git a/packages/html5/src/index.ts b/packages/html5/src/index.ts index 2057f7a..7071c59 100644 --- a/packages/html5/src/index.ts +++ b/packages/html5/src/index.ts @@ -1,5 +1,5 @@ import LaTeX2JS from 'latex2js'; -import { getMathJax, loadMathJax } from 'mathjaxjs'; +import { getMathJax, loadMathJax, DEFAULT_CONFIG, type LoadMathJaxConfig } from 'mathjaxjs'; import pspicture from './components/pspicture.js'; import nicebox from './components/nicebox.js'; import enumerate from './components/enumerate.js'; @@ -9,7 +9,7 @@ import macros from './components/macros'; const ELEMENTS = { pspicture, nicebox, enumerate, verbatim, math, macros }; -export { pspicture, nicebox, enumerate, verbatim, math, macros }; +export { pspicture, nicebox, enumerate, verbatim, math, macros ,DEFAULT_CONFIG}; export default function render(tex: string, resolve: (div: HTMLDivElement) => void): void { const done = () => { @@ -34,8 +34,9 @@ export default function render(tex: string, resolve: (div: HTMLDivElement) => vo loadMathJax(done); } -export const init = (): void => { - loadMathJax(); + +export const init = (config?: typeof DEFAULT_CONFIG & LoadMathJaxConfig): void => { + loadMathJax(undefined, config); document.querySelectorAll('script[type="text/latex"]').forEach((el) => { render(el.innerHTML, (div: HTMLDivElement) => { if (el.parentNode) { diff --git a/packages/mathjaxjs-react/src/components/MathJaxProvider.tsx b/packages/mathjaxjs-react/src/components/MathJaxProvider.tsx index 197e695..a381513 100644 --- a/packages/mathjaxjs-react/src/components/MathJaxProvider.tsx +++ b/packages/mathjaxjs-react/src/components/MathJaxProvider.tsx @@ -8,6 +8,8 @@ declare global { } interface MathJaxConfig { + /** 自定义 MathJax 脚本地址，不传则使用默认 CDN */ + scriptURL?: string; tex?: { inlineMath?: string[][]; displayMath?: string[][]; diff --git a/packages/mathjaxjs-react/src/index.ts b/packages/mathjaxjs-react/src/index.ts index 3e71449..7d1ee38 100644 --- a/packages/mathjaxjs-react/src/index.ts +++ b/packages/mathjaxjs-react/src/index.ts @@ -1,3 +1,3 @@ export { default as MathJaxProvider } from './components/MathJaxProvider'; -export { DEFAULT_CONFIG, getMathJax, loadMathJax } from 'mathjaxjs'; +export { DEFAULT_CONFIG, DEFAULT_SCRIPT_URL, getMathJax, loadMathJax } from 'mathjaxjs'; diff --git a/packages/mathjaxjs/src/index.ts b/packages/mathjaxjs/src/index.ts index 91ccfda..d6badc1 100644 --- a/packages/mathjaxjs/src/index.ts +++ b/packages/mathjaxjs/src/index.ts @@ -1,3 +1,6 @@ +/** 默认 MathJax 脚本地址，可由用户通过 config.scriptURL 覆盖 */ +export const DEFAULT_SCRIPT_URL = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js'; + export const DEFAULT_CONFIG = { tex: { inlineMath: [['$', '$'], ['\\(', '\\)']], @@ -16,11 +19,19 @@ export const DEFAULT_CONFIG = { } }; +/** 扩展配置：可传入 scriptURL 自定义加载地址 */ +export interface LoadMathJaxConfig extends Record { + scriptURL?: string; +} + let mathJaxInstance: any = null; export const getMathJax = () => mathJaxInstance || (globalThis as any).MathJax; -export const loadMathJax = async (callback = () => { }, config = DEFAULT_CONFIG) => { +export const loadMathJax = async ( + callback = () => { }, + config: typeof DEFAULT_CONFIG & LoadMathJaxConfig = DEFAULT_CONFIG +) => { if (typeof window === 'undefined') { callback(); return; @@ -32,6 +43,8 @@ export const loadMathJax = async (callback = () => { }, config = DEFAULT_CONFIG) return; } + const scriptURL = config.scriptURL ?? DEFAULT_SCRIPT_URL; + try { (globalThis as any).MathJax = { ...config, @@ -49,7 +62,7 @@ export const loadMathJax = async (callback = () => { }, config = DEFAULT_CONFIG) }; const script = document.createElement('script'); - script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js'; + script.src = scriptURL; script.async = true; script.id = 'MathJax-script'; script.onload = () => { diff --git a/packages/react/src/components/MathJaxProvider.tsx b/packages/react/src/components/MathJaxProvider.tsx index 5122864..1c46e5f 100644 --- a/packages/react/src/components/MathJaxProvider.tsx +++ b/packages/react/src/components/MathJaxProvider.tsx @@ -7,6 +7,8 @@ declare global { } interface MathJaxConfig { + /** 自定义 MathJax 脚本地址 */ + scriptURL?: string; tex?: { inlineMath?: string[][]; displayMath?: string[][]; @@ -17,9 +19,13 @@ interface MathJaxConfig { }; } +const DEFAULT_SCRIPT_URL = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js'; + interface MathJaxProviderProps { children: ReactNode; config?: MathJaxConfig; + /** 自定义 MathJax 脚本地址，不传则使用默认 CDN */ + scriptURL?: string; loadingComponent?: ReactNode; className?: string; } @@ -27,6 +33,7 @@ interface MathJaxProviderProps { export default function MathJaxProvider({ children, config, + scriptURL: scriptURLProp, loadingComponent, className = "" }: MathJaxProviderProps) { @@ -51,6 +58,8 @@ export default function MathJaxProvider({ chtml: { ...defaultConfig.chtml, ...config?.chtml } }; + const scriptURL = scriptURLProp ?? config?.scriptURL ?? DEFAULT_SCRIPT_URL; + useEffect(() => { setIsClient(true); @@ -66,7 +75,7 @@ export default function MathJaxProvider({ }; const script = document.createElement('script'); - script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js'; + script.src = scriptURL; script.async = true; script.onload = () => { console.log('MathJax script loaded');