diff --git a/.babelrc b/.babelrc
new file mode 100644
index 00000000..f766b948
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,33 @@
+{
+    "presets": [
+      [
+        "babel-preset-gatsby"
+      ]
+    ],
+    "plugins": [
+      [
+        "prismjs",
+        {
+          "languages": [
+            "javascript",
+            "css",
+            "markup",
+            "json",
+            "handlebars",
+            "yaml",
+            "java",
+            "dart",
+            "xml",
+            "kotlin",
+            "go",
+            "bash",
+            "docker",
+            "dockerfile",
+            "groovy"
+          ],
+          "theme": "okaidia",
+          "css": true
+        }
+      ]
+    ]
+  }
diff --git a/gatsby-browser.js b/gatsby-browser.js
index abf0eb7d..ba458940 100755
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -1,4 +1,6 @@
 /* eslint-disable */
+require("prismjs/themes/prism-okaidia.css");
+
 /**
  * Trust All Scripts
  *
@@ -10,12 +12,14 @@
  *
  */
 var trustAllScripts = function () {
-    var scriptNodes = document.querySelectorAll('.load-external-scripts script');
+    var scriptNodes = document.querySelectorAll(
+        ".load-external-scripts script"
+    );
 
     for (var i = 0; i < scriptNodes.length; i += 1) {
         var node = scriptNodes[i];
-        var s = document.createElement('script');
-        s.type = node.type || 'text/javascript';
+        var s = document.createElement("script");
+        s.type = node.type || "text/javascript";
 
         if (node.attributes.src) {
             s.src = node.attributes.src.value;
@@ -23,7 +27,7 @@ var trustAllScripts = function () {
             s.innerHTML = node.innerHTML;
         }
 
-        document.getElementsByTagName('head')[0].appendChild(s);
+        document.getElementsByTagName("head")[0].appendChild(s);
     }
 };
 
diff --git a/package.json b/package.json
index bc8a0e13..6dd31b5d 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "@tryghost/helpers": "1.1.27",
     "@tryghost/helpers-gatsby": "1.0.31",
     "babel-plugin-prismjs": "^2.0.1",
-    "babel-preset-gatsby": "^0.4.0",
+    "babel-preset-gatsby": "^0.5.1",
     "cheerio": "1.0.0-rc.3",
     "dotenv": "^8.2.0",
     "gatsby": "2.23.20",
diff --git a/src/templates/post.js b/src/templates/post.js
index bb1b694c..0c61e9e2 100755
--- a/src/templates/post.js
+++ b/src/templates/post.js
@@ -1,62 +1,85 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { graphql } from 'gatsby'
-import { Helmet } from 'react-helmet'
+import React from "react";
+import PropTypes from "prop-types";
+import { graphql } from "gatsby";
+import { Helmet } from "react-helmet";
 
-import { Layout } from '../components/common'
-import { MetaData } from '../components/common/meta'
+import { Layout } from "../components/common";
+import { MetaData } from "../components/common/meta";
 
-import { Disqus } from 'gatsby-plugin-disqus'
+import { Disqus } from "gatsby-plugin-disqus";
 
-const config = require(`../utils/siteConfig`)
+import Prism from "prismjs";
+import "prismjs/plugins/line-numbers/prism-line-numbers.js";
+
+const config = require(`../utils/siteConfig`);
 
 /**
-* Single post view (/:slug)
-*
-* This file renders a single post and loads all the content.
-*
-*/
-const Post = ({ data, location }) => {
-    const post = data.ghostPost
+ * Single post view (/:slug)
+ *
+ * This file renders a single post and loads all the content.
+ *
+ */
+class Post extends React.Component {
+    constructor(props) {
+        super(props);
+    }
 
-    let disqusConfig = {
-        url: `${config.siteUrl + location.pathname}`,
-        identifier: post.id,
-        title: post.title,
+    componentDidMount() {
+        Prism.highlightAll();
     }
 
-    return (
-        <>
-            <MetaData
-                data={data}
-                location={location}
-                type="article"
-            />
-            <Helmet>
-                <style type="text/css">{`${post.codeinjection_styles}`}</style>
-            </Helmet>
-            <Layout>
-                <div className="container">
-                    <article className="content">
-                        { post.feature_image ?
-                            <figure className="post-feature-image">
-                                <img src={ post.feature_image } alt={ post.title } />
-                            </figure> : null }
-                        <section className="post-full-content">
-                            <h1 className="content-title">{post.title}</h1>
+    render() {
+        const data = this.props.data;
+        const location = this.props.location;
+
+        const post = data.ghostPost;
+
+        let disqusConfig = {
+            url: `${config.siteUrl + location.pathname}`,
+            identifier: post.id,
+            title: post.title,
+        };
 
-                            {/* The main post content */ }
-                            <section
-                                className="content-body load-external-scripts"
-                                dangerouslySetInnerHTML={{ __html: post.html }}
-                            />
-                            <Disqus config={disqusConfig} />
-                        </section>
-                    </article>
-                </div>
-            </Layout>
-        </>
-    )
+        post.html = post.html.replace(
+            new RegExp("<pre><code", "g"),
+            '<pre class="line-numbers"><code'
+        );
+
+        return (
+            <>
+                <MetaData data={data} location={location} type="article" />
+                <Helmet>
+                    <style type="text/css">{`${post.codeinjection_styles}`}</style>
+                </Helmet>
+                <Layout>
+                    <div className="container">
+                        <article className="content">
+                            {post.feature_image ? (
+                                <figure className="post-feature-image">
+                                    <img
+                                        src={post.feature_image}
+                                        alt={post.title}
+                                    />
+                                </figure>
+                            ) : null}
+                            <section className="post-full-content">
+                                <h1 className="content-title">{post.title}</h1>
+
+                                {/* The main post content */}
+                                <section
+                                    className="content-body load-external-scripts"
+                                    dangerouslySetInnerHTML={{
+                                        __html: post.html,
+                                    }}
+                                />
+                                <Disqus config={disqusConfig} />
+                            </section>
+                        </article>
+                    </div>
+                </Layout>
+            </>
+        );
+    }
 }
 
 Post.propTypes = {
@@ -69,9 +92,9 @@ Post.propTypes = {
         }).isRequired,
     }).isRequired,
     location: PropTypes.object.isRequired,
-}
+};
 
