Skip to content
Snippets Groups Projects

Set katex font size to 1rem

Merged Lukas Möller requested to merge fix-math-size into staging
1 file
+ 63
44
Compare changes
  • Side-by-side
  • Inline
@@ -2,15 +2,11 @@ import TeX from "@matejmazur/react-katex";
import { css } from "emotion";
import "katex/dist/katex.min.css";
import * as React from "react";
import { useMemo } from "react";
import ReactMarkdown, { ReactMarkdownProps } from "react-markdown";
import * as RemarkMathPlugin from "remark-math";
import CodeBlock from "./code-block";
interface Props {
value: string;
regex?: RegExp;
}
const wrapperStyle = css`
overflow-x: auto;
overflow-y: hidden;
@@ -29,56 +25,79 @@ const wrapperStyle = css`
margin-block-end: 0.5em;
}
}
& .katex {
font-size: 1rem;
}
`;
export default ({ value, regex }: Props) => {
if (value.length === 0) {
return <div />;
const transformImageUri = (uri: string) => {
if (uri.includes("/")) {
return uri;
} else {
return `/api/image/get/${uri}/`;
}
const renderers: ReactMarkdownProps["renderers"] = {
text: ({ value }: { value: string }) => {
if (regex === undefined) return <span>{value}</span>;
const arr: React.ReactChild[] = [];
const m = regex.test(value);
if (!m) return <span>{value}</span>;
let i = 0;
while (i < value.length) {
const rest = value.substring(i);
const m = rest.match(regex);
if (m) {
const start = m.index || 0;
arr.push(<span key={start}>{rest.substring(0, start)}</span>);
arr.push(<mark key={`${start}match`}>{m[0]}</mark>);
};
const markdownPlugins = [RemarkMathPlugin];
const createRenderers = (
regex: RegExp | undefined,
): ReactMarkdownProps["renderers"] => ({
text: ({ value }: { value: string }) => {
if (regex === undefined) return <span>{value}</span>;
const arr: React.ReactChild[] = [];
const m = regex.test(value);
if (!m) return <span>{value}</span>;
let i = 0;
while (i < value.length) {
const rest = value.substring(i);
const m = rest.match(regex);
if (m) {
const start = m.index || 0;
arr.push(<span key={start}>{rest.substring(0, start)}</span>);
arr.push(<mark key={`${start}match`}>{m[0]}</mark>);
i += start + m[0].length;
} else {
arr.push(<span key="rest">{rest}</span>);
break;
}
i += start + m[0].length;
} else {
arr.push(<span key="rest">{rest}</span>);
break;
}
return <>{arr}</>;
},
math: (props: { value: string }) => <TeX math={props.value} block />,
inlineMath: (props: { value: string }) => <TeX math={props.value} />,
code: (props: { value: string; language: string }) => (
<CodeBlock language={props.language} value={props.value} />
),
};
}
return <>{arr}</>;
},
math: (props: { value: string }) => <TeX math={props.value} block />,
inlineMath: (props: { value: string }) => <TeX math={props.value} />,
code: (props: { value: string; language: string }) => (
<CodeBlock language={props.language} value={props.value} />
),
});
interface Props {
/**
* The markdown string that should be rendered.
*/
value: string;
/**
* A regex which should be used for highlighting. If undefined no text will
* be highlighted.
*/
regex?: RegExp;
}
const MarkdownText: React.FC<Props> = ({ value, regex }) => {
const renderers = useMemo(() => createRenderers(regex), [regex]);
if (value.length === 0) {
return <div />;
}
return (
<div className={wrapperStyle}>
<ReactMarkdown
source={value}
transformImageUri={uri => {
if (uri.includes("/")) {
return uri;
} else {
return `/api/image/get/${uri}/`;
}
}}
plugins={[RemarkMathPlugin]}
// tslint:disable-next-line: no-any
transformImageUri={transformImageUri}
plugins={markdownPlugins}
renderers={renderers}
/>
</div>
);
};
export default MarkdownText;
Loading