mirror of
https://github.com/LukeHagar/jsdoc-cheatsheet.git
synced 2025-12-06 04:20:07 +00:00
82090541ed
Integrate react-syntax-highlighter for improved code example rendering and enhance the JSDoc cheatsheet layout with a new navigation structure and quick reference section.
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
|
|
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'
|
|
|
|
interface SyntaxHighlighterProps {
|
|
code: string
|
|
language?: string
|
|
}
|
|
|
|
const CodeHighlighter = ({ code, language = "javascript" }: SyntaxHighlighterProps) => {
|
|
return (
|
|
<div className="rounded-lg overflow-hidden border border-slate-700">
|
|
<SyntaxHighlighter
|
|
language={language}
|
|
style={vscDarkPlus}
|
|
customStyle={{
|
|
background: '#0f172a',
|
|
borderRadius: '0.5rem',
|
|
fontSize: '0.875rem',
|
|
lineHeight: '1.6',
|
|
border: 'none',
|
|
margin: 0,
|
|
padding: '1rem',
|
|
}}
|
|
codeTagProps={{
|
|
style: {
|
|
fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
|
|
}
|
|
}}
|
|
showLineNumbers={false}
|
|
wrapLines={true}
|
|
wrapLongLines={true}
|
|
PreTag={({ children, ...props }) => (
|
|
<pre className="!m-0 !p-0" {...props}>
|
|
{children}
|
|
</pre>
|
|
)}
|
|
>
|
|
{code}
|
|
</SyntaxHighlighter>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CodeHighlighter |