feat: enhance code highlighting with flourite

Integrate flourite for improved language detection in code blocks, replacing manual detection logic. This enhances accuracy and supports a broader range of languages for syntax highlighting. Additionally, streamline CSS inclusion for code highlighting by importing directly from the package, reducing reliance on external CDN.

package.json

@@ -21,6 +21,7 @@
     "astro-seo": "^0.8.4",
     "cheerio": "1.0.0-rc.12",
     "dayjs": "^1.11.12",
+    "flourite": "^1.3.0",
     "lru-cache": "^11.0.0",
     "ofetch": "^1.3.4",
     "prismjs": "^1.29.0",

pnpm-lock.yaml

@@ -26,12 +26,18 @@ importers:
       dayjs:
         specifier: ^1.11.12
         version: 1.11.12
+      flourite:
+        specifier: ^1.3.0
+        version: 1.3.0
       lru-cache:
         specifier: ^11.0.0
         version: 11.0.0
       ofetch:
         specifier: ^1.3.4
         version: 1.3.4
+      prismjs:
+        specifier: ^1.29.0
+        version: 1.29.0
       sanitize-html:
         specifier: ^2.13.0
         version: 2.13.0
@@ -2739,6 +2745,10 @@ packages:
     resolution: {integrity: sha512-9UbaD6XdAL97+k/n+N7JwX46K/M6Zc6KcFYskrYL8wbBV/Uyk0CTAMY0VT+qiK5PM7AIc9aTWYtq65U7T+aCNQ==}
     engines: {node: '>=8'}
 
+  flourite@1.3.0:
+    resolution: {integrity: sha512-iuhWXuX07QwHMnJ1Irh4sD1bk/QFMHg8jVgWsjSAqoIqgIyJtRPnUNKyZAPXrw7pQkDvxb5AIz2KPihEoyVcqw==}
+    engines: {node: '>=16'}
+
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
@@ -7668,6 +7678,8 @@ snapshots:
 
   flattie@1.1.1: {}
 
+  flourite@1.3.0: {}
+
   fraction.js@4.3.7: {}
 
   fresh@0.5.2: {}

src/components/item.astro

@@ -1,5 +1,6 @@
 ---
 import '../assets/item.css'
+import 'prismjs/themes/prism.css'
 import dayjs from '../lib/dayjs'
 import { getEnv } from '../lib/env'
 

src/layouts/base.astro

@@ -57,10 +57,6 @@ const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT')
       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 */

src/lib/telegram/index.js

@@ -1,11 +1,12 @@
 import { $fetch } from 'ofetch'
 import * as cheerio from 'cheerio'
 import { LRUCache } from 'lru-cache'
-import Prism from 'prismjs'
+import prism from 'prismjs'
 import loadLanguages from 'prismjs/components/'
+import flourite from 'flourite'
 import { getEnv } from '../env'
 
-loadLanguages(['javascript', 'python', 'css', 'html'])
+loadLanguages(['c', 'clojure', 'cpp', 'cs', 'css', 'dart', 'dockerfile', 'elixir', 'go', 'html', 'java', 'javascript', 'json', 'julia', 'kotlin', 'lua', 'markdown', 'pascal', 'php', 'python', 'ruby', 'rust', 'sql', 'typescript', 'yaml'])
 
 const cache = new LRUCache({
   ttl: 1000 * 60 * 5, // 5 minutes
@@ -113,32 +114,19 @@ function modifyHTMLContent($, content, { index } = {}) {
       ?.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>`)
+    try {
+      const code = $(pre).text()
+      const language = flourite(code, { shiki: true })?.language
+      const highlightedCode = prism.highlight(code, prism.languages[language], language)
+      $(pre).html(`<code class="language-${language}">${highlightedCode}</code>`)
+    }
+    catch (error) {
+      console.error(error)
+    }
   })
   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