-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Remove mathjax and replace it with ReactMarkdown
- Loading branch information
Showing
3 changed files
with
92 additions
and
178 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,63 +1,37 @@ | ||
| import {Typography} from '@mui/material' | ||
| import {MathComponentProps} from 'mathjax-react/dist/components/MathComponent' | ||
| import dynamic from 'next/dynamic' | ||
| import {FC, Fragment} from 'react' | ||
|
|
||
| import styles from './Latex.module.scss' | ||
|
|
||
| // mathjax-react musi byt renderovany client-side (spolieha sa na browser `window`): https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr | ||
| const MathComponent = dynamic<MathComponentProps>( | ||
| () => import('mathjax-react').then(({MathComponent}) => MathComponent), | ||
| {ssr: false}, | ||
| import 'katex/dist/katex.min.css' | ||
|
|
||
| import {FC} from 'react' | ||
| import ReactMarkdown from 'react-markdown' | ||
| import rehypeKatex from 'rehype-katex' | ||
| import rehypeRaw from 'rehype-raw' | ||
| import remarkGfm from 'remark-gfm' | ||
| import remarkMath from 'remark-math' | ||
|
|
||
| import {H1, H2, H3, MarkdownLink, Ol, P, Table, Td, Th, Ul} from '../StaticSites/Texts' | ||
|
|
||
| const Empty: FC = () => <></> | ||
|
|
||
| export const Latex: FC<{children: string}> = ({children}) => ( | ||
| <ReactMarkdown | ||
| remarkPlugins={[remarkGfm, remarkMath]} | ||
| rehypePlugins={[rehypeKatex, rehypeRaw]} | ||
| components={{ | ||
| a: MarkdownLink, | ||
| table: Table, | ||
| th: Th, | ||
| td: Td, | ||
| p: P, | ||
| h1: H1, | ||
| h2: H2, | ||
| h3: H3, | ||
| h4: H3, | ||
| h5: H3, | ||
| h6: H3, | ||
| ol: Ol, | ||
| ul: Ul, | ||
| script: Empty, | ||
| }} | ||
| > | ||
| {children} | ||
| </ReactMarkdown> | ||
| ) | ||
|
|
||
| // toto je regex, ktory matchuje LaTeX matematiku: $$.$$ \[.\] $.$ \(.\) | ||
| const re = /((?<!(\\|\$))\$(?!\$).+?(?<!(\\|\$))\$(?!\$))|(\$\$.+?\$\$)|(\\\[.+?\\\])|(\\\(.+?\\\))/gsu | ||
|
|
||
| const trim = (str: string) => { | ||
| if (str[0] === '$' && str[1] !== '$') { | ||
| return str.slice(1, -1) | ||
| } else { | ||
| return str.slice(2, -2) | ||
| } | ||
| } | ||
|
|
||
| export const Latex: FC<{children: string}> = ({children}) => { | ||
| const matches = Array.from(children.matchAll(re)) | ||
|
|
||
| if (matches.length === 0) { | ||
| return <Typography variant="body1" dangerouslySetInnerHTML={{__html: `${children}`}} /> | ||
| } | ||
|
|
||
| const result = [] | ||
| let currentPosition = 0 | ||
|
|
||
| for (const m of matches) { | ||
| result.push( | ||
| <Typography variant="body1" dangerouslySetInnerHTML={{__html: `${children.slice(currentPosition, m.index)}`}} />, | ||
| <MathComponent tex={trim(m[0])} display={m[0].slice(0, 2) === '\\[' || m[0].slice(0, 2) === '$$'} />, | ||
| ) | ||
|
|
||
| if (typeof m.index !== 'undefined') { | ||
| currentPosition = m.index + m[0].length | ||
| } | ||
| } | ||
|
|
||
| result.push( | ||
| <Typography | ||
| variant="body1" | ||
| dangerouslySetInnerHTML={{__html: `${children.slice(Math.max(0, currentPosition))}`}} | ||
| />, | ||
| ) | ||
|
|
||
| return ( | ||
| // nas globalny CSS reset nastavuje SVGcka na display:block, tak to tu resetneme nazad na inline | ||
| // - MathComponent totiz pouziva SVGcka na LaTex vyrazy a rata s tym, ze su inline | ||
| <div className={styles.inlineSvgs}> | ||
| {result.map((child, index) => ( | ||
| // kazdy element listu potrebuje key, inak mame react warning | ||
| <Fragment key={index}>{child}</Fragment> | ||
| ))} | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters