System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-19 22:05:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add syntax highlighting with react-syntax-highlighter

Browse source
This commit is contained in:
Kieran Klukas 2024-08-21 20:45:57 -04:00
parent 7e2b957be4
commit 22f2a8622f
No known key found for this signature in database
1 changed files with 25 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
components/arcade/showcase/readme-renderer.js
View file

@ -4,6 +4,9 @@ import rehypeRaw from 'rehype-raw'
import rehypeSanitize from 'rehype-sanitize'
import style from './readme-renderer.module.css'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { solarizedlight } from 'react-syntax-highlighter/dist/cjs/styles/prism'
const ReadmeRenderer = ({ markdown }) => {
return (
<ReactMarkdown
@ -11,9 +14,29 @@ const ReadmeRenderer = ({ markdown }) => {
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeRaw, rehypeSanitize]}
linkTarget={'_blank'}
>
components={{
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || '')
return !inline && match ? (
<SyntaxHighlighter
style={solarizedlight}
PreTag="div"
language={match[1]}
{...props}
>
{String(children).replace(/\n$/, '')}
</SyntaxHighlighter>
) : (
<code className={className} {...props}>
{children}
</code>
)
}
}}
>
{markdown}
</ReactMarkdown>
)
}
export default ReadmeRenderer
export default ReadmeRenderer