react-refractor

import React from 'react'; import ReactDOM from 'react-dom/client'; import { Refractor, registerLanguage } from 'react-refractor'; // Import desired languages from 'refractor' and register them import js from 'refractor/lang/javascript'; import php from 'refractor/lang/php'; import css from 'refractor/lang/css'; registerLanguage(js); registerLanguage(php); registerLanguage(css); // A simple PrismJS theme can be included for basic styling // This would typically be imported from a CSS file like: import 'prismjs/themes/prism-dark.css'; // For demonstration, we'll just show the component usage. function App() { const jsCode = ` const greet = (name) => { console.log('Hello, ' + name + '!'); }; greet('World'); `; const phpCode = ` <?php $name = "PHP"; echo "Hello, " . $name . "!"; ?> `; return ( <div> <h2>JavaScript Example</h2> <Refractor language="javascript" value={jsCode} /> <h2>PHP Example</h2> <Refractor language="php" value={phpCode} /> <p>Note: Stylesheets are not automatically handled; apply your own Prism.js-compatible theme.</p> </div> ); } const root = ReactDOM.createRoot(document.getElementById('root') || document.createElement('div')); root.render(<App />);