add: markdown nix highlighting in description field

2024-09-11 21:07:53 +03:00 · 2022-12-12 08:03:57 +01:00 · 2022-12-12 08:03:57 +01:00 · 2576d9085c
commit 2576d9085c
parent 1bfc0acbc9
4 changed files with 224 additions and 8 deletions
--- a/components/preview/preview.module.css
+++ b/components/preview/preview.module.css
@ -1,4 +1,4 @@
 .hljs {
    padding: 0 !important;
-    
-}    
+
+}
--- a/components/preview/preview.tsx
+++ b/components/preview/preview.tsx
@ -21,8 +21,10 @@ import CodeIcon from "@mui/icons-material/Code";
 import ReactMarkdown from "react-markdown";
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import styles from "./preview.module.css";
-// import hljs from "highlight.js";
+import rehypeHighlight from "rehype-highlight";
+import nix from "highlight.js/lib/languages/nix";

+// import hljs from "highlight.js";
 // needed for nextjs to import the classes of github theme
 import "highlight.js/styles/github.css";
 interface PreviewProps {
@ -79,7 +81,7 @@ export const Preview = (props: PreviewProps) => {
      >
        <Typography
          variant="h4"
-          sx={{ wordWrap: "normal", lineBreak: "anywhere" }}
+          sx={{ wordWrap: "normal", lineBreak: "" }}
        >{`${prefix}.${name}`}</Typography>
        <Tooltip title="close details">
          <IconButton
@ -113,19 +115,51 @@ export const Preview = (props: PreviewProps) => {
            secondaryTypographyProps={{
              color: "text.primary",
              fontSize: "1rem",
+              component: "div",
            }}
            primary={"nixpkgs/" + category.replace("./", "")}
            secondary={
              <Container
                component={"div"}
-                sx={{ ml: "0 !important", pl: "0 !important" }}
-                maxWidth="lg"
+                sx={{
+                  ml: "0 !important",
+                  pl: "0 !important",
+                  overflow: "visible",
+                }}
+                maxWidth="md"
              >
                {typeof description === "object"
                  ? description.map((d, idx) => (
-                      <ReactMarkdown key={idx}>{d}</ReactMarkdown>
+                      <ReactMarkdown
+                        key={idx}
+                        components={{
+                          h1: "h3",
+                          h2: "h4",
+                          h3: "h5",
+                        }}
+                        rehypePlugins={[
+                          [rehypeHighlight, { languages: { nix } }],
+                        ]}
+                      >
+                        {d}
+                      </ReactMarkdown>
                    ))
-                  : description && <ReactMarkdown>{description}</ReactMarkdown>}
+                  : description && (
+                      <ReactMarkdown
+                        components={{
+                          h1: "h3",
+                          h2: "h4",
+                          h3: "h5",
+                        }}
+                        rehypePlugins={[
+                          [rehypeHighlight, { languages: { nix } }],
+                        ]}
+
+                        // languages: { nix } }}
+                      >
+                        {description}
+                      </ReactMarkdown>
+                    )}
              </Container>
            }
          />
--- a/package-lock.json
+++ b/package-lock.json
@ -24,6 +24,8 @@
        "react-dom": "18.2.0",
        "react-highlight": "^0.15.0",
        "react-markdown": "^8.0.4",
+        "rehype-highlight": "^6.0.0",
+        "remark-highlight.js": "^7.0.1",
        "typescript": "4.8.4"
      },
      "devDependencies": {
@ -2503,6 +2505,18 @@
        "reusify": "^1.0.4"
      }
    },
+    "node_modules/fault": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz",
+      "integrity": "sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/file-entry-cache": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@ -2562,6 +2576,14 @@
      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
    },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
    "node_modules/fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@ -2765,6 +2787,33 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/hast-util-is-element": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-2.1.2.tgz",
+      "integrity": "sha512-thjnlGAnwP8ef/GSO1Q8BfVk2gundnc2peGQqEg2kUt/IqesiGg/5mSwN2fE7nLzy61pg88NG6xV+UrGOrx9EA==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "@types/unist": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-text": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-3.1.1.tgz",
+      "integrity": "sha512-7S3mOBxACy8syL45hCn3J7rHqYaXkxRfsX6LXEU5Shz4nt4GxdjtMUtG+T6G/ZLUHd7kslFAf14kAN71bz30xA==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "hast-util-is-element": "^2.0.0",
+        "unist-util-find-after": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/hast-util-whitespace": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.0.tgz",
@ -3222,6 +3271,20 @@
        "loose-envify": "cli.js"
      }
    },
+    "node_modules/lowlight": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-2.8.0.tgz",
+      "integrity": "sha512-WeExw1IKEkel9ZcYwzpvcFzORIB0IlleTcxJYoEuUgHASuYe/OBYbV6ym/AetG7unNVCBU/SXpgTgs2nT93mhg==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "fault": "^2.0.0",
+        "highlight.js": "~11.7.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/lru-cache": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@ -4281,6 +4344,37 @@
        "url": "https://github.com/sponsors/mysticatea"
      }
    },
