fix codeblocks
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m32s
Publish Docker Image / docker (ubuntu-latest) (push) Successful in 1m31s

This commit is contained in:
Lee 2024-04-23 04:24:13 +01:00
parent 5c81abedb4
commit 33f390ca92
5 changed files with 35 additions and 47 deletions

@ -13,7 +13,6 @@
"@types/react-syntax-highlighter": "^15.5.11", "@types/react-syntax-highlighter": "^15.5.11",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.0", "clsx": "^2.1.0",
"highlight.js": "^11.9.0",
"lang-detector": "^1.0.6", "lang-detector": "^1.0.6",
"lucide-react": "^0.372.0", "lucide-react": "^0.372.0",
"moment": "^2.30.1", "moment": "^2.30.1",

8
pnpm-lock.yaml generated

@ -17,9 +17,6 @@ dependencies:
clsx: clsx:
specifier: ^2.1.0 specifier: ^2.1.0
version: 2.1.0 version: 2.1.0
highlight.js:
specifier: ^11.9.0
version: 11.9.0
lang-detector: lang-detector:
specifier: ^1.0.6 specifier: ^1.0.6
version: 1.0.6 version: 1.0.6
@ -1592,11 +1589,6 @@ packages:
resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==} resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
dev: false dev: false
/highlight.js@11.9.0:
resolution: {integrity: sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==}
engines: {node: '>=12.0.0'}
dev: false
/ignore@5.3.1: /ignore@5.3.1:
resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==} resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
engines: {node: '>= 4'} engines: {node: '>= 4'}

@ -3,10 +3,7 @@ import { ActionMenu } from "@/app/components/action-menu";
import { Metadata } from "next"; import { Metadata } from "next";
import moment from "moment"; import moment from "moment";
import { notFound } from "next/navigation"; import { notFound } from "next/navigation";
import { CodeBlock } from "@/app/components/codeBlock";
// Highlight.js theme
import "highlight.js/styles/github-dark-dimmed.css";
import Codeblock from "@/app/components/codeblock";
type PasteProps = { type PasteProps = {
params: { params: {
@ -65,7 +62,7 @@ export default async function Paste({
<ActionMenu /> <ActionMenu />
<div className="p-1 hljs !bg-transparent text-sm"> <div className="p-1 hljs !bg-transparent text-sm">
<Codeblock>{data.content}</Codeblock> <CodeBlock code={data.content} />
</div> </div>
</div> </div>
); );

@ -0,0 +1,33 @@
import { ReactElement } from "react";
import SyntaxHighlighter from "react-syntax-highlighter";
import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
import { cn } from "@/app/common/utils";
import { jetbrainsMono } from "@/app/common/font/font";
type CodeBlockProps = {
/**
* The code to highlight.
*/
code: string;
};
export function CodeBlock({ code }: CodeBlockProps): ReactElement {
return (
<SyntaxHighlighter
className="break-all !bg-transparent text-xs"
style={atomOneDark}
wrapLongLines
showLineNumbers
PreTag={"div"}
codeTagProps={{
style: {
fontFamily: jetbrainsMono.style.fontFamily,
fontWeight: jetbrainsMono.style.fontWeight,
fontStyle: jetbrainsMono.style.fontStyle,
},
}}
>
{code}
</SyntaxHighlighter>
);
}

@ -1,33 +0,0 @@
"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;