improved formatting & highlighting of code samples

components/codeHighlight/codeHighlight.tsx

@@ -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>
   );
 };

components/preview/preview.tsx

@@ -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>

flake.lock

@@ -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": {

flake.nix

@@ -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

styles/theme/lightThemeOptions.ts

@@ -9,6 +9,9 @@ const lightThemeOptions: ThemeOptions = {
     },
     secondary: {
       main: "#6ad541"
+    },
+    background: {
+      default: "#fafaff"
     }
   },
 };