From ddfcec21c23745c4436a5d91db5ee23d7c7db732 Mon Sep 17 00:00:00 2001 From: Pierre Nel Date: Fri, 9 Aug 2024 11:37:54 +0200 Subject: [PATCH 1/5] parse code snippets ie ```js const a = 1;``` in Telegram and perform syntax highlighting in the post using Prism --- package.json | 1 + src/layouts/base.astro | 32 ++++++-------------------------- src/lib/telegram/index.js | 28 ++++++++++++++++++++++++++++ 3 files changed, 35 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index 7dd14a2..1153891 100644 --- a/package.json +++ b/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": { diff --git a/src/layouts/base.astro b/src/layouts/base.astro index f434601..50c626f 100644 --- a/src/layouts/base.astro +++ b/src/layouts/base.astro @@ -51,12 +51,8 @@ const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT') - + +
- Home + Home
- +
@@ -112,12 +97,7 @@ const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT') > BroadcastChannel & - + Sepia diff --git a/src/lib/telegram/index.js b/src/lib/telegram/index.js index 603a413..f9a4ac4 100644 --- a/src/lib/telegram/index.js +++ b/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('') ?.before(``) }) + $(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(`${highlightedCode}`) + }) 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('') || code.includes('')) { + 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 From cee00bde0d88b52771af2b2b7cddb4fdb7c8a518 Mon Sep 17 00:00:00 2001 From: Pierre Nel Date: Fri, 9 Aug 2024 11:46:50 +0200 Subject: [PATCH 2/5] Update base.astro Undid vscode mangling the rest of the file --- src/layouts/base.astro | 36 ++++++++++++++++++++++++++++++------ 1 file changed, 30 insertions(+), 6 deletions(-) diff --git a/src/layouts/base.astro b/src/layouts/base.astro index 50c626f..cd0fdc1 100644 --- a/src/layouts/base.astro +++ b/src/layouts/base.astro @@ -51,8 +51,16 @@ const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT') - - + +
- Home + Home
- +
@@ -97,7 +116,12 @@ const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT') > BroadcastChannel & - + Sepia From 793bc52f198bb14142bc981d867bb90978cbc59b Mon Sep 17 00:00:00 2001 From: ccbikai Date: Sun, 11 Aug 2024 10:14:03 +0800 Subject: [PATCH 3/5] 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 | 1 + pnpm-lock.yaml | 12 ++++++++++++ src/components/item.astro | 1 + src/layouts/base.astro | 4 ---- src/lib/telegram/index.js | 36 ++++++++++++------------------------ 5 files changed, 26 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 1153891..f1de8f7 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fff0b33..1b3a3a1 100644 --- a/pnpm-lock.yaml +++ b/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: {} diff --git a/src/components/item.astro b/src/components/item.astro index bb49ece..f7bd399 100644 --- a/src/components/item.astro +++ b/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' diff --git a/src/layouts/base.astro b/src/layouts/base.astro index cd0fdc1..f434601 100644 --- a/src/layouts/base.astro +++ b/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'} /> -