astro/packages/astro-prism/component/Prism.astro

---
import Prism from 'prismjs';
import { addAstro } from '../index.mjs';
import loadLanguages from 'prismjs/components/index.js';

export interface Props {
	class?: string;
	lang?: string;
	code: string;
}

const { class: className, lang, code } = Astro.props as Props;

let classLanguage = `language-${lang}`;

const languageMap = new Map([['ts', 'typescript']]);

if (lang == null) {
	console.warn('Prism.astro: No language provided.');
}

const ensureLoaded = (lang) => {
	if (lang && !Prism.languages[lang]) {
		loadLanguages([lang]);
	}
};

if (languageMap.has(lang)) {
	ensureLoaded(languageMap.get(lang));
} else if (lang === 'astro') {
	ensureLoaded('typescript');
	addAstro(Prism);
} else {
	ensureLoaded('markup-templating'); // Prism expects this to exist for a number of other langs
	ensureLoaded(lang);
}

if (lang && !Prism.languages[lang]) {
	console.warn(`Unable to load the language: ${lang}`);
}

const grammar = Prism.languages[lang];
let html = code;
if (grammar) {
	html = Prism.highlight(code, grammar, lang);
}
---

<pre class={[className, classLanguage].join(' ')}><code class={classLanguage}><Fragment set:html={html} /></code></pre>