+    "node_modules/rehype-highlight": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-highlight/-/rehype-highlight-6.0.0.tgz",
+      "integrity": "sha512-q7UtlFicLhetp7K48ZgZiJgchYscMma7XjzX7t23bqEJF8m6/s+viXQEe4oHjrATTIZpX7RG8CKD7BlNZoh9gw==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "hast-util-to-text": "^3.0.0",
+        "lowlight": "^2.0.0",
+        "unified": "^10.0.0",
+        "unist-util-visit": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-highlight.js": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/remark-highlight.js/-/remark-highlight.js-7.0.1.tgz",
+      "integrity": "sha512-ihXPWmg4l55rZ/wREHtEdqXEuVHfE8TvS0UMCemd4lKA1t7ts13xvV3pVLK4vhaeDjSxOroo6U7E4Xxf2wVS4A==",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "lowlight": "^2.0.0",
+        "unified": "^10.0.0",
+        "unist-util-visit": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/remark-parse": {
      "version": "10.0.1",
      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz",
@ -4771,6 +4865,19 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/unist-util-find-after": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-4.0.0.tgz",
+      "integrity": "sha512-gfpsxKQde7atVF30n5Gff2fQhAc4/HTOV4CvkXpTg9wRfQhZWdXitpyXHWB6YcYgnsxLx+4gGHeVjCTAAp9sjw==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/unist-util-generated": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-2.0.0.tgz",
@ -6710,6 +6817,14 @@
        "reusify": "^1.0.4"
      }
    },
+    "fault": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz",
+      "integrity": "sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==",
+      "requires": {
+        "format": "^0.2.0"
+      }
+    },
    "file-entry-cache": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@ -6754,6 +6869,11 @@
      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
    },
+    "format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww=="
+    },
    "fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@ -6891,6 +7011,25 @@
        "has-symbols": "^1.0.2"
      }
    },
+    "hast-util-is-element": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-2.1.2.tgz",
+      "integrity": "sha512-thjnlGAnwP8ef/GSO1Q8BfVk2gundnc2peGQqEg2kUt/IqesiGg/5mSwN2fE7nLzy61pg88NG6xV+UrGOrx9EA==",
+      "requires": {
+        "@types/hast": "^2.0.0",
+        "@types/unist": "^2.0.0"
+      }
+    },
+    "hast-util-to-text": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-3.1.1.tgz",
+      "integrity": "sha512-7S3mOBxACy8syL45hCn3J7rHqYaXkxRfsX6LXEU5Shz4nt4GxdjtMUtG+T6G/ZLUHd7kslFAf14kAN71bz30xA==",
+      "requires": {
+        "@types/hast": "^2.0.0",
+        "hast-util-is-element": "^2.0.0",
+        "unist-util-find-after": "^4.0.0"
+      }
+    },
    "hast-util-whitespace": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.0.tgz",
@ -7201,6 +7340,16 @@
        "js-tokens": "^3.0.0 || ^4.0.0"
      }
    },
+    "lowlight": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-2.8.0.tgz",
+      "integrity": "sha512-WeExw1IKEkel9ZcYwzpvcFzORIB0IlleTcxJYoEuUgHASuYe/OBYbV6ym/AetG7unNVCBU/SXpgTgs2nT93mhg==",
+      "requires": {
+        "@types/hast": "^2.0.0",
+        "fault": "^2.0.0",
+        "highlight.js": "~11.7.0"
+      }
+    },
    "lru-cache": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@ -7843,6 +7992,29 @@
      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg=="
    },
+    "rehype-highlight": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-highlight/-/rehype-highlight-6.0.0.tgz",
+      "integrity": "sha512-q7UtlFicLhetp7K48ZgZiJgchYscMma7XjzX7t23bqEJF8m6/s+viXQEe4oHjrATTIZpX7RG8CKD7BlNZoh9gw==",
+      "requires": {
+        "@types/hast": "^2.0.0",
+        "hast-util-to-text": "^3.0.0",
+        "lowlight": "^2.0.0",
+        "unified": "^10.0.0",
+        "unist-util-visit": "^4.0.0"
+      }
+    },
+    "remark-highlight.js": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/remark-highlight.js/-/remark-highlight.js-7.0.1.tgz",
+      "integrity": "sha512-ihXPWmg4l55rZ/wREHtEdqXEuVHfE8TvS0UMCemd4lKA1t7ts13xvV3pVLK4vhaeDjSxOroo6U7E4Xxf2wVS4A==",
+      "requires": {
+        "@types/mdast": "^3.0.0",
+        "lowlight": "^2.0.0",
+        "unified": "^10.0.0",
+        "unist-util-visit": "^4.0.0"
+      }
+    },
    "remark-parse": {
      "version": "10.0.1",
      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz",
@ -8167,6 +8339,15 @@
        "@types/unist": "^2.0.0"
      }
    },
+    "unist-util-find-after": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-4.0.0.tgz",
+      "integrity": "sha512-gfpsxKQde7atVF30n5Gff2fQhAc4/HTOV4CvkXpTg9wRfQhZWdXitpyXHWB6YcYgnsxLx+4gGHeVjCTAAp9sjw==",
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0"
+      }
+    },
    "unist-util-generated": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-2.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -26,6 +26,7 @@
    "react-dom": "18.2.0",
    "react-highlight": "^0.15.0",
    "react-markdown": "^8.0.4",
+    "rehype-highlight": "^6.0.0",
    "typescript": "4.8.4"
  },
  "devDependencies": {