parse code snippets ie ``js const a = 1;`` in Telegram and perform syntax highlighting in the post using Prism

package.json

@@ -23,6 +23,7 @@
     "dayjs": "^1.11.12",
     "lru-cache": "^11.0.0",
     "ofetch": "^1.3.4",
+    "prismjs": "^1.29.0",
     "sanitize-html": "^2.13.0"
   },
   "devDependencies": {

src/layouts/base.astro

@@ -51,12 +51,8 @@ const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT')
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#f4f1ec" />
-    <link
-      rel="alternate"
-      type="application/rss+xml"
-      title={channel?.title}
-      href={origin + '/rss.xml'}
-    />
+    <link rel="alternate" type="application/rss+xml" title={channel?.title} href={origin + '/rss.xml'} />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-atom-dark.min.css" rel="stylesheet" />
     <style is:inline>
       @view-transition {
         navigation: auto; /* enabled */
@@ -64,9 +60,7 @@ const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT')
     </style>
     <SEO
       titleTemplate={`%s | ${channel?.title}`}
-      titleDefault={[channel?.title, seoParams.description]
-        .filter(Boolean)
-        .join(' - ')}
+      titleDefault={[channel?.title, seoParams.description].filter(Boolean).join(' - ')}
       twitter={{
         card: 'summary_large_image',
         creator: twitter ? `@${twitter}` : undefined,
@@ -86,19 +80,10 @@ const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT')
           <slot name="aside">
             <div class="nav">
               <div class="nav-item">
-                <a
-                  href={SITE_URL}
-                  title={channel?.title}
-                  class={`nav-link current`}>Home</a
-                >
+                <a href={SITE_URL} title={channel?.title} class={`nav-link current`}>Home</a>
               </div>
             </div>
-            <input
-              class="search-icon"
-              name="icon"
-              type="checkbox"
-              placeholder="Search"
-            />
+            <input class="search-icon" name="icon" type="checkbox" placeholder="Search" />
             <form class="search-form" action="/search/result" method="get">
               <input type="text" name="q" placeholder="Search" />
             </form>
@@ -112,12 +97,7 @@ const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT')
               >
                 BroadcastChannel
               </a> &
-              <a
-                href="https://github.com/Planetable/SiteTemplateSepia"
-                title="Sepia"
-                target="_blank"
-                rel="noopener"
-              >
+              <a href="https://github.com/Planetable/SiteTemplateSepia" title="Sepia" target="_blank" rel="noopener">
                 Sepia
               </a>
             </div>

src/lib/telegram/index.js

@@ -1,8 +1,12 @@
 import { $fetch } from 'ofetch'
 import * as cheerio from 'cheerio'
 import { LRUCache } from 'lru-cache'
+import Prism from 'prismjs'
+import loadLanguages from 'prismjs/components/'
 import { getEnv } from '../env'
 
+loadLanguages(['javascript', 'python', 'css', 'html'])
+
 const cache = new LRUCache({
   ttl: 1000 * 60 * 5, // 5 minutes
   maxSize: 50 * 1024 * 1024, // 50MB
@@ -108,9 +112,33 @@ function modifyHTMLContent($, content, { index } = {}) {
       ?.wrap('<label class="spoiler-button"></label>')
       ?.before(`<input type="checkbox" />`)
   })
+  $(content).find('pre').each((_index, pre) => {
+    const code = $(pre).text()
+    const language = detectLanguage(code) // You'll need to implement this function
+    const highlightedCode = Prism.highlight(code, Prism.languages[language], language)
+    $(pre).html(`<code class="language-${language}">${highlightedCode}</code>`)
+  })
   return content
 }
 
+function detectLanguage(code) {
+  // Implement a simple language detection logic
+  // This is a basic example and might need refinement
+  if (code.includes('function') || code.includes('const') || code.includes('let')) {
+    return 'javascript'
+  }
+  else if (code.includes('def ') || code.includes('import ')) {
+    return 'python'
+  }
+  else if (code.includes('<html>') || code.includes('<!DOCTYPE html>')) {
+    return 'html'
+  }
+  else if (code.includes('{') && code.includes('}') && code.includes(':')) {
+    return 'css'
+  }
+  return 'clike' // default to C-like syntax
+}
+
 function getPost($, item, { channel, staticProxy, index = 0 }) {
   item = item ? $(item).find('.tgme_widget_message') : $('.tgme_widget_message')
   const content = $(item).find('.js-message_reply_text')?.length > 0