try to load it on the client instead of the server?
This commit is contained in:
parent
78bb457f22
commit
5c81abedb4
@ -1,14 +1,12 @@
|
||||
import { ReactElement } from "react";
|
||||
import hljs from "highlight.js";
|
||||
import { ActionMenu } from "@/app/components/action-menu";
|
||||
import { cn } from "@/app/common/utils";
|
||||
import { jetbrainsMono } from "@/app/common/font/font";
|
||||
import { Metadata } from "next";
|
||||
import moment from "moment";
|
||||
import { notFound } from "next/navigation";
|
||||
|
||||
// Highlight.js theme
|
||||
import "highlight.js/styles/github-dark-dimmed.css";
|
||||
import Codeblock from "@/app/components/codeblock";
|
||||
|
||||
type PasteProps = {
|
||||
params: {
|
||||
@ -66,17 +64,9 @@ export default async function Paste({
|
||||
<div className="relative">
|
||||
<ActionMenu />
|
||||
|
||||
<pre>
|
||||
<code
|
||||
className={cn(
|
||||
"hljs !bg-transparent text-sm",
|
||||
jetbrainsMono.className,
|
||||
)}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: hljs.highlightAuto(data.content).value,
|
||||
}}
|
||||
/>
|
||||
</pre>
|
||||
<div className="p-1 hljs !bg-transparent text-sm">
|
||||
<Codeblock>{data.content}</Codeblock>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
33
src/app/components/codeblock.tsx
Normal file
33
src/app/components/codeblock.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
"use client";
|
||||
|
||||
import hljs from "highlight.js";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const Codeblock = ({ children }: { children: string }) => {
|
||||
const [mounted, setIsMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (mounted) {
|
||||
hljs.safeMode();
|
||||
hljs.highlightAll();
|
||||
}
|
||||
}, [mounted, children]);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== "undefined") {
|
||||
setIsMounted(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (!mounted) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<pre>
|
||||
<code className="!bg-transparent">{children}</code>
|
||||
</pre>
|
||||
);
|
||||
};
|
||||
|
||||
export default Codeblock;
|
@ -5,5 +5,5 @@ import { ThemeProvider as NextThemesProvider } from "next-themes";
|
||||
import { type ThemeProviderProps } from "next-themes/dist/types";
|
||||
|
||||
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
|
||||
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
|
||||
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
|
||||
}
|
||||
|
Reference in New Issue
Block a user