diff --git a/.gitignore b/.gitignore
index c79f84d..8b4a23d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@
 !.yarn/plugins
 !.yarn/releases
 !.yarn/versions
+bun.lockb
 
 # testing
 /coverage
@@ -43,3 +44,5 @@ next-env.d.ts
 .turbo
 
 .vercel
+
+debug.log
diff --git a/bun.lockb b/bun.lockb
deleted file mode 100644
index 7cb7ea1..0000000
Binary files a/bun.lockb and /dev/null differ
diff --git a/debug.log b/debug.log
deleted file mode 100644
index dfdb404..0000000
--- a/debug.log
+++ /dev/null
@@ -1,3 +0,0 @@
-[1027/133620.512:ERROR:crashpad_client_win.cc(810)] not connected
-[1027/150423.695:ERROR:crashpad_client_win.cc(810)] not connected
-[1027/150423.912:ERROR:crashpad_client_win.cc(810)] not connected
diff --git a/package.json b/package.json
index 21a8349..68e43cb 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "react": "19.0.0-rc-69d4b800-20241021",
     "react-dom": "19.0.0-rc-69d4b800-20241021",
     "react-error-boundary": "^4.1.2",
+    "react-refractor": "^3.1.1",
     "sanity": "^3.62.2",
     "sass": "^1.80.4",
     "sonner": "^1.5.0",
diff --git a/src/app/[slug]/page.tsx b/src/app/[slug]/page.tsx
index 35340ba..f7579a4 100644
--- a/src/app/[slug]/page.tsx
+++ b/src/app/[slug]/page.tsx
@@ -7,6 +7,8 @@ import Image from "next/image";
 import { Post, SanityImageAsset } from "@/sanity/sanity.types";
 import urlBuilder from "@sanity/image-url";
 import {getImageDimensions} from '@sanity/asset-utils'
+import { Refractor } from 'react-refractor'
+import js from 'refractor/lang/javascript'
 
 const POST_QUERY = defineQuery(`*[_type == "post" && slug.current == $slug][0]`);
 const POSTS_QUERY = defineQuery(`*[_type == "post"]{slug}`)
@@ -41,6 +43,16 @@ export default async function PostPage(props: { params: PageParams }) {
 
   const postImageUrl = post.mainImage ? urlFor(post.mainImage)?.width(550).height(310).url() : null;
 
+  function Code(props: {language: string, code: string, highlightedLines: number[]}) {
+    return (
+      <Refractor
+        language={props.language}
+        value={props.code}
+        markers={props.highlightedLines}
+      />
+    )
+  }
+  
   function PortableImage({ value, isInline }: { value: SanityImageAsset; isInline: boolean }) {
     const {width, height} = getImageDimensions(value)
     return <Image
@@ -78,9 +90,11 @@ export default async function PostPage(props: { params: PageParams }) {
           height="310"
         />
       )}
+
       <h1 className="text-4xl font-bold mb-8">{post.title}</h1>
       <div className="prose">
         <p>Published: {new Date(post.publishedAt ?? "").toISOString().substring(0, 10)}</p>
+        {Code({language: post.myCodeField?.language ?? "", code: post.myCodeField?.code ?? "", highlightedLines: post.myCodeField?.highlightedLines ?? []})}
         {Array.isArray(post.body) && <PortableText value={post.body} components={ { types: { image: PortableImage } } } />}
       </div>
     </main>