prism highlight on the backend

src/markdown/renderer-extension.ts

@@ -1,3 +1,8 @@
+import Prism from 'prismjs'
+import loadLanguages from 'prismjs/components/index'
+
+loadLanguages(['shell', 'markdown', 'json', 'yaml', 'typescript'])
+
 function getNFResize(href: string, height: number, width: number) {
   return `${href}?nf_resize=fit&h=${height}&w=${width}`
 }
@@ -38,4 +43,12 @@ export const renderer = {
       </figure>
     `
   },
+  code(source: string, lang: string) {
+    const highlightedSource = Prism.highlight(
+      source,
+      Prism.languages[lang],
+      lang
+    )
+    return `<pre class='language-${lang}'><code class='language-${lang}'>${highlightedSource}</code></pre>`
+  },
 }

src/routes/$layout.svelte

@@ -1,13 +1,17 @@
 <script context="module" lang="typescript">
   import { take } from 'ramda'
-  import type { LoadInput, LoadOutput } from '@sveltejs/kit/types/page';
+  import type { LoadInput, LoadOutput } from '@sveltejs/kit/types/page'
 
   export function load({ fetch, page }: LoadInput): Promise<LoadOutput> {
     return fetch(`/blog.json`)
       .then((r) => r.json())
       .then((posts) => {
-        console.log(page)
-        return { props: { latestPosts: take(5, posts), segment: page.path }}
+        return {
+          props: {
+            latestPosts: take(5, posts),
+            segment: page.path,
+          },
+        }
       })
   }
 </script>
@@ -19,6 +23,15 @@
   export let latestPosts
 </script>
 
+<div class="app-content">
+  <Nav {segment} />
+
+  <main>
+    <slot />
+  </main>
+  <Footer {latestPosts} />
+</div>
+
 <style>
   .app-content {
     display: grid;
@@ -35,12 +48,3 @@
     box-sizing: border-box;
   }
 </style>
-
-<div class="app-content">
-  <Nav {segment} />
-
-  <main>
-    <slot />
-  </main>
-  <Footer {latestPosts} />
-</div>

src/routes/blog/[slug].json.ts

@@ -3,12 +3,13 @@ import { promisify } from 'util'
 import fm from 'front-matter'
 import { parseField } from '../../markdown/parse-markdown'
 import type { PostAttributes } from './_content'
+import type { Request, Response } from '@sveltejs/kit'
 
 export interface SinglePost {
   body: string
 }
 
-export async function get({ params }) {
+export async function get({ params }: Request): Promise<Response> {
   // the `slug` parameter is available because
   // this file is called [slug].json.js
   const { slug } = params

src/routes/blog/[slug].svelte

@@ -1,38 +1,34 @@
 <script context="module" lang="typescript">
-  /**
-	 * @type {import('@sveltejs/kit').Load}
-	 */
-  export async function load({ fetch, page: { params }}) {
+  import type { LoadInput, LoadOutput } from '@sveltejs/kit/types/page'
+
+  export async function load({
+    fetch,
+    page: { params },
+  }: LoadInput): Promise<LoadOutput> {
     try {
       const res = await fetch(`${params.slug}.json`)
       const data = await res.json()
-  
+
       if (res.ok) {
-        return { props: { post: data }}
-      } 
+        return { props: { post: data } }
+      }
       return {
         status: res.status,
-        error: new Error(`Could not load ${params.slug} post`)
+        error: new Error(`Could not load ${params.slug} post`),
       }
-    } catch(e) {
+    } catch (e) {
       return {
         status: 500,
-        error: e
+        error: e,
       }
     }
   }
 </script>
 
 <script lang="typescript">
-  import { onMount } from 'svelte'
   import ArticleFooter from '../../components/blog/article-footer.svelte'
-  // import Prism from '../../../static/prism.js'
 
   export let post
-
-  onMount(() => {
-    // Prism.highlightAll()
-  })
 </script>
 
 <svelte:head>