mirror of
https://github.com/hsjobeki/noogle.git
synced 2024-09-11 21:07:53 +03:00
add: markdown nix highlighting in description field
This commit is contained in:
parent
1bfc0acbc9
commit
2576d9085c
@ -1,4 +1,4 @@
|
||||
.hljs {
|
||||
padding: 0 !important;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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>
|
||||
}
|
||||
/>
|
||||
|
181
package-lock.json
generated
181
package-lock.json
generated
@ -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",
|
||||
|
@ -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": {
|
||||
|
Loading…
Reference in New Issue
Block a user