react-vite-themes
Version:
A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.
27 lines (26 loc) • 1.1 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import React, { useEffect, useRef } from 'react';
import Prism from 'prismjs';
import 'prismjs/components/prism-jsx';
import 'prismjs/components/prism-tsx';
import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-json';
import 'prismjs/components/prism-scss';
import 'prismjs/components/prism-css';
import './CodeBlock.scss';
export const CodeBlock = ({ code, language = 'tsx', className = '', showLineNumbers = false }) => {
const codeRef = useRef(null);
useEffect(() => {
if (codeRef.current) {
Prism.highlightElement(codeRef.current);
}
}, [code, language]);
const codeClasses = [
'code-block',
`language-${language}`,
showLineNumbers ? 'line-numbers' : '',
className
].filter(Boolean).join(' ');
return (_jsx("div", { className: codeClasses, children: _jsx("pre", { className: "code-pre", children: _jsx("code", { ref: codeRef, className: `language-${language}`, children: code }) }) }));
};