h1 Example of CodeBlocks using CodeMirror h1 Very straightforward to setup pretty codeblock editing color formatting using one of the many free open source packages For example the CodeMirror one is well established and easy to integrate as shown here First code block textarea class editor class ShoppingList extends React Component render return div className shopping list h1 Shopping List for this props name h1 ul li Instagram li li WhatsApp li li Oculus li ul div textarea Another code block textarea class editor for let i 0 i 10 i console log i count textarea link rel stylesheet href https cdnjs cloudflare com ajax libs codemirror 6 65 7 codemirror min css link rel stylesheet href https cdnjs cloudflare com ajax libs codemirror 6 65 7 theme elegant min css script src https cdnjs cloudflare com ajax libs codemirror 6 65 7 codemirror min js script script src https cdnjs cloudflare com ajax libs codemirror 6 65 7 mode htmlmixed htmlmixed min js script script src https cdnjs cloudflare com ajax libs codemirror 6 65 7 mode javascript javascript min js script script console log CodeMirror let editors document getElementsByClassName editor editors forEach ed let editor CodeMirror fromTextArea ed mode javascript theme elegant lineNumbers true autoCloseTags true smartIndent true editor setSize 100 50 script
odemirror 6 65 7 codemirror min css link rel stylesheet href https cdnjs cloudflare com ajax libs codemirror 6 65 7 theme elegant min css script src https cdnjs cloudflare com ajax libs codemirror 6 65 7 codemirror min js script script src https cdnjs cloudflare com ajax libs codemirror 6 65 7 mode htmlmixed htmlmixed min js script script src https cdnjs cloudflare com ajax libs codemirror 6 65 7 mode javascript javascript min js script script console log CodeMirror let editors document getElementsByClassName editor editors forEach ed let editor CodeMirror fromTextArea ed mode javascript theme elegant lineNumbers true autoCloseTags true smartIndent true editor setSize 100 50 script