diff --git a/clients/web/src/components/sources/source-pane.tsx b/clients/web/src/components/sources/source-pane.tsx index 5fb514c9..a8de479f 100644 --- a/clients/web/src/components/sources/source-pane.tsx +++ b/clients/web/src/components/sources/source-pane.tsx @@ -5,7 +5,7 @@ import { useParams, useSearchParams } from "@solidjs/router"; import { decodeFileName, guessContentType } from "~/lib/sources/file-entries"; import CodeView from "./code-view"; import { Loader } from "~/components/loader"; -import { HighlighterLang } from "~/lib/code-highlight"; +import type { SupportedLanguages } from "~/lib/code-highlight"; import { Heading } from "../heading"; import { useLocation } from "@solidjs/router"; @@ -15,7 +15,7 @@ export function SourcePane() { const [searchParams] = useSearchParams(); const contentType = () => guessContentType(filePath()); - const sizeHint = () => parseInt(searchParams.sizeHint); + const sizeHint = () => parseInt(searchParams.sizeHint ?? "0"); const location = useLocation(); @@ -46,7 +46,7 @@ export function SourcePane() { resolvedContentType().replace( "code/", "", - ) as HighlighterLang + ) as SupportedLanguages } highlightedLine={highlightedLine()} /> diff --git a/clients/web/src/lib/code-highlight.ts b/clients/web/src/lib/code-highlight.ts index e93a363d..ce63dd2a 100644 --- a/clients/web/src/lib/code-highlight.ts +++ b/clients/web/src/lib/code-highlight.ts @@ -1,8 +1,8 @@ import { BundledTheme, CodeToHastOptions, - Highlighter, getHighlighter, + Highlighter, } from "shiki"; import { transformerCompactLineOptions } from "@shikijs/transformers"; import { type BundledLanguage } from "shiki/langs"; @@ -10,23 +10,31 @@ import { SourcesClient } from "~/lib/proto/sources.client"; import { getEntryBytes } from "~/lib/sources/file-entries"; type HighlighterCodeParamsForSources = Readonly< - [string, Highlighter, BundledLanguage, number?] + [string, Highlighter, SupportedLanguages, number?] >; type HighlighterCodeParamsForSpans = Readonly<{ - lang: BundledLanguage; + lang: SupportedLanguages; highlighter: Highlighter; }>; +export type AvailableLanguages = BundledLanguage | "text"; + export const SUPPORTED_LANGS = [ "js", + "jsx", + "ts", + "tsx", + "typescript", + "javascript", "rust", "toml", "html", "json", "md", "yaml", -] satisfies BundledLanguage[]; + "text", +] satisfies AvailableLanguages[]; export type SupportedLanguages = (typeof SUPPORTED_LANGS)[number]; @@ -39,12 +47,15 @@ export function bytesToText(bytes: Uint8Array | undefined): string { export function textToHtml( text: string, highlighter: Highlighter | undefined, - lang: BundledLanguage, + lang: SupportedLanguages, highlightedLine?: number, ) { if (!highlighter) return ""; - const options: CodeToHastOptions = { + if (!SUPPORTED_LANGS.find((supportedLang) => supportedLang === lang)) + lang = "text"; + + const options: CodeToHastOptions = { lang, theme: "material-theme-ocean", }; @@ -92,7 +103,10 @@ export function getHighlightedCode( if ("lang" in arg) { const { lang } = arg; return (code: string) => - highlighter.codeToHtml(code, { lang, theme: "material-theme-ocean" }); + highlighter.codeToHtml(code, { + lang, + theme: "material-theme-ocean", + }); } const [text, highlighter, lang, highlightedLine] = arg; diff --git a/clients/web/src/lib/sources/file-entries.ts b/clients/web/src/lib/sources/file-entries.ts index f09954e1..e1e5e25c 100644 --- a/clients/web/src/lib/sources/file-entries.ts +++ b/clients/web/src/lib/sources/file-entries.ts @@ -114,16 +114,17 @@ export function guessContentType(path: string): string | undefined { return { rs: "code/rust", + txt: "code/txt", toml: "code/toml", lock: "code/toml", - js: "code/javascript", - jsx: "code/javascript", - ts: "code/typescript", - tsx: "code/typescript", + js: "code/js", + jsx: "code/jsx", + ts: "code/ts", + tsx: "code/tsx", json: "code/json", html: "code/html", css: "code/css", - md: "code/markdown", + md: "code/md", yml: "code/yaml", yaml: "code/yaml",