feat: enable highlighting for json, jsonc, toml, yaml, ini

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 '';

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
 		});
 

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: '',
 	'': ''
 };