Fix syntax highlighting

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

_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

components/Post/markdown-styles.module.css

@@ -1,6 +1,5 @@
 /* Markdown CSS */
 .markdown code[class*='language-'] {
-  @apply text-black;
   text-shadow: none;
 }
 

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()
 }

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": {

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()