Highlight sample code

client/SampleCode.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import highlight from './helpers/highlight';
+
+const SampleCode = ({ code, lang }) => {
+    return code === ''
+            ? <></>
+            : (
+                <pre className="lh-copy mh0 mv3" dangerouslySetInnerHTML={{ __html: highlight(code, lang) }} />
+            );
+};
+
+export default SampleCode;

client/helpers/highlight.js

@@ -0,0 +1,11 @@
+import hljs from 'highlight.js';
+
+const highlight = (input, language) => {
+    const lang = language || 'html';
+    const { value } = hljs.highlight(lang, input);
+    const highlighted = value.replace('&', '&').trim();
+
+    return `<code class="hljs ${lang}">${highlighted}</code>`;
+};
+
+export default highlight;

package-lock.json

@@ -4137,6 +4137,11 @@
                 "util-deprecate": "^1.0.2"
             }
         },
+        "highlight.js": {
+            "version": "9.16.2",
+            "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.16.2.tgz",
+            "integrity": "sha512-feMUrVLZvjy0oC7FVJQcSQRqbBq9kwqnYE4+Kj9ZjbHh3g+BisiPgF49NyQbVLNdrL/qqZr3Ca9yOKwgn2i/tw=="
+        },
         "history": {
             "version": "4.10.1",
             "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",

package.json

@@ -6,6 +6,7 @@
         "postbuild": "react-snap"
     },
     "dependencies": {
+        "highlight.js": "^9.16.2",
         "react": "^16.12.0",
         "react-dom": "^16.12.0",
         "react-router-dom": "^5.1.2",