diff --git a/packages/site-kit/src/lib/markdown/preprocess.ts b/packages/site-kit/src/lib/markdown/preprocess.ts index 4d9eded6c..8a5db12cd 100644 --- a/packages/site-kit/src/lib/markdown/preprocess.ts +++ b/packages/site-kit/src/lib/markdown/preprocess.ts @@ -245,7 +245,7 @@ function stringify_expanded_type(type: Declaration) { } /** - * Helper function for {@link replace_export_type_placeholders}. Renders specifiv members to their markdown/html representation. + * Helper function for {@link replace_export_type_placeholders}. Renders specific members to their markdown/html representation. */ function stringify(member: TypeElement, lang: keyof typeof SHIKI_LANGUAGE_MAP = 'ts'): string { if (!member) return ''; diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts index aaafcdfbe..96811bee0 100644 --- a/packages/site-kit/src/lib/markdown/renderer.ts +++ b/packages/site-kit/src/lib/markdown/renderer.ts @@ -54,6 +54,8 @@ const highlighter = await createHighlighterCore({ import('@shikijs/langs/css'), import('@shikijs/langs/bash'), import('@shikijs/langs/yaml'), + import('@shikijs/langs/toml'), + import('@shikijs/langs/ini'), import('@shikijs/langs/svelte') ], engine: createOnigurumaEngine(import('shiki/wasm')) @@ -860,7 +862,10 @@ async function syntax_highlight({ html = replace_blank_lines(html); } else { const highlighted = highlighter.codeToHtml(source, { - lang: SHIKI_LANGUAGE_MAP[language as keyof typeof SHIKI_LANGUAGE_MAP], + // fallback to passing the language as is if it doesn't exist in our map + // this ensures we get an error if we're using an unsupported language + // rather than silently not highlighting the code block as expected + lang: SHIKI_LANGUAGE_MAP[language as keyof typeof SHIKI_LANGUAGE_MAP] ?? language, theme }); diff --git a/packages/site-kit/src/lib/markdown/utils.ts b/packages/site-kit/src/lib/markdown/utils.ts index 559d50745..4d50ece27 100644 --- a/packages/site-kit/src/lib/markdown/utils.ts +++ b/packages/site-kit/src/lib/markdown/utils.ts @@ -1,16 +1,28 @@ import { Marked, type Renderer, type TokenizerObject, type MarkedExtension } from 'marked'; import json5 from 'json5'; +// also includes languages not recognised or aliased by Shiki +// see https://shiki.style/languages export const SHIKI_LANGUAGE_MAP = { bash: 'bash', + sh: 'bash', env: 'bash', html: 'svelte', svelte: 'svelte', sv: 'svelte', - js: 'javascript', - dts: 'typescript', css: 'css', + js: 'js', + json: 'javascript', + jsonc: 'javascript', ts: 'typescript', + dts: 'typescript', + toml: 'toml', + yaml: 'yaml', + yml: 'yaml', + ini: 'ini', + cson: '', + // TODO: find a highlighter for tree syntax + tree: '', '': '' };