highlight code with highlight.js

package-lock.json

@@ -3663,6 +3663,11 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
       "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0="
     },
+    "highlight.js": {
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz",
+      "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "highlight.js": "^9.12.0",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-fontawesome": "^1.6.1",

src/App.js

@@ -1,12 +1,13 @@
 import React, { Component } from 'react';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/github-gist.css';
 
 import { Container, Row, Column } from './skeleton';
 
-import { Header } from './Header';
-import { Footer } from './Footer';
-
-import { NavList, TagNav, HistoryNav } from './Nav';
 import { Article } from './Article';
+import { Footer } from './Footer';
+import { Header } from './Header';
+import { NavList, TagNav, HistoryNav } from './Nav';
 
 
 class App extends Component {
@@ -49,6 +50,11 @@ class App extends Component {
       />
     ];
   }
+
+  componentDidMount() {
+    // Auto-highlight all <pre><code> blocks
+    hljs.initHighlightingOnLoad();
+  }
 }
 
 export default App;