diff --git a/client/SampleCode.jsx b/client/SampleCode.jsx
new file mode 100644
index 0000000..da4b24f
--- /dev/null
+++ b/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;
diff --git a/client/helpers/highlight.js b/client/helpers/highlight.js
new file mode 100755
index 0000000..84b7868
--- /dev/null
+++ b/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('&amp;', '&').trim();
+
+    return `<code class="hljs ${lang}">${highlighted}</code>`;
+};
+
+export default highlight;
diff --git a/package-lock.json b/package-lock.json
index 77dd45f..9b6c0cb 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index e789d73..b576330 100644
--- a/package.json
+++ b/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",