a tool for shared writing and social publishing
handle unbundled themes and languages gracefully
+23
-15
+5
-5
app/lish/[did]/[publication]/[rkey]/PubCodeBlock.tsx
+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
+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
+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
}