mirror of
https://github.com/LukeHagar/jsdoc-cheatsheet.git
synced 2025-12-06 12:37:48 +00:00
d2c72f1250
Add a dedicated quick reference section to the JSDoc cheatsheet, streamline the layout for better readability, and adjust sidebar and table of contents styles for consistency.
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-2" {...props}>
|
|
{children}
|
|
</pre>
|
|
)}
|
|
>
|
|
{code}
|
|
</SyntaxHighlighter>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CodeHighlighter |