diff --git a/package-lock.json b/package-lock.json
index 6a28cc8..cc15af7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
 	"requires": true,
 	"packages": {
 		"": {
+			"name": "sveltesociety.dev",
 			"version": "0.0.1",
 			"dependencies": {
 				"svelte-highlight": "^3.2.0"
@@ -19,6 +20,7 @@
 				"eslint": "^7.22.0",
 				"eslint-config-prettier": "^8.1.0",
 				"eslint-plugin-svelte3": "^3.2.0",
+				"highlight.js": "^11.2.0",
 				"jest": "^27.1.0",
 				"mdsvex": "^0.9.3",
 				"prettier": "~2.2.1",
diff --git a/package.json b/package.json
index ccb2ac4..9a05a11 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
 		"eslint": "^7.22.0",
 		"eslint-config-prettier": "^8.1.0",
 		"eslint-plugin-svelte3": "^3.2.0",
+		"highlight.js": "^11.2.0",
 		"jest": "^27.1.0",
 		"mdsvex": "^0.9.3",
 		"prettier": "~2.2.1",
diff --git a/src/routes/cheatsheet/highlight.css b/src/lib/styles/highlight.css
similarity index 100%
rename from src/routes/cheatsheet/highlight.css
rename to src/lib/styles/highlight.css
diff --git a/src/routes/cheatsheet/_CheatSheetCard.svelte b/src/routes/cheatsheet/_CheatSheetCard.svelte
index da27abd..05e63ab 100644
--- a/src/routes/cheatsheet/_CheatSheetCard.svelte
+++ b/src/routes/cheatsheet/_CheatSheetCard.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import './highlight.css';
+	import '$styles/highlight.css';
 	import { HighlightSvelte } from 'svelte-highlight';
 	import { fly } from 'svelte/transition';
 
@@ -49,7 +49,7 @@
 	.title {
 		background-color: var(--secondary);
 		padding: var(--s-4);
-    color: var(--white);
+		color: var(--white);
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
diff --git a/src/routes/recipes/__layout.svelte b/src/routes/recipes/__layout.svelte
index f1d8c57..1bac60a 100644
--- a/src/routes/recipes/__layout.svelte
+++ b/src/routes/recipes/__layout.svelte
@@ -1,45 +1,47 @@
 <script lang="ts" context="module">
-  import { categories } from '$lib/stores/recipes';
+	import { categories } from '$lib/stores/recipes';
+	import '$styles/highlight.css';
 
-  export async function load({ fetch }) {
-    const res = await fetch('/recipes/recipes');
-    const recipeCategories = await res.json();
+	export async function load({ fetch }) {
+		const res = await fetch('/recipes/recipes');
+		const recipeCategories = await res.json();
 
-    if (!res.ok) {
-      return {
-        status: res.status,
-        error: new Error()
-      };
-    }
+		if (!res.ok) {
+			return {
+				status: res.status,
+				error: new Error()
+			};
+		}
 
-    categories.set(recipeCategories);
-    return { props: { categories: recipeCategories } };
-  }
+		categories.set(recipeCategories);
+		return { props: { categories: recipeCategories } };
+	}
 </script>
 
 <svelte:head>
-  <title>Recipes - Svelte Society</title>
+	<title>Recipes - Svelte Society</title>
 </svelte:head>
 
 <div class="container">
-  <slot />
+	<slot />
 </div>
 
 <style>
-  :global(article blockquote) {
-    background: rgba(255, 62, 1, 0.2);
-    border-radius: 5px 0px 0px 5px;
-    color: black;
-    border-left: 2px solid #ff3e01;
-  }
-  .container :global(h2), .container :global(h3) {
-    margin-top: 2rem;
-    margin-bottom: 1.25rem;
-  }
-  .container :global(p) {
-    margin-bottom: 1.25rem;
-  }
-  .container :global(li) {
-    margin-bottom: 1.1rem;
-  }
+	:global(article blockquote) {
+		background: rgba(255, 62, 1, 0.2);
+		border-radius: 5px 0px 0px 5px;
+		color: black;
+		border-left: 2px solid #ff3e01;
+	}
+	.container :global(h2),
+	.container :global(h3) {
+		margin-top: 2rem;
+		margin-bottom: 1.25rem;
+	}
+	.container :global(p) {
+		margin-bottom: 1.25rem;
+	}
+	.container :global(li) {
+		margin-bottom: 1.1rem;
+	}
 </style>
diff --git a/svelte.config.js b/svelte.config.js
index f353b7c..ea24c9a 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,5 +1,6 @@
 import adapter from '@sveltejs/adapter-static';
-import { mdsvex } from 'mdsvex';
+import { mdsvex, escapeSvelte } from 'mdsvex';
+import hljs from 'highlight.js';
 import path from 'path';
 
 const extensions = [`.svelte`, '.md', `.mdx`, '.svx'];
@@ -14,6 +15,12 @@ const config = {
 				eventPage: './src/lib/layouts/EventPage.svelte',
 				recipe: './src/lib/layouts/Recipe.svelte',
 				recipeCategory: './src/lib/layouts/RecipeCategory.svelte'
+			},
+			highlight: {
+				highlighter: (code) => {
+					const highlighted = escapeSvelte(hljs.highlightAuto(code).value);
+					return `{@html \`<pre class="hljs"><code>${highlighted}</code></pre>\`}`;
+				}
 			}
 		})
 	],