Add code syntax highlighting (hljs)

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",

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",

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;

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>

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>\`}`;
+				}
 			}
 		})
 	],