From 37023d06925ca1d10b5d682be4e477fd274b84f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E9=98=B3?= <3311118881@qq.com> Date: Tue, 8 Oct 2024 12:22:53 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E9=AB=98=E4=BA=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 85 +++++++++++++++++++ package.json | 1 + .../article/components/ContentMd/index.tsx | 26 +++--- 3 files changed, 102 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index d263c7e..78455eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "react-markdown": "^9.0.1", "react-photo-view": "^1.2.6", "react-toastify": "^10.0.5", + "rehype-highlight": "^7.0.0", "sass": "^1.77.8", "sharp": "^0.33.5", "typed.js": "^2.1.0", @@ -5196,6 +5197,19 @@ "node": ">= 0.4" } }, + "node_modules/hast-util-is-element": { + "version": "3.0.0", + "resolved": "https://registry.npmmirror.com/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz", + "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==", + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/hast-util-to-jsx-runtime": { "version": "2.3.0", "resolved": "https://registry.npmmirror.com/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.0.tgz", @@ -5223,6 +5237,22 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/hast-util-to-text": { + "version": "4.0.2", + "resolved": "https://registry.npmmirror.com/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz", + "integrity": "sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==", + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0", + "@types/unist": "^3.0.0", + "hast-util-is-element": "^3.0.0", + "unist-util-find-after": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/hast-util-whitespace": { "version": "3.0.0", "resolved": "https://registry.npmmirror.com/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz", @@ -5236,6 +5266,15 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/highlight.js": { + "version": "11.9.0", + "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.9.0.tgz", + "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/html-url-attributes": { "version": "3.0.0", "resolved": "https://registry.npmmirror.com/html-url-attributes/-/html-url-attributes-3.0.0.tgz", @@ -5530,6 +5569,21 @@ "loose-envify": "cli.js" } }, + "node_modules/lowlight": { + "version": "3.1.0", + "resolved": "https://registry.npmmirror.com/lowlight/-/lowlight-3.1.0.tgz", + "integrity": "sha512-CEbNVoSikAxwDMDPjXlqlFYiZLkDJHwyGu/MfOsJnF3d7f3tds5J3z8s/l9TMXhzfsJCCJEAsD78842mwmg0PQ==", + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0", + "devlop": "^1.0.0", + "highlight.js": "~11.9.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/lru-cache": { "version": "10.4.3", "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-10.4.3.tgz", @@ -6803,6 +6857,23 @@ "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", "license": "MIT" }, + "node_modules/rehype-highlight": { + "version": "7.0.0", + "resolved": "https://registry.npmmirror.com/rehype-highlight/-/rehype-highlight-7.0.0.tgz", + "integrity": "sha512-QtobgRgYoQaK6p1eSr2SD1i61f7bjF2kZHAQHxeCHAuJf7ZUDMvQ7owDq9YTkmar5m5TSUol+2D3bp3KfJf/oA==", + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0", + "hast-util-to-text": "^4.0.0", + "lowlight": "^3.0.0", + "unist-util-visit": "^5.0.0", + "vfile": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/remark-parse": { "version": "11.0.0", "resolved": "https://registry.npmmirror.com/remark-parse/-/remark-parse-11.0.0.tgz", @@ -7382,6 +7453,20 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/unist-util-find-after": { + "version": "5.0.0", + "resolved": "https://registry.npmmirror.com/unist-util-find-after/-/unist-util-find-after-5.0.0.tgz", + "integrity": "sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==", + "license": "MIT", + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/unist-util-is": { "version": "6.0.0", "resolved": "https://registry.npmmirror.com/unist-util-is/-/unist-util-is-6.0.0.tgz", diff --git a/package.json b/package.json index 0107d58..5e60b34 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "react-markdown": "^9.0.1", "react-photo-view": "^1.2.6", "react-toastify": "^10.0.5", + "rehype-highlight": "^7.0.0", "sass": "^1.77.8", "sharp": "^0.33.5", "typed.js": "^2.1.0", diff --git a/src/app/article/components/ContentMd/index.tsx b/src/app/article/components/ContentMd/index.tsx index 9d6d928..c86d79f 100644 --- a/src/app/article/components/ContentMd/index.tsx +++ b/src/app/article/components/ContentMd/index.tsx @@ -1,13 +1,18 @@ -"use client"; +"use client" import React, { useEffect } from "react"; -import ReactMarkdown from "react-markdown"; -import "github-markdown-css"; -import { PhotoProvider, PhotoView } from "react-photo-view"; -import "react-photo-view/dist/react-photo-view.css"; import { useConfigStore } from "@/stores"; import "./index.scss"; +import { PhotoProvider, PhotoView } from "react-photo-view"; +import "react-photo-view/dist/react-photo-view.css"; + +import ReactMarkdown from "react-markdown"; +import rehypeHighlight from "rehype-highlight"; +import 'highlight.js/styles/github.css'; +// import 'highlight.js/styles/atom-one-dark.css'; +import "github-markdown-css"; + interface Props { data: string; } @@ -25,18 +30,15 @@ const ContentMdComponent = ({ data }: Props) => { const { isDark } = useConfigStore() useEffect(() => { - // 当组件挂载时，改变body背景颜色 document.body.style.backgroundColor = '#fff'; let color = isDark ? "36, 41, 48" : "255, 255, 255" - // 更改波浪颜色 const waves = document.querySelectorAll(".waves use"); waves[0].style.fill = `rgba(${color}, 0.7)`; waves[1].style.fill = `rgba(${color}, 0.5)`; waves[2].style.fill = `rgba(${color}, 0.3)`; waves[3].style.fill = `rgba(${color})`; - // 当组件卸载时，恢复body背景颜色 return () => { document.body.style.backgroundColor = '#f9f9f9'; @@ -47,7 +49,6 @@ const ContentMdComponent = ({ data }: Props) => { }; }, []); - // 自定义指定标签 const renderers = { img: ({ alt, src }: { alt?: string; src?: string }) => ( @@ -62,7 +63,12 @@ const ContentMdComponent = ({ data }: Props) => {
- {data} + + {data} +