From 0dd2c1a3051c47e5aa8acec62d6989c07a7a573e Mon Sep 17 00:00:00 2001 From: DIYgod Date: Mon, 5 Dec 2022 12:36:52 +0000 Subject: [PATCH] feat: support math --- package.json | 2 + pnpm-lock.yaml | 91 +++++++++++++++++++++++++++++++++ src/css/main.css | 2 + src/markdown/index.ts | 4 ++ src/markdown/sanitize-schema.ts | 1 + 5 files changed, 100 insertions(+) diff --git a/package.json b/package.json index 33a5bfa7..62fc9bd4 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "react-sortablejs": "6.1.4", "refractor": "4.8.0", "rehype-autolink-headings": "6.1.1", + "rehype-katex": "^6.0.2", "rehype-prism-plus": "1.5.0", "rehype-raw": "6.1.1", "rehype-react": "7.1.1", @@ -76,6 +77,7 @@ "remark-directive-rehype": "0.4.2", "remark-frontmatter": "4.0.1", "remark-gfm": "3.0.1", + "remark-math": "^5.1.1", "remark-parse": "10.0.1", "remark-rehype": "10.1.0", "remark-stringify": "10.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3c010201..e55d2d4a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -82,6 +82,7 @@ specifiers: react-sortablejs: 6.1.4 refractor: 4.8.0 rehype-autolink-headings: 6.1.1 + rehype-katex: ^6.0.2 rehype-prism-plus: 1.5.0 rehype-raw: 6.1.1 rehype-react: 7.1.1 @@ -92,6 +93,7 @@ specifiers: remark-directive-rehype: 0.4.2 remark-frontmatter: 4.0.1 remark-gfm: 3.0.1 + remark-math: ^5.1.1 remark-parse: 10.0.1 remark-rehype: 10.1.0 remark-stringify: 10.0.2 @@ -160,6 +162,7 @@ dependencies: react-sortablejs: 6.1.4_pkvhgat2fktt3g4eqjjiisgkie refractor: 4.8.0 rehype-autolink-headings: 6.1.1 + rehype-katex: 6.0.2 rehype-prism-plus: 1.5.0 rehype-raw: 6.1.1 rehype-react: 7.1.1_@types+react@18.0.25 @@ -170,6 +173,7 @@ dependencies: remark-directive-rehype: 0.4.2 remark-frontmatter: 4.0.1 remark-gfm: 3.0.1 + remark-math: 5.1.1 remark-parse: 10.0.1 remark-rehype: 10.1.0 remark-stringify: 10.0.2 @@ -1754,6 +1758,10 @@ packages: resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==} dev: true + /@types/katex/0.11.1: + resolution: {integrity: sha512-DUlIj2nk0YnJdlWgsFuVKcX27MLW0KbKmGVoUHmFr+74FYYNUDAaj9ZqTADvsbE8rfxuVmSFc7KczYn5Y09ozg==} + dev: false + /@types/lodash/4.14.190: resolution: {integrity: sha512-5iJ3FBJBvQHQ8sFhEhJfjUP+G+LalhavTkYyrAYqz5MEJG+erSv0k9KJLb6q7++17Lafk1scaTIFXcMJlwK8Mw==} dev: false @@ -3280,6 +3288,11 @@ packages: engines: {node: '>= 10'} dev: true + /commander/8.3.0: + resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==} + engines: {node: '>= 12'} + dev: false + /commander/9.4.1: resolution: {integrity: sha512-5EEkTNyHNGFPD2H+c/dXXfQZYa/scCKasxWcXJaWnNJ99pnQN9Vnmqow+p+PlFPE63Q6mThaZws1T+HxfpgtPw==} engines: {node: ^12.20.0 || >=14} @@ -5093,6 +5106,14 @@ packages: '@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 @@ -5637,6 +5658,20 @@ packages: object.assign: 4.1.4 dev: true + /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 + /keccak/3.0.2: resolution: {integrity: sha512-PyKKjkH53wDMLGrvmRGSNWgmSxZOUqbnXwKL9tmgbFYA1iAYqW21kfR7mZXV0MlESiefxQQE9X9fTa3X+2MPDQ==} engines: {node: '>=10.0.0'} @@ -5977,6 +6012,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.1.1: resolution: {integrity: sha512-qE09zD6ylVP14jV4mjLIhDBOrpFdShHZcEsYvvKGABlr9mGbV7mTlRWdoFxL/EYSTNDiC9GZXy7y8Shgb9Dtzw==} dependencies: @@ -6158,6 +6201,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.4 + dev: false + /micromark-factory-destination/1.0.0: resolution: {integrity: sha512-eUBA7Rs1/xtTVun9TmV3gjfPz2wEwgK5R5xcbIM5ZYAtvGF6JkyaDsj0agx8urXnO31tEO6Ug83iVH3tdedLnw==} dependencies: @@ -7424,6 +7479,19 @@ packages: unist-util-visit: 4.1.1 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: @@ -7530,6 +7598,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: @@ -8458,6 +8535,13 @@ packages: unist-util-visit-parents: 5.1.1 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 @@ -8482,6 +8566,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: diff --git a/src/css/main.css b/src/css/main.css index d6949bd4..43a47fad 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -3,3 +3,5 @@ @import "./prose.css"; @import "./code.css"; @import "./prism-dark.css"; + +@import url("https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css"); diff --git a/src/markdown/index.ts b/src/markdown/index.ts index e70f24eb..c690fcfc 100644 --- a/src/markdown/index.ts +++ b/src/markdown/index.ts @@ -28,6 +28,8 @@ import { toc, Result as TocResult } from "mdast-util-toc" import { Element } from "react-scroll" import type { Root } from "hast" import { Mention } from "~/components/ui/Mention" +import remarkMath from "remark-math" +import rehypeKatex from "rehype-katex" export type MarkdownEnv = { excerpt: string @@ -91,7 +93,9 @@ export const renderPageContent = ( .use(remarkDirective) .use(remarkDirectiveRehype) .use(remarkYoutube) + .use(remarkMath) .use(remarkRehype, { allowDangerousHtml: true }) + .use(rehypeKatex) .use(rehypeStringify) .use(rehypeRaw) .use(rehypeImage, { env }) diff --git a/src/markdown/sanitize-schema.ts b/src/markdown/sanitize-schema.ts index f634a63e..782b14a5 100644 --- a/src/markdown/sanitize-schema.ts +++ b/src/markdown/sanitize-schema.ts @@ -41,6 +41,7 @@ const scheme = { "allow", "style", ], + span: ["className", "style"], }, }