React Syntax Highlighter Examples You Can Edit and Run

import { useState } from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter';

const samples = {
  javascript: `const total = (items) =>\n  items.reduce((sum, i) => sum + i.price, 0);\n\nconsole.log(total([{ price: 4 }, { price: 6 }])); // 10`,
  python: `def total(items):\n    return sum(i["price"] for i in items)\n\nprint(total([{"price": 4}, {"price": 6}]))  # 10`,
  json: `{\n  "name": "demo",\n  "version": "1.0.0",\n  "private": true\n}`,
};

const btn = (active) => ({
  padding: '6px 12px', borderRadius: 6, border: 'none', cursor: 'pointer',
  background: active ? '#2563eb' : '#2a2a2a', color: '#fff', font: '13px system-ui',
});

export default function App() {
  const [lang, setLang] = useState('javascript');
  return (
    <div style={{ background: '#111', height: 360, padding: 20, boxSizing: 'border-box',
      font: '13px system-ui', color: '#bbb' }}>
      <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
        {Object.keys(samples).map((l) => (
          <button key={l} style={btn(l === lang)} onClick={() => setLang(l)}>{l}</button>
        ))}
      </div>
      <SyntaxHighlighter language={lang} customStyle={{ borderRadius: 8, padding: 16, fontSize: 14 }}>
        {samples[lang]}
      </SyntaxHighlighter>
      <p>{SyntaxHighlighter.supportedLanguages.length} languages available in this build</p>
    </div>
  );
}