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

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 the 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,17 +1,17 @@
 import { Marked, type Renderer, type TokenizerObject, type MarkedExtension } from 'marked';
 import json5 from 'json5';
 
+// we only need this map for languages not recognised or aliased by Shiki
+// see https://shiki.style/languages
 export const SHIKI_LANGUAGE_MAP = {
-	bash: 'bash',
 	env: 'bash',
 	html: 'svelte',
-	svelte: 'svelte',
 	sv: 'svelte',
-	js: 'javascript',
+	json: 'javascript',
+	jsonc: 'javascript',
 	dts: 'typescript',
-	css: 'css',
-	ts: 'typescript',
-	'': ''
+	// TODO: find a highlighter for tree syntax
+	tree: '',
 };
 
 /**