mirror of
https://github.com/hsjobeki/noogle.git
synced 2024-09-11 21:07:53 +03:00
improved formatting & highlighting of code samples
This commit is contained in:
parent
f756bd09d5
commit
3a09fd1ce3
@ -1,4 +1,5 @@
|
||||
import { Box } from "@mui/material";
|
||||
import { ThemeOptions } from "@mui/system";
|
||||
import { useEffect } from "react";
|
||||
import Highlight, { HighlightProps } from "react-highlight";
|
||||
import styles from "./codeHighlight.module.css";
|
||||
@ -6,10 +7,12 @@ import styles from "./codeHighlight.module.css";
|
||||
interface CodeHighlightProps {
|
||||
theme: "light" | "dark";
|
||||
code: HighlightProps["children"];
|
||||
lang?: string;
|
||||
background?: ThemeOptions["palette"] | string;
|
||||
}
|
||||
|
||||
export const CodeHighlight = (props: CodeHighlightProps) => {
|
||||
const { theme, code } = props;
|
||||
const { theme, code, lang, background } = props;
|
||||
useEffect(() => {
|
||||
if (theme === "dark") {
|
||||
// @ts-ignore - dont check type of css module
|
||||
@ -23,13 +26,21 @@ export const CodeHighlight = (props: CodeHighlightProps) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
"&.MuiBox-root>pre": {
|
||||
"&.MuiBox-root": {
|
||||
width: "100%",
|
||||
marginTop: 0,
|
||||
},
|
||||
"&.MuiBox-root>pre": {
|
||||
marginTop: 0,
|
||||
},
|
||||
"&.MuiBox-root>pre code.hljs": {
|
||||
bgcolor: background || undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Highlight className={`nix ${styles.hljs}`}>{code}</Highlight>
|
||||
<Highlight className={`${lang || "nix"} ${styles.hljs}`}>
|
||||
{code}
|
||||
</Highlight>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
@ -75,9 +75,11 @@ export const Preview = (props: PreviewProps) => {
|
||||
</Tooltip>
|
||||
)}
|
||||
</Box>
|
||||
{prefix !== "builtins" && (
|
||||
{prefix !== "builtins" && id.includes("lib.") && (
|
||||
<Box sx={{ my: 1 }}>
|
||||
<Typography variant="subtitle1">{`short form: lib.${name}`}</Typography>
|
||||
<Typography variant="subtitle1">
|
||||
{`short form: lib.${name}`}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<List sx={{ width: "100%" }} disablePadding>
|
||||
@ -172,13 +174,24 @@ export const Preview = (props: PreviewProps) => {
|
||||
}}
|
||||
primaryTypographyProps={{
|
||||
color: "text.secondary",
|
||||
gutterBottom: true,
|
||||
fontSize: 14,
|
||||
}}
|
||||
secondaryTypographyProps={{
|
||||
color: "text.primary",
|
||||
color: fn_type ? "text.primary" : "text.secondary",
|
||||
fontSize: "1rem",
|
||||
}}
|
||||
secondary={fn_type || "no type provided yet."}
|
||||
secondary={
|
||||
fn_type ? (
|
||||
<CodeHighlight
|
||||
code={fn_type}
|
||||
theme={theme.palette.mode}
|
||||
lang={"Haskell"}
|
||||
/>
|
||||
) : (
|
||||
"no type provided yet."
|
||||
)
|
||||
}
|
||||
primary="function signature "
|
||||
/>
|
||||
</ListItem>
|
||||
@ -209,7 +222,13 @@ export const Preview = (props: PreviewProps) => {
|
||||
</Typography>
|
||||
}
|
||||
secondary={
|
||||
<CodeHighlight code={example} theme={theme.palette.mode} />
|
||||
<CodeHighlight
|
||||
code={example}
|
||||
theme={theme.palette.mode}
|
||||
background={
|
||||
theme.palette.mode === "light" ? "action.hover" : undefined
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
|
@ -263,11 +263,11 @@
|
||||
"rust-overlay": "rust-overlay"
|
||||
},
|
||||
"locked": {
|
||||
"lastModified": 1673195125,
|
||||
"narHash": "sha256-tXasChqzT2L2r3m3wRUIOLpiuxJRRONeknxchPUYiCA=",
|
||||
"lastModified": 1675069119,
|
||||
"narHash": "sha256-iEIPjUIZ3NYcESF5AWj/BPCuO5//r7NvyTzYSZlCaTk=",
|
||||
"owner": "hsjobeki",
|
||||
"repo": "nixdoc",
|
||||
"rev": "70481a4b453be9e5e24cb357d85036d32150330c",
|
||||
"rev": "c3e3dde0af8f7e2a61db7e3f51768e764b7643e0",
|
||||
"type": "github"
|
||||
},
|
||||
"original": {
|
||||
|
@ -19,7 +19,9 @@
|
||||
packageOverrides = {
|
||||
${name}.staticPage = {
|
||||
preBuild = ''
|
||||
cp ${inp.nixdoc-fork.packages.${system}.data} ./models/lib.json
|
||||
cp ${inp.nixdoc-fork.packages.${system}.data.lib} ./models/data/lib.json
|
||||
cp ${inp.nixdoc-fork.packages.${system}.data.build_support} ./models/data/trivial-builders.json
|
||||
|
||||
'';
|
||||
installPhase = ''
|
||||
runHook preInstall
|
||||
|
@ -9,6 +9,9 @@ const lightThemeOptions: ThemeOptions = {
|
||||
},
|
||||
secondary: {
|
||||
main: "#6ad541"
|
||||
},
|
||||
background: {
|
||||
default: "#fafaff"
|
||||
}
|
||||
},
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user