Skip to content

Commit

Permalink
fix: correct syntax highlighter hydration and types
Browse files Browse the repository at this point in the history
  • Loading branch information
@0-vortex
0-vortex committed Nov 30, 2023
1 parent 3fd3104 commit 249a988
Show file tree
Hide file tree
Showing 4 changed files with 1,193 additions and 89 deletions.
1 change: 0 additions & 1 deletion app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import 'tailwindcss/tailwind.css'
import { JetBrains_Mono, PT_Sans, Ubuntu } from 'next/font/google'
import { ReactNode } from 'react'

import { Providers } from '@/app/providers'
import { ThemeProvider } from '@/components/shared/ThemeProvider'

const serif = Ubuntu({
Expand Down
115 changes: 58 additions & 57 deletions components/shared/HighlightCode.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
'use client';

import clsx from 'clsx'
import { Highlight, themes } from 'prism-react-renderer'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { tomorrow } from 'react-syntax-highlighter/dist/cjs/styles/prism'

interface HighlightCodeProps {
code: string
Expand All @@ -12,69 +11,71 @@ export function HighlightCode(props: HighlightCodeProps) {
const { code, language } = props

return (
<Highlight code={code} language={language} theme={themes.oneDark}>
{({ style, tokens, getLineProps, getTokenProps }) => (
<figure className={clsx([
'block bg-white text-black border -m-[0.5px] relative w-full-1 rounded-xl overflow-hidden',
'dark:bg-black dark:text-white max-w-[60rem] mx-auto',
<>
<figure className={clsx([
'block text-black border -m-[0.5px] relative w-full-1 max-w-[60rem] mx-auto my-1 rounded-md overflow-hidden',
'bg-gray-100/90 border-slate-500',
'dark:bg-neutral-800/90 dark:border-black',
])}>
<figcaption className={clsx([
'bg-putty text-black dark:text-white border -mx-[1px] -mt-[1px] flex justify-between',
'dark:bg-charcoal '
])}>
<figcaption className={clsx([
'bg-putty text-black dark:text-white border -mx-[1px] -mt-[1px] flex justify-between',
'dark:bg-charcoal ',
])}>
<div className={clsx([
'font-body text-base tracking-wide leading-normal font-normal normal-case py-[0.5rem] px-[0.5rem]'
])}>{language}</div>
<div className={clsx([
'font-body text-base tracking-wide leading-normal font-normal normal-case py-[0.5rem] px-[0.5rem]'
])}>{language}</div>

<button className={clsx([
'relative group/button inline-block -m-[1px] font-mono text-sm leading-mono font-normal uppercase',
])}>
<button className={clsx([
'relative group/button inline-block -m-[1px] font-mono text-sm leading-mono font-normal uppercase'
])}>
<span
className="opacity-100 pointer-events-auto col-start-1 row-start-1 flex items-center justify-center">
className='opacity-100 pointer-events-auto col-start-1 row-start-1 flex items-center justify-center'>
<svg
width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg"
className="mr-0.5">
<rect x="3.5" y="3.5" width="12" height="14" className="stroke-current" vectorEffect="non-scaling-stroke"></rect>
<path d="M3.5 14.5H0.5V0.5H12.5V3.5" className="stroke-current" vectorEffect="non-scaling-stroke"></path>
width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'
className='mr-0.5'>
<rect x='3.5' y='3.5' width='12' height='14' className='stroke-current'
vectorEffect='non-scaling-stroke'></rect>
<path d='M3.5 14.5H0.5V0.5H12.5V3.5' className='stroke-current'
vectorEffect='non-scaling-stroke'></path>
</svg>
<span className="sr-only">Copy Icon</span>
<span className='sr-only'>Copy Icon</span>
Copy
</span>
</button>
</figcaption>
</button>
</figcaption>

<pre style={style} className={clsx([
<SyntaxHighlighter
language={language}
style={tomorrow}
showLineNumbers={true}
useInlineStyles={true}
wrapLines={true}
customStyle={{
// background: 'transparent',
margin: 0,
padding: 0,
}}
className={clsx([
'overflow-x-scroll px-[0.875rem] max-h-[42rem] overflow-y-scroll py-0'
])}>
<div className={clsx([
'sticky top-0 h-[0.5rem] mb-[0.5rem] bg-gradient-to-b from-black z-10'
])}></div>

<code className={clsx([
'font-mono leading-code normal-case max-w-full text-sm [counter-reset:linenumber]',
])}>
{tokens.map((line, i) => (
<div key={i} {...getLineProps({ line })} className={clsx([
`[padding-left:calc(0.875rem+2ch)]`
])}>
<span className={clsx([
'[counter-increment:linenumber] inline-block w-0',
`before:whitespace-nowrap before:content-[counter(linenumber)] relative text-right inline-block w-[2ch] [left:calc(-0.875rem-2ch)]`
])}></span>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token })} />
))}
</div>
))}
</code>

<div className={clsx([
'sticky bottom-0 h-[0.5rem] mt-[0.5rem] bg-gradient-to-t from-black z-10'
])}></div>
</pre>
</figure>
)}
</Highlight>
])}
codeTagProps={{
className: clsx([
'font-mono leading-code normal-case max-w-full text-sm'
])
}}
// lineNumberContainerStyle
// lineNumberStyle
// wrapLongLines
// lineProps={() => ({
// class: clsx([
// 'leading-code normal-case max-w-full text-sm font-mono'
// ])
// })}
>
{code}
</SyntaxHighlighter>
</figure>
</>
);
}

Expand Down
Loading

0 comments on commit 249a988

Please sign in to comment.