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';
 

src/routes/recipes/__layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" context="module">
 	import { categories } from '$lib/stores/recipes';
+	import '$styles/highlight.css';
 
 	export async function load({ fetch }) {
 		const res = await fetch('/recipes/recipes');
@@ -32,7 +33,8 @@
 		color: black;
 		border-left: 2px solid #ff3e01;
 	}
-  .container :global(h2), .container :global(h3) {
+	.container :global(h2),
+	.container :global(h3) {
 		margin-top: 2rem;
 		margin-bottom: 1.25rem;
 	}

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