fix codeblocks
This commit is contained in:
parent
5c81abedb4
commit
33f390ca92
@ -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
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>
|
||||||
);
|
);
|
||||||
|
33
src/app/components/codeBlock.tsx
Normal file
33
src/app/components/codeBlock.tsx
Normal file
@ -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;
|
|
Reference in New Issue
Block a user