Fixed hljs langs mapping

src/components/EditForm.svelte

@@ -6,6 +6,7 @@
   import ComboBox from './ComboBox.svelte'
   import Icon from '@iconify/svelte'
   import { goto } from '$app/navigation'
+  import hljs from 'highlight.js'
 
   type Language = {
     text: string
@@ -31,7 +32,7 @@
   })
 
   selectedLang.subscribe((lang) => {
-    textWrap = lang === 'plt' || lang === 'md'
+    textWrap = lang === 'plaintext' || lang === 'markdown'
   })
 
   $: {

src/lib/utils.ts

@@ -1,3 +1,5 @@
+import hljs from 'highlight.js'
+
 export const slugify = (str: string) =>
   str
     .trim()
@@ -37,3 +39,8 @@ export const byId = (id: string) => document.getElementById(id)
 export function isInIframe(): boolean {
   return window !== window.parent
 }
+
+export function getHljsLangFromShort(short: string): string {
+  const langs = hljs.listLanguages().map((lang) => ({ lang, short: shorten(lang) }))
+  return langs.find((l) => l.short === short)?.lang ?? 'plaintext'
+}

src/routes/+page.svelte

@@ -8,7 +8,7 @@
   import rehypeStringify from 'rehype-stringify'
   import hljs from 'highlight.js'
   import 'highlight.js/styles/nord.min.css'
-  import { getLangFromUrl, isInIframe } from '$lib/utils'
+  import { getHljsLangFromShort, getLangFromUrl, isInIframe } from '$lib/utils'
   import TopBar from '../components/TopBar.svelte'
   import Icon from '@iconify/svelte'
   import CodeView from '../components/CodeView.svelte'
@@ -26,12 +26,16 @@
       let lang = getLangFromUrl()
       // Remove github flavored markdown, redundant with markdown
       lang = lang === 'gflm' ? 'md' : lang
+
+      // Get the correct language name for hljs
+      lang = getHljsLangFromShort(lang)
+
       // decompress the data
       const { decompress } = await import('$lib/brotli')
       decompressed = await decompress(hash)
 
       // Markdown
-      if (lang === 'md') {
+      if (lang === 'markdown') {
         const html = await unified()
           .use(remarkParse)
           .use(remarkGfm)
@@ -43,12 +47,12 @@
         htmlContent = html.toString()
       }
       // Plain text
-      else if (lang === 'plt' || !lang) {
+      else if (lang === 'plaintext' || !lang) {
         isPlainText = true
       }
       // Code
       else {
-        htmlContent = hljs.highlight(lang, decompressed).value
+        htmlContent = hljs.highlight(decompressed, { language: lang }).value
       }
     } else {
       // Redirect to editor page