代码高亮

2026-06-09 00:32:37 +08:00 · 2024-10-08 12:22:53 +08:00
parent c3fbae9775
commit 37023d0692
3 changed files with 102 additions and 10 deletions
--- 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",
--- 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",
--- 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<SVGUseElement>(".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 }) => (
            <PhotoView src={src || ''}>
@@ -62,7 +63,12 @@ const ContentMdComponent = ({ data }: Props) => {
        <div className="ContentMdComponent mt-12">
            <PhotoProvider>
                <div className="content markdown-body">
-                    <ReactMarkdown components={renderers}>{data}</ReactMarkdown>
+                    <ReactMarkdown
+                        components={renderers}
+                        rehypePlugins={[rehypeHighlight]}
+                    >
+                        {data}
+                    </ReactMarkdown>
                </div>
            </PhotoProvider>
        </div>