React Highlight Editor
CSS
@import url('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css');
JSX
export default function HilightlightEditorPage() {
return <HighlightEditor
readOnly
value={jsxcode}
lang="jsx"
className="bg-gray-900 !text-sm"
/>
}
Try it
interface Props {
lang?: string;
value?: string;
readOnly?: boolean;
placeholder?: string;
pushValue?: string;
showToolbar?: boolean;
splitDiff?: boolean;
diffValue?: string;
className?: string;
tabSize?: number;
onChange?: (value: string) => void;
}
typescript
Try it diff
export default function HilightlightEditorPage() {
return <HighlightEditor
placeholder="Edit content..."
diffValue={jsxcode}
splitDiff
value={jsxcode}
tabSize={2}
className="mb-8 !h-[32rem] bg-gray-900 !text-sm"
/>
}
plaintext