Merge pull request #36 from pierrenel/feature/code_highlight

feat: code highlighting
This commit is contained in:
面条
2024-08-11 09:57:08 +08:00
committed by GitHub
3 changed files with 33 additions and 0 deletions

View File

@@ -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": {

View File

@@ -57,6 +57,10 @@ 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 */

View File

@@ -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