diff --git a/README.md b/README.md
index 0cd4ca0..3e033b5 100644
--- a/README.md
+++ b/README.md
@@ -206,18 +206,28 @@ For example, if you want to use the `prism-duotone-sea` theme, then adjust the i
 
 ### Dev Dependencies
 - **@babel/core**: ^7.15.0
-- **@storybook/addon-actions**: ^6.3.7
+- **@chromatic-com/storybook**: ^1.2.25
+- **@mdx-js/loader**: ^3.0.1
+- **@storybook/addon-actions**: ^8.0.4
 - **@storybook/addon-essentials**: ^8.0.4
+- **@storybook/addon-interactions**: ^8.0.4
 - **@storybook/addon-links**: ^8.0.4
+- **@storybook/addon-onboarding**: ^8.0.4
+- **@storybook/blocks**: ^8.0.4
+- **@storybook/cli**: ^8.0.4
+- **@storybook/nextjs**: ^8.0.4
 - **@storybook/react**: ^8.0.4
+- **@storybook/test**: ^8.0.4
 - **autoprefixer**: ^10.4.19
 - **babel-loader**: ^8.2.2
 - **eslint**: ^8.57.0
 - **eslint-config-next**: 14.1.4
+- **eslint-plugin-storybook**: ^0.8.0
 - **globby**: ^14.0.1
 - **postcss**: ^8.4.38
 - **prettier**: ^3.2.5
 - **rss**: ^1.2.2
+- **storybook**: ^8.0.4
 - **tailwindcss**: ^3.4.1
 
 ## How it works
diff --git a/_posts/markdown-reference.md b/_posts/markdown-reference.md
index 665da7b..d065e10 100644
--- a/_posts/markdown-reference.md
+++ b/_posts/markdown-reference.md
@@ -250,7 +250,7 @@ And many more. Check out the [full list of supported langauges](https://prismjs.
 
 ### Collapsible summaries
 
-```markdown
+```html
 <details>
   <summary>Click to open or close</summary>
       ```ejs
diff --git a/components/Post/markdown-styles.module.css b/components/Post/markdown-styles.module.css
index 0de3946..f35f62d 100644
--- a/components/Post/markdown-styles.module.css
+++ b/components/Post/markdown-styles.module.css
@@ -1,6 +1,5 @@
 /* Markdown CSS */
 .markdown code[class*='language-'] {
-  @apply text-black;
   text-shadow: none;
 }
 
diff --git a/lib/markdownToHtml.js b/lib/markdownToHtml.js
index 877a2a4..40f5bbe 100644
--- a/lib/markdownToHtml.js
+++ b/lib/markdownToHtml.js
@@ -5,9 +5,9 @@ import remarkGfm from 'remark-gfm'
 
 export default async function markdownToHtml(markdown) {
   const result = await remark()
-    .use(html)
-    .use(remarkGfm)
     .use(prism)
+    .use(remarkGfm)
+    .use(html)
     .process(markdown)
   return result.toString()
 }
diff --git a/package-lock.json b/package-lock.json
index 60e0001..856a9c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "sandypockets-nextjs-blog-starter",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sandypockets-nextjs-blog-starter",
-      "version": "2.1.0",
+      "version": "2.2.0",
       "license": "MIT",
       "dependencies": {
         "@headlessui/react": "^1.7.18",
diff --git a/package.json b/package.json
index d551606..d881b54 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sandypockets-nextjs-blog-starter",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A create-next-app blog starter",
   "license": "MIT",
   "bugs": {
diff --git a/pages/posts/[slug].js b/pages/posts/[slug].js
index 5e41b3c..e122bdb 100644
--- a/pages/posts/[slug].js
+++ b/pages/posts/[slug].js
@@ -10,8 +10,16 @@ import Layout from '../../components/Layout/Layout'
 import PostBody from '../../components/Post/PostBody'
 import PostHeader from '../../components/Post/PostHeader'
 import PostTitle from '../../components/Post/PostTitle'
-// import 'prism-themes/themes/prism-atom-dark.min.css';
-// import 'prismjs/themes/prism-okaidia.css';
+import Prism from 'prismjs';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-ruby';
+import 'prismjs/components/prism-sass';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-markdown';
+import 'prism-themes/themes/prism-atom-dark.min.css';
+
 
 export default function Post({ post, morePosts, preview }) {
   const router = useRouter()