try to load it on the client instead of the server?
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m2s
Publish Docker Image / docker (ubuntu-latest) (push) Successful in 1m4s

This commit is contained in:
Lee 2024-04-23 04:02:12 +01:00
parent 78bb457f22
commit 5c81abedb4
3 changed files with 38 additions and 15 deletions

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

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