pretty code as output

.gitignore

@@ -22,3 +22,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 package-lock.json
+package-lock.json

package.json

@@ -11,6 +11,7 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "blockly": "^3.20200625.2",
+    "prismjs": "^1.20.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",

src/components/CodeViewer.js

@@ -2,14 +2,35 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
+import Prism from "prismjs";
+import "prismjs/themes/prism.css";
+import "prismjs/plugins/line-numbers/prism-line-numbers";
+import "prismjs/plugins/line-numbers/prism-line-numbers.css";
+
 
 class CodeViewer extends Component {
 
+  componentDidMount() {
+    Prism.highlightAll();
+  }
+
+  componentDidUpdate() {
+    Prism.highlightAll();
+  }
+
   render() {
     return (
-      <div style={{height: '500px', border: '1px solid black'}}>
-        {this.props.arduino}
-        <p>{this.props.xml}</p>
+      <div style={{height: '500px', border: '1px solid black', overflow: 'auto', scrollbarWidth: 'thin'}}>
+        <pre className="line-numbers" style={{whiteSpace: 'pre-wrap', backgroundColor: 'white'}}>
+          <code className="language-clike">
+            {this.props.arduino}
+          </code>
+        </pre>
+        <pre className="line-numbers" style={{whiteSpace: 'pre-wrap', backgroundColor: 'white'}}>
+          <code className="language-xml">
+            {`${this.props.xml}`}
+          </code>
+        </pre>
       </div>
     );
   };