fix highlighting on posts and pages

src/App.js

@@ -6,7 +6,6 @@ import {
   withRouter
 } from 'react-router-dom';
 
-import hljs from 'highlight.js';
 import 'highlight.js/styles/github-gist.css';
 
 import { Container, Row, Column } from './skeleton';
@@ -67,10 +66,6 @@ class App extends Component {
 
   componentDidMount() {
     document.title = this.title;
-
-    // Auto-highlight all <pre><code> blocks
-    hljs.initHighlightingOnLoad();
-
   }
 }
 

src/Article.js

@@ -1,3 +1,4 @@
+import hljs from 'highlight.js';
 import React, { Component } from 'react';
 import Icon from 'react-fontawesome';
 import Markdown from 'react-markdown';
@@ -34,6 +35,12 @@ class Article extends Component {
     );
   }
 
+  componentDidMount() {
+    document.querySelectorAll('pre code').forEach(elm => {
+      hljs.highlightBlock(elm);
+    });
+  }
+
   postLink() {
     let date = new Date(this.props.article.date);
     let year = date.getUTCFullYear();

src/Page.js

@@ -1,3 +1,4 @@
+import hljs from 'highlight.js';
 import React, { Component } from 'react';
 import Markdown from 'react-markdown';
 import slugify from 'slugify';
@@ -45,6 +46,9 @@ class Page extends Component {
 
   componentDidMount() {
     this.fetchPage();
+    document.querySelectorAll('pre code').forEach(elm => {
+      hljs.highlightBlock(elm);
+    });
   }
 
   componentWillReceiveProps(props) {