Skip to content

Enhance MathJax integration by adding DEFAULT_SCRIPT_URL and allowing… #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fmkeke wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Enhance MathJax integration by adding DEFAULT_SCRIPT_URL and allowing… #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions packages/html5/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 = () => {
Expand All @@ -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) {
Expand Down
2 changes: 2 additions & 0 deletions packages/mathjaxjs-react/src/components/MathJaxProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ declare global {
}

interface MathJaxConfig {
/** 自定义 MathJax 脚本地址，不传则使用默认 CDN */
scriptURL?: string;
tex?: {
inlineMath?: string[][];
displayMath?: string[][];
Expand Down
2 changes: 1 addition & 1 deletion packages/mathjaxjs-react/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
17 changes: 15 additions & 2 deletions packages/mathjaxjs/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: [['$', '$'], ['\\(', '\\)']],
Expand All @@ -16,11 +19,19 @@ export const DEFAULT_CONFIG = {
}
};

/** 扩展配置：可传入 scriptURL 自定义加载地址 */
export interface LoadMathJaxConfig extends Record<string, unknown> {
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;
Expand All @@ -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,
Expand All @@ -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 = () => {
Expand Down
11 changes: 10 additions & 1 deletion packages/react/src/components/MathJaxProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ declare global {
}

interface MathJaxConfig {
/** 自定义 MathJax 脚本地址 */
scriptURL?: string;
tex?: {
inlineMath?: string[][];
displayMath?: string[][];
Expand All @@ -17,16 +19,21 @@ 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;
}

export default function MathJaxProvider({
children,
config,
scriptURL: scriptURLProp,
loadingComponent,
className = ""
}: MathJaxProviderProps) {
Expand All @@ -51,6 +58,8 @@ export default function MathJaxProvider({
chtml: { ...defaultConfig.chtml, ...config?.chtml }
};

const scriptURL = scriptURLProp ?? config?.scriptURL ?? DEFAULT_SCRIPT_URL;

useEffect(() => {
setIsClient(true);

Expand All @@ -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');
Expand Down