a tool for shared writing and social publishing
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

handle unbundled themes and languages gracefully

+23 -15
+5 -5
app/lish/[did]/[publication]/[rkey]/PubCodeBlock.tsx
··· 2 2 3 3 import { PubLeafletBlocksCode } from "lexicons/api"; 4 4 import { useLayoutEffect, useState } from "react"; 5 - import { codeToHtml } from "shiki"; 5 + import { codeToHtml, bundledLanguagesInfo, bundledThemesInfo } from "shiki"; 6 6 7 7 export function PubCodeBlock({ 8 8 block, ··· 14 14 const [html, setHTML] = useState<string | null>(prerenderedCode || null); 15 15 16 16 useLayoutEffect(() => { 17 - codeToHtml(block.plaintext, { 18 - lang: block.language || "plaintext", 19 - theme: block.syntaxHighlightingTheme || "github-light", 20 - }).then(setHTML); 17 + const lang = bundledLanguagesInfo.find((l) => l.id === block.language)?.id || "plaintext"; 18 + const theme = bundledThemesInfo.find((t) => t.id === block.syntaxHighlightingTheme)?.id || "github-light"; 19 + 20 + codeToHtml(block.plaintext, { lang, theme }).then(setHTML); 21 21 }, [block]); 22 22 return ( 23 23 <div
+9 -5
app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx
··· 14 14 import { blobRefToSrc } from "src/utils/blobRefToSrc"; 15 15 import { BaseTextBlock } from "./BaseTextBlock"; 16 16 import { StaticMathBlock } from "./StaticMathBlock"; 17 - import { codeToHtml } from "shiki"; 17 + import { codeToHtml, bundledLanguagesInfo, bundledThemesInfo } from "shiki"; 18 18 19 19 export function StaticPostContent({ 20 20 blocks, ··· 62 62 return <StaticMathBlock block={b.block} />; 63 63 } 64 64 case PubLeafletBlocksCode.isMain(b.block): { 65 - let html = await codeToHtml(b.block.plaintext, { 66 - lang: b.block.language || "plaintext", 67 - theme: b.block.syntaxHighlightingTheme || "github-light", 68 - }); 65 + let { language, syntaxHighlightingTheme } = b.block; 66 + const lang = 67 + bundledLanguagesInfo.find((l) => l.id === language)?.id || "plaintext"; 68 + const theme = 69 + bundledThemesInfo.find((t) => t.id === syntaxHighlightingTheme)?.id || 70 + "github-light"; 71 + 72 + let html = await codeToHtml(b.block.plaintext, { lang, theme }); 69 73 return ( 70 74 <div 71 75 className="w-full min-h-[42px] rounded-md border-border-light outline-border-light selected-outline"
+9 -5
app/lish/[did]/[publication]/[rkey]/extractCodeBlocks.ts
··· 3 3 PubLeafletPagesLinearDocument, 4 4 PubLeafletBlocksCode, 5 5 } from "lexicons/api"; 6 - import { codeToHtml } from "shiki"; 6 + import { codeToHtml, bundledLanguagesInfo, bundledThemesInfo } from "shiki"; 7 7 8 8 export async function extractCodeBlocks( 9 9 blocks: PubLeafletPagesLinearDocument.Block[], ··· 17 17 const indexKey = currentIndex.join("."); 18 18 19 19 if (PubLeafletBlocksCode.isMain(block.block)) { 20 - const html = await codeToHtml(block.block.plaintext, { 21 - lang: block.block.language || "plaintext", 22 - theme: block.block.syntaxHighlightingTheme || "github-light", 23 - }); 20 + let { language, syntaxHighlightingTheme } = block.block; 21 + const lang = 22 + bundledLanguagesInfo.find((l) => l.id === language)?.id || "plaintext"; 23 + let theme = 24 + bundledThemesInfo.find((t) => t.id === syntaxHighlightingTheme)?.id || 25 + "github-light"; 26 + 27 + const html = await codeToHtml(block.block.plaintext, { lang, theme }); 24 28 codeBlocks.set(indexKey, html); 25 29 } 26 30 }