Show lang used in code blocks
All checks were successful
Deploy Frontend / docker (17, 3.8.5) (push) Successful in 1m57s

This commit is contained in:
Braydon 2024-04-21 21:07:59 -04:00
parent 577851c69b
commit 132f45eec8

@ -18,6 +18,7 @@ import {
solarizedDark, solarizedDark,
stackoverflowDark, stackoverflowDark,
} from "react-syntax-highlighter/dist/esm/styles/hljs"; } from "react-syntax-highlighter/dist/esm/styles/hljs";
import { capitalize } from "@/lib/stringUtils";
/** /**
* The MDX components to style. * The MDX components to style.
@ -77,17 +78,28 @@ const components: any = {
className: string; className: string;
children: any; children: any;
}): ReactElement => { }): ReactElement => {
return className ? ( const language: string | undefined = className?.replace(
"language-",
""
); // The language of the code, if any
return language ? (
<div className="relative max-w-5xl">
<SyntaxHighlighter <SyntaxHighlighter
className="max-w-5xl !bg-muted break-all rounded-lg" className="!bg-muted/70 break-all rounded-lg"
language={className.replace("language-", "")} language={language}
style={atomOneDark} style={atomOneDark}
wrapLongLines wrapLongLines
> >
{children} {children}
</SyntaxHighlighter> </SyntaxHighlighter>
{/* Language Icon */}
<div className="absolute top-0 right-0 px-2 py-0.5 bg-zinc-700/50 rounded select-none pointer-events-none">
{capitalize(language)}
</div>
</div>
) : ( ) : (
<code className="p-2 max-w-5xl block bg-muted rounded-lg"> <code className="p-2 max-w-5xl block bg-muted/70 break-all rounded-lg">
{children} {children}
</code> </code>
); );