✨ Highlight code in post

.gitignore

@@ -8,6 +8,7 @@ dist
 
 # Node dependencies
 node_modules
+bun.lock
 
 # Logs
 logs

app/composables/useMarkdownProcessor.ts

@@ -1,11 +1,12 @@
-import {
-  createMarkdownExit,
-  type PluginWithParams
-} from "markdown-exit"
+import { createMarkdownExit, type PluginWithParams } from "markdown-exit"
+import hljs from "highlight.js"
+import hljsMarkdown from "markdown-it-highlightjs"
 // @ts-ignore
 import texmath from "markdown-it-texmath"
 import katex from "katex"
 
+import "highlight.js/styles/a11y-dark.min.css"
+
 export function useMarkdownProcessor() {
   const serverUrl = useSolarNetworkUrl()
 
@@ -21,6 +22,7 @@ export function useMarkdownProcessor() {
       delimiters: "dollars",
       katexOptions: { macros: { "\\RR": "\\mathbb{R}" } }
     })
+    .use(hljsMarkdown, { hljs })
     .use(imgSolarNetworkPlugin, { serverUrl: serverUrl })
 
   // Keep the empty lines

package.json

@@ -25,9 +25,11 @@
     "blurhash": "^2.0.5",
     "cfturnstile-vue3": "^2.0.0",
     "eslint": "^9.39.1",
+    "highlightjs": "^9.16.2",
     "katex": "^0.16.25",
     "luxon": "^3.7.2",
     "markdown-exit": "^1.0.0-beta.6",
+    "markdown-it-highlightjs": "^4.2.0",
     "markdown-it-texmath": "^1.0.0",
     "nuxt": "^4.2.0",
     "nuxt-og-image": "^5.1.12",