-export default Post
+export default Post;
 
 export const postQuery = graphql`
     query($slug: String!) {
@@ -79,4 +102,4 @@ export const postQuery = graphql`
             ...GhostPostFields
         }
     }
-`
+`;
diff --git a/yarn.lock b/yarn.lock
index 1ef784f3..c348fe20 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3436,6 +3436,7 @@ babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.8.0:
 babel-plugin-prismjs@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-prismjs/-/babel-plugin-prismjs-2.0.1.tgz#b56095f423926662259de8f5ee50a7afbcf0fd92"
+  integrity sha512-GqQGa3xX3Z2ft97oDbGvEFoxD8nKqb3ZVszrOc5H7icnEUA56BIjVYm86hfZZA82uuHLwTIfCXbEKzKG1BzKzg==
 
 babel-plugin-remove-graphql-queries@^2.9.12:
   version "2.9.12"
@@ -3461,25 +3462,6 @@ babel-plugin-transform-react-remove-prop-types@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"
 
-babel-preset-gatsby@^0.4.0:
-  version "0.4.12"
-  resolved "https://registry.yarnpkg.com/babel-preset-gatsby/-/babel-preset-gatsby-0.4.12.tgz#f69cbcb5e212761a6a11cd2d7a6032bfc672d22b"
-  integrity sha512-qsrIrZmwFhXyThBopqkhKqLLeKuNwjUA4CGRbW1ZXLdQhkbIcdOhbfmUfVibP1Nxao+l64XkeADdrLIFwfiZOw==
-  dependencies:
-    "@babel/plugin-proposal-class-properties" "^7.10.1"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.10.1"
-    "@babel/plugin-proposal-optional-chaining" "^7.10.3"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-    "@babel/plugin-transform-runtime" "^7.10.3"
-    "@babel/plugin-transform-spread" "^7.10.1"
-    "@babel/preset-env" "^7.10.3"
-    "@babel/preset-react" "^7.10.1"
-    "@babel/runtime" "^7.10.3"
-    babel-plugin-dynamic-import-node "^2.3.3"
-    babel-plugin-macros "^2.8.0"
-    babel-plugin-transform-react-remove-prop-types "^0.4.24"
-    gatsby-core-utils "^1.3.8"
-
 babel-preset-gatsby@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/babel-preset-gatsby/-/babel-preset-gatsby-0.5.1.tgz#c5847a2121a2670f2c84d4b82b82cff8e23c44d1"
@@ -7119,18 +7101,6 @@ gatsby-core-utils@^1.3.11:
     proper-lockfile "^4.1.1"
     xdg-basedir "^4.0.0"
 
-gatsby-core-utils@^1.3.8:
-  version "1.3.10"
-  resolved "https://registry.yarnpkg.com/gatsby-core-utils/-/gatsby-core-utils-1.3.10.tgz#f283b9c0c5281e678d3b8b77cf46ef3992971d3f"
-  integrity sha512-JtGP7lrbJanatO1j04mECRP7CHlnlexhS3KYUROQdcwxBvyIikkHYOt4FqS4FAQ6y6MqOvM1/uvpkbQbBx154Q==
-  dependencies:
-    ci-info "2.0.0"
-    configstore "^5.0.1"
-    fs-extra "^8.1.0"
-    node-object-hash "^2.0.0"
-    proper-lockfile "^4.1.1"
-    xdg-basedir "^4.0.0"
-
 gatsby-graphiql-explorer@^0.4.10:
   version "0.4.10"
   resolved "https://registry.yarnpkg.com/gatsby-graphiql-explorer/-/gatsby-graphiql-explorer-0.4.10.tgz#20357c444798fb694555c6b01981ba980abd8c4e"