diff --git a/client/components/shared/Markdown.tsx b/client/components/shared/Markdown.tsx index 60dcd332..3d4d9bb6 100644 --- a/client/components/shared/Markdown.tsx +++ b/client/components/shared/Markdown.tsx @@ -1,6 +1,9 @@ import clsx from 'clsx'; import { isEmpty } from 'lodash'; import ReactMarkdown from 'react-markdown'; +import rehypeKatex from 'rehype-katex'; +import remarkGfm from 'remark-gfm'; +import remarkMath from 'remark-math'; type Props = { children?: string; @@ -11,7 +14,11 @@ const Markdown: React.FC = ({ className, children }) => { if (!children || isEmpty(children)) return null; return ( - + {children} ); diff --git a/client/package.json b/client/package.json index 26d5b855..c471971f 100644 --- a/client/package.json +++ b/client/package.json @@ -51,7 +51,9 @@ "redux-persist": "^6.0.0", "redux-saga": "^1.2.2", "redux-undo": "^1.0.1", + "rehype-katex": "^6.0.2", "remark-gfm": "^3.0.1", + "remark-math": "^5.1.1", "sharp": "^0.31.2", "uuid": "^9.0.0", "webfontloader": "^1.6.28" diff --git a/client/styles/globals.scss b/client/styles/globals.scss index e9142f35..33aa7556 100644 --- a/client/styles/globals.scss +++ b/client/styles/globals.scss @@ -2,6 +2,9 @@ @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); +// KaTeX (for remark-math) +@import url('https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css'); + // Tailwind CSS @tailwind base; @tailwind components; @@ -35,6 +38,10 @@ ul li { @apply ml-4 list-outside; } + + .footnotes p { + @apply inline; + } } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 058077ec..40ed2a46 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -103,7 +103,9 @@ importers: redux-persist: ^6.0.0 redux-saga: ^1.2.2 redux-undo: ^1.0.1 + rehype-katex: ^6.0.2 remark-gfm: ^3.0.1 + remark-math: ^5.1.1 sass: ^1.56.2 sharp: ^0.31.2 tailwindcss: ^3.2.4 @@ -154,7 +156,9 @@ importers: redux-persist: 6.0.0_react@18.2.0+redux@4.2.0 redux-saga: 1.2.2 redux-undo: 1.0.1 + rehype-katex: 6.0.2 remark-gfm: 3.0.1 + remark-math: 5.1.1 sharp: 0.31.2 uuid: 9.0.0 webfontloader: 1.6.28 @@ -2960,6 +2964,10 @@ packages: '@types/node': 18.11.15 dev: true + /@types/katex/0.11.1: + resolution: {integrity: sha512-DUlIj2nk0YnJdlWgsFuVKcX27MLW0KbKmGVoUHmFr+74FYYNUDAaj9ZqTADvsbE8rfxuVmSFc7KczYn5Y09ozg==} + dev: false + /@types/lodash/4.14.191: resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==} dev: true @@ -2999,6 +3007,10 @@ packages: /@types/parse-json/4.0.0: resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==} + /@types/parse5/6.0.3: + resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==} + dev: false + /@types/passport-jwt/3.0.8: resolution: {integrity: sha512-VKJZDJUAHFhPHHYvxdqFcc5vlDht8Q2pL1/ePvKAgqRThDaCc84lSYOTQmnx3+JIkDlN+2KfhFhXIzlcVT+Pcw==} dependencies: @@ -4700,6 +4712,11 @@ packages: resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==} engines: {node: '>= 6'} + /commander/8.3.0: + resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==} + engines: {node: '>= 12'} + dev: false + /concat-map/0.0.1: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} @@ -6144,10 +6161,54 @@ packages: dependencies: function-bind: 1.1.1 + /hast-util-from-parse5/7.1.0: + resolution: {integrity: sha512-m8yhANIAccpU4K6+121KpPP55sSl9/samzQSQGpb0mTExcNh2WlvjtMwSWFhg6uqD4Rr6Nfa8N6TMypQM51rzQ==} + dependencies: + '@types/hast': 2.3.4 + '@types/parse5': 6.0.3 + '@types/unist': 2.0.6 + hastscript: 7.1.0 + property-information: 6.1.1 + vfile: 5.3.4 + vfile-location: 4.0.1 + web-namespaces: 2.0.1 + dev: false + + /hast-util-is-element/2.1.2: + resolution: {integrity: sha512-thjnlGAnwP8ef/GSO1Q8BfVk2gundnc2peGQqEg2kUt/IqesiGg/5mSwN2fE7nLzy61pg88NG6xV+UrGOrx9EA==} + dependencies: + '@types/hast': 2.3.4 + '@types/unist': 2.0.6 + dev: false + + /hast-util-parse-selector/3.1.0: + resolution: {integrity: sha512-AyjlI2pTAZEOeu7GeBPZhROx0RHBnydkQIXlhnFzDi0qfXTmGUWoCYZtomHbrdrheV4VFUlPcfJ6LMF5T6sQzg==} + dependencies: + '@types/hast': 2.3.4 + dev: false + + /hast-util-to-text/3.1.1: + resolution: {integrity: sha512-7S3mOBxACy8syL45hCn3J7rHqYaXkxRfsX6LXEU5Shz4nt4GxdjtMUtG+T6G/ZLUHd7kslFAf14kAN71bz30xA==} + dependencies: + '@types/hast': 2.3.4 + hast-util-is-element: 2.1.2 + unist-util-find-after: 4.0.0 + dev: false + /hast-util-whitespace/2.0.0: resolution: {integrity: sha512-Pkw+xBHuV6xFeJprJe2BBEoDV+AvQySaz3pPDRUs5PNZEMQjpXJJueqrpcHIXxnWTcAGi/UOCgVShlkY6kLoqg==} dev: false + /hastscript/7.1.0: + resolution: {integrity: sha512-uBjaTTLN0MkCZxY/R2fWUOcu7FRtUVzKRO5P/RAfgsu3yFiMB1JWCO4AjeVkgHxAira1f2UecHK5WfS9QurlWA==} + dependencies: + '@types/hast': 2.3.4 + comma-separated-tokens: 2.0.2 + hast-util-parse-selector: 3.1.0 + property-information: 6.1.1 + space-separated-tokens: 2.0.1 + dev: false + /highlight.js/10.7.3: resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==} dev: false @@ -6660,6 +6721,20 @@ packages: safe-buffer: 5.2.1 dev: false + /katex/0.13.24: + resolution: {integrity: sha512-jZxYuKCma3VS5UuxOx/rFV1QyGSl3Uy/i0kTJF3HgQ5xMinCQVF8Zd4bMY/9aI9b9A2pjIBOsjSSm68ykTAr8w==} + hasBin: true + dependencies: + commander: 8.3.0 + dev: false + + /katex/0.15.6: + resolution: {integrity: sha512-UpzJy4yrnqnhXvRPhjEuLA4lcPn6eRngixW7Q3TJErjg3Aw2PuLFBzTkdUb89UtumxjhHTqL3a5GDGETMSwgJA==} + hasBin: true + dependencies: + commander: 8.3.0 + dev: false + /kleur/4.1.5: resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==} engines: {node: '>=6'} @@ -6912,6 +6987,14 @@ packages: - supports-color dev: false + /mdast-util-math/2.0.1: + resolution: {integrity: sha512-ZZtjyRwobsiVg4bY0Q5CzAZztpbjRIA7ZlMMb0PNkwTXOnJTUoHvzBhVG95LIuek5Mlj1l2P+jBvWviqW7G+0A==} + dependencies: + '@types/mdast': 3.0.10 + longest-streak: 3.0.1 + mdast-util-to-markdown: 1.3.0 + dev: false + /mdast-util-to-hast/12.2.1: resolution: {integrity: sha512-dyindR2P7qOqXO1hQirZeGtVbiX7xlNQbw7gGaAwN4A1dh4+X8xU/JyYmRoyB8Fu1uPXzp7mlL5QwW7k+knvgA==} dependencies: @@ -7076,6 +7159,18 @@ packages: micromark-util-types: 1.0.2 dev: false + /micromark-extension-math/2.0.2: + resolution: {integrity: sha512-cFv2B/E4pFPBBFuGgLHkkNiFAIQv08iDgPH2HCuR2z3AUgMLecES5Cq7AVtwOtZeRrbA80QgMUk8VVW0Z+D2FA==} + dependencies: + '@types/katex': 0.11.1 + katex: 0.13.24 + micromark-factory-space: 1.0.0 + micromark-util-character: 1.1.0 + micromark-util-symbol: 1.0.1 + micromark-util-types: 1.0.2 + uvu: 0.5.6 + dev: false + /micromark-factory-destination/1.0.0: resolution: {integrity: sha512-eUBA7Rs1/xtTVun9TmV3gjfPz2wEwgK5R5xcbIM5ZYAtvGF6JkyaDsj0agx8urXnO31tEO6Ug83iVH3tdedLnw==} dependencies: @@ -8485,6 +8580,28 @@ packages: jsesc: 0.5.0 dev: false + /rehype-katex/6.0.2: + resolution: {integrity: sha512-C4gDAlS1+l0hJqctyiU64f9CvT00S03qV1T6HiMzbSuLBgWUtcqydWHY9OpKrm0SpkK16FNd62CDKyWLwV2ppg==} + dependencies: + '@types/hast': 2.3.4 + '@types/katex': 0.11.1 + hast-util-to-text: 3.1.1 + katex: 0.15.6 + rehype-parse: 8.0.4 + unified: 10.1.2 + unist-util-remove-position: 4.0.1 + unist-util-visit: 4.1.1 + dev: false + + /rehype-parse/8.0.4: + resolution: {integrity: sha512-MJJKONunHjoTh4kc3dsM1v3C9kGrrxvA3U8PxZlP2SjH8RNUSrb+lF7Y0KVaUDnGH2QZ5vAn7ulkiajM9ifuqg==} + dependencies: + '@types/hast': 2.3.4 + hast-util-from-parse5: 7.1.0 + parse5: 6.0.1 + unified: 10.1.2 + dev: false + /remark-gfm/3.0.1: resolution: {integrity: sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==} dependencies: @@ -8496,6 +8613,15 @@ packages: - supports-color dev: false + /remark-math/5.1.1: + resolution: {integrity: sha512-cE5T2R/xLVtfFI4cCePtiRn+e6jKMtFDR3P8V3qpv8wpKjwvHoBA4eJzvX+nVrnlNy0911bdGmuspCSwetfYHw==} + dependencies: + '@types/mdast': 3.0.10 + mdast-util-math: 2.0.1 + micromark-extension-math: 2.0.2 + unified: 10.1.2 + dev: false + /remark-parse/10.0.1: resolution: {integrity: sha512-1fUyHr2jLsVOkhbvPRBJ5zTKZZyD6yZzYaWCS6BPBdQ8vEMBCH+9zNCDA6tET/zHCi/jLqjCWtlJZUPk+DbnFw==} dependencies: @@ -9566,6 +9692,13 @@ packages: '@types/unist': 2.0.6 dev: false + /unist-util-find-after/4.0.0: + resolution: {integrity: sha512-gfpsxKQde7atVF30n5Gff2fQhAc4/HTOV4CvkXpTg9wRfQhZWdXitpyXHWB6YcYgnsxLx+4gGHeVjCTAAp9sjw==} + dependencies: + '@types/unist': 2.0.6 + unist-util-is: 5.1.1 + dev: false + /unist-util-generated/2.0.0: resolution: {integrity: sha512-TiWE6DVtVe7Ye2QxOVW9kqybs6cZexNwTwSMVgkfjEReqy/xwGpAXb99OxktoWwmL+Z+Epb0Dn8/GNDYP1wnUw==} dev: false @@ -9580,6 +9713,13 @@ packages: '@types/unist': 2.0.6 dev: false + /unist-util-remove-position/4.0.1: + resolution: {integrity: sha512-0yDkppiIhDlPrfHELgB+NLQD5mfjup3a8UYclHruTJWmY74je8g+CIFr79x5f6AkmzSwlvKLbs63hC0meOMowQ==} + dependencies: + '@types/unist': 2.0.6 + unist-util-visit: 4.1.1 + dev: false + /unist-util-stringify-position/3.0.2: resolution: {integrity: sha512-7A6eiDCs9UtjcwZOcCpM4aPII3bAAGv13E96IkawkOAW0OhH+yRxtY0lzo8KiHpzEMfH7Q+FizUmwp8Iqy5EWg==} dependencies: @@ -9692,6 +9832,13 @@ packages: engines: {node: '>= 0.8'} dev: false + /vfile-location/4.0.1: + resolution: {integrity: sha512-JDxPlTbZrZCQXogGheBHjbRWjESSPEak770XwWPfw5mTc1v1nWGLB/apzZxsx8a0SJVfF8HK8ql8RD308vXRUw==} + dependencies: + '@types/unist': 2.0.6 + vfile: 5.3.4 + dev: false + /vfile-message/3.1.2: resolution: {integrity: sha512-QjSNP6Yxzyycd4SVOtmKKyTsSvClqBPJcd00Z0zuPj3hOIjg0rUPG6DbFGPvUKRgYyaIWLPKpuEclcuvb3H8qA==} dependencies: @@ -9727,6 +9874,10 @@ packages: defaults: 1.0.3 dev: true + /web-namespaces/2.0.1: + resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==} + dev: false + /webfontloader/1.6.28: resolution: {integrity: sha512-Egb0oFEga6f+nSgasH3E0M405Pzn6y3/9tOVanv/DLfa1YBIgcv90L18YyWnvXkRbIM17v5Kv6IT2N6g1x5tvQ==} dev: false