diff --git a/contents/docs/integrations/android-integration.mdx b/contents/docs/integrations/android-integration.mdx
index 1b5c5c199daa..2248e8b8203c 100644
--- a/contents/docs/integrations/android-integration.mdx
+++ b/contents/docs/integrations/android-integration.mdx
@@ -27,7 +27,7 @@ dependencies {
 
 The best place to initialize the client is in your `Application` subclass.
 
-```java
+```js
 public class SampleApp extends Application {
   private static final String POSTHOG_API_KEY = "<ph_project_api_key>";
   private static final String POSTHOG_HOST = "<ph_instance_address>";
@@ -64,7 +64,7 @@ An identify call requires:
 * `distinctId` which uniquely identifies your user in your database
 * `userProperties` with a dictionary of key:value pairs
 
-```java
+```js
 PostHog.with(this)
        .identify(distinctID, new Properties()
                                 .putValue("name", "My Name")
@@ -91,7 +91,7 @@ Optionally you can submit:
 
 For example:
 
-```java
+```js
 PostHog.with(this)
        .capture("Button B Clicked", new Properties()
                                         .putValue("color", "blue")
@@ -106,7 +106,7 @@ Setting this to `1` will send events immediately and will use more battery. The
 You can also configure the flush interval. By default we flush all events after `30` seconds,
 no matter how many events have been gathered.
 
-```java
+```js
 PostHog posthog = new PostHog.Builder(this, POSTHOG_API_KEY, POSTHOG_HOST)
   .flushQueueSize(20)
   .flushInterval(30, TimeUnit.SECONDS)
@@ -116,7 +116,7 @@ PostHog posthog = new PostHog.Builder(this, POSTHOG_API_KEY, POSTHOG_HOST)
 
 You can also manually flush the queue:
 
-```java
+```js
 PostHog.with(this)
        .flush();
 ```
@@ -125,7 +125,7 @@ PostHog.with(this)
 
 To reset the user's ID and anonymous ID, call `reset`. Usually you would do this right after the user logs out.
 
-```java
+```js
 PostHog.with(this)
        .reset();
 ```
@@ -138,7 +138,7 @@ If you want to manually send a new screen capture event, use the `screen` functi
 
 This function requires a `name`. You may also pass in an optional `properties` object.
 
-```java
+```js
 PostHog.with(this)
        .screen("Dashboard", new Properties()
                                   .putValue("background", "blue")
@@ -150,7 +150,7 @@ PostHog.with(this)
 
 When creating the PostHog client, there are many options you can set:
 
-```java
+```js
 PostHog posthog = new PostHog.Builder(this, POSTHOG_API_KEY, POSTHOG_HOST)
     // Record certain application events automatically! (off/false by default)
     .captureApplicationLifecycleEvents()
diff --git a/contents/docs/integrations/flutter-integration.mdx b/contents/docs/integrations/flutter-integration.mdx
index fa894a5a4361..d0d396c5ffa6 100644
--- a/contents/docs/integrations/flutter-integration.mdx
+++ b/contents/docs/integrations/flutter-integration.mdx
@@ -40,7 +40,7 @@ To use this plugin, add `posthog_flutter` as a [dependency in your pubspec.yaml
 
 ### Example
 
-```java
+```js
 import 'package:flutter/material.dart';
 import 'package:posthog_flutter/posthog_flutter.dart';
 
diff --git a/contents/docs/integrations/ios-integration.mdx b/contents/docs/integrations/ios-integration.mdx
index 25d8a1fb89bf..8c78903ffcd7 100644
--- a/contents/docs/integrations/ios-integration.mdx
+++ b/contents/docs/integrations/ios-integration.mdx
@@ -49,7 +49,7 @@ configuration.recordScreenViews = YES; // Record screen views automatically!
 
 ### With Swift
 
-```swift
+```js
 import PostHog
 
 // `host` is optional if you use PostHog Cloud (app.posthog.com)
@@ -86,7 +86,7 @@ For example:
                                        @"email": @"peter@familyguy.com" }];
 ```
 
-```swift
+```js
 // in swift
 posthog.identify("user_id_from_your_database", 
           properties: ["name": "Peter Griffin", "email": "peter@familyguy.com"])
@@ -117,7 +117,7 @@ For example:
 [[PHGPostHog sharedPostHog] capture:@"Signed Up" properties:@{ @"plan": @"Pro++" }];
 ```
 
-```swift
+```js
 // in swift
 posthog.capture("Signed Up", properties: ["plan": "Pro++"])
 ```
@@ -139,7 +139,7 @@ You can also manually flush the queue:
 [[PHGPostHog sharedPostHog] flush]
 ```
 
-```swift
+```js
 // in swift
 posthog.capture("Logged Out")
 posthog.flush()
@@ -154,7 +154,7 @@ To reset the user's ID and anonymous ID, call `reset`. Usually you would do this
 [[PHGPostHog sharedPostHog] reset]
 ```
 
-```swift
+```js
 // in swift
 posthog.reset()
 ```
@@ -170,7 +170,7 @@ If you want to manually send a new screen capture event, use the `screen` functi
 [[PHGPostHog sharedPostHog] screen:@"Dashboard" properties:@{ @"fromIcon": @"bottom" }];
 ```
 
-```swift
+```js
 // in swift
 posthog.capture("Dashboard", properties: ["fromIcon": "bottom"])
 ```
diff --git a/contents/docs/integrations/php-integration.mdx b/contents/docs/integrations/php-integration.mdx
index 1a32426ec608..27def9289664 100644
--- a/contents/docs/integrations/php-integration.mdx
+++ b/contents/docs/integrations/php-integration.mdx
@@ -24,7 +24,7 @@ And then install the dependencies with the command: `php composer.phar install`
 
 In your app, set your API key before making any calls.
 
-```php
+```js
 PostHog::init("<ph_project_api_key>",
   array('host' => '<ph_instance_address>') // You can remove this line if you're using app.posthog.com
 );
@@ -49,7 +49,8 @@ Optionally you can submit:
 - `properties`, which is an array with any information you'd like to add
 
 For example:
-```php
+
+```js
 PostHog::capture(array(
   'distinctId' => 'user:123',
   'event' => 'movie played',
@@ -73,7 +74,7 @@ An `identify` call requires:
 
 For example:
 
-```
+```js
 PostHog::identify(array(
   'distinctId' => 'user:123',
   'properties' => array(
@@ -101,7 +102,7 @@ An alias call requires:
 
 For example:
 
-```
+```js
 PostHog::alias(array(
   'distinctId' => 'user:123',
   'alias' => 'user:12345'
@@ -112,7 +113,7 @@ PostHog::alias(array(
 
 If you're aiming for a full back-end implementation of PostHog, you can send pageviews from your backend
 
-```php
+```js
 PostHog::capture(array(
   'distinctId' => 'user:123',
   'event' => '$pageview',
diff --git a/gatsby-node.js b/gatsby-node.js
index 830b0c123a49..00b78eaff947 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -1,3 +1,5 @@
+const path = require('path')
+
 exports.createPages = require('./gatsby/createPages')
 exports.onCreateNode = require('./gatsby/onCreateNode')
 
@@ -14,3 +16,18 @@ exports.onCreatePage = async ({ page, actions }) => {
         createPage(page)
     }
 }
+
+exports.onCreateWebpackConfig = ({ stage, actions }) => {
+    actions.setWebpackConfig({
+        resolve: {
+            extensions: ['.js', '.ts', '.tsx'],
+            alias: {
+                '~': path.resolve(__dirname, 'src'),
+                lib: path.resolve(__dirname, 'src', 'lib'),
+                types: path.resolve(__dirname, 'src', 'types'),
+                images: path.resolve(__dirname, 'src', 'images'),
+                components: path.resolve(__dirname, 'src', 'components'),
+            },
+        },
+    })
+}
diff --git a/package.json b/package.json
index 1eaf076ec004..7cf42365b545 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
         "node-fetch": "^2.6.1",
         "node-sass": "^4.14.1",
         "postcss": "^8.2.6",
-        "prism-react-renderer": "^1.1.1",
+        "prism-react-renderer": "^1.2.0",
         "prismjs": "^1.23.0",
         "query-string": "^6.13.1",
         "react": "^16.13.1",
diff --git a/src/components/CodeBlock/index.tsx b/src/components/CodeBlock/index.tsx
index 423a379983f3..85ebdb0a407c 100644
--- a/src/components/CodeBlock/index.tsx
+++ b/src/components/CodeBlock/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import Highlight, { defaultProps, Language } from 'prism-react-renderer'
-import { OkaidiaTheme } from '../../lib/okaidia'
+import theme from 'prism-react-renderer/themes/okaidia'
 import { getCookie, generateRandomHtmlId } from '../../lib/utils'
 import { useValues } from 'kea'
 import { posthogAnalyticsLogic } from '../../logic/posthogAnalyticsLogic'
@@ -76,7 +76,7 @@ export const CodeBlock = (props: CodeBlockProps) => {
             {...defaultProps}
             code={code || props.children.props.children.trim()}
             language={language as Language}
-            theme={OkaidiaTheme}
+            theme={theme}
         >
             {({ className, style, tokens, getLineProps, getTokenProps }) => (
                 <pre className={className} style={{ ...style, padding: '20px' }} id={codeBlockId}>
diff --git a/src/lib/okaidia/index.ts b/src/lib/okaidia/index.ts
deleted file mode 100644
index 4d52519a4a56..000000000000
--- a/src/lib/okaidia/index.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import { PrismTheme } from 'prism-react-renderer'
-
-export const OkaidiaTheme: PrismTheme = {
-    plain: {
-        color: '#f8f8f2',
-        backgroundColor: '#272822',
-    },
-    styles: [
-        {
-            types: ['changed'],
-            style: {
-                color: 'rgb(162, 191, 252)',
-                fontStyle: 'italic',
-            },
-        },
-        {
-            types: ['deleted'],
-            style: {
-                color: '#f92672',
-                fontStyle: 'italic',
-            },
-        },
-        {
-            types: ['inserted'],
-            style: {
-                color: 'rgb(173, 219, 103)',
-                fontStyle: 'italic',
-            },
-        },
-        {
-            types: ['comment'],
-            style: {
-                color: '#8292a2',
-                fontStyle: 'italic',
-            },
-        },
-        {
-            types: ['string', 'url'],
-            style: {
-                color: '#a6e22e',
-            },
-        },
-        {
-            types: ['variable'],
-            style: {
-                color: '#f8f8f2',
-            },
-        },
-        {
-            types: ['number'],
-            style: {
-                color: '#ae81ff',
-            },
-        },
-        {
-            types: ['builtin', 'char', 'constant', 'function', 'class-name'],
-            style: {
-                color: '#e6db74',
-            },
-        },
-        {
-            types: ['punctuation'],
-            style: {
-                color: '#f8f8f2',
-            },
-        },
-        {
-            types: ['selector', 'doctype'],
-            style: {
-                color: '#a6e22e',
-                fontStyle: 'italic',
-            },
-        },
-        {
-            types: ['tag', 'operator', 'keyword'],
-            style: {
-                color: '#66d9ef',
-            },
-        },
-        {
-            types: ['boolean'],
-            style: {
-                color: '#ae81ff',
-            },
-        },
-        {
-            types: ['namespace'],
-            style: {
-                color: 'rgb(178, 204, 214)',
-                opacity: 0.7,
-            },
-        },
-        {
-            types: ['tag', 'property'],
-            style: {
-                color: '#f92672',
-            },
-        },
-        {
-            types: ['attr-name'],
-            style: {
-                color: '#a6e22e !important',
-            },
-        },
-        {
-            types: ['doctype'],
-            style: {
-                color: '#8292a2',
-            },
-        },
-        {
-            types: ['rule'],
-            style: {
-                color: '#e6db74',
-            },
-        },
-    ],
-}
diff --git a/src/pages/index.js b/src/pages/index.js
index 25bf24010d43..91092107e1f2 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -16,13 +16,13 @@ import visualizeTrends from '../images/retro-product-trends.svg'
 import retroFlagsImg from '../images/retro-feature-flags.svg'
 import selfHostedImg from '../images/self-host.svg'
 import sessionRecordingImg from '../images/session-recording-3.svg'
-import { SEO } from '../components/seo'
-import Layout from '../components/Layout'
-import { FeaturedSectionTextLeft } from '../components/Sections/FeaturedSectionTextLeft'
-import { FeaturedSectionTextRight } from '../components/Sections/FeaturedSectionTextRight'
-import { FeaturedSectionTripleImage } from '../components/Sections/FeaturedSectionTripleImage'
-import { Spacer } from '../components/Spacer'
-import { DesignedForYourStackBlock } from '../components/Sections/DesignedForYourStackBlock'
+import { SEO } from 'components/seo'
+import Layout from 'components/Layout'
+import { FeaturedSectionTextLeft } from 'components/Sections/FeaturedSectionTextLeft'
+import { FeaturedSectionTextRight } from 'components/Sections/FeaturedSectionTextRight'
+import { FeaturedSectionTripleImage } from 'components/Sections/FeaturedSectionTripleImage'
+import { Spacer } from 'components/Spacer'
+import { DesignedForYourStackBlock } from 'components/Sections/DesignedForYourStackBlock'
 import { useActions } from 'kea'
 import { layoutLogic } from '../logic/layoutLogic'
 
diff --git a/yarn.lock b/yarn.lock
index 6b90a489814b..786ce0e8cd0b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12870,10 +12870,10 @@ pretty-hrtime@^1.0.3:
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
   integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
 
-prism-react-renderer@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.1.1.tgz#1c1be61b1eb9446a146ca7a50b7bcf36f2a70a44"
-  integrity sha512-MgMhSdHuHymNRqD6KM3eGS0PNqgK9q4QF5P0yoQQvpB6jNjeSAi3jcSAz0Sua/t9fa4xDOMar9HJbLa08gl9ug==
+prism-react-renderer@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.2.0.tgz#5ad4f90c3e447069426c8a53a0eafde60909cdf4"
+  integrity sha512-GHqzxLYImx1iKN1jJURcuRoA/0ygCcNhfGw1IT8nPIMzarmKQ3Nc+JcG0gi8JXQzuh0C5ShE4npMIoqNin40hg==
 
 prismjs@^1.23.0:
   version "1.23.0"