site: handle unknown/missing markdown code block syntax languages

site/src/routes/blog/_posts.js

@@ -1,11 +1,10 @@
 import fs from 'fs';
 import path from 'path';
-import { extract_frontmatter, langs, link_renderer } from '@sveltejs/site-kit/utils/markdown.js';
+import { extract_frontmatter, link_renderer } from '@sveltejs/site-kit/utils/markdown.js';
 import marked from 'marked';
 import { makeSlugProcessor } from '../../utils/slug';
+import { highlight } from '../../utils/highlight';
 import { SLUG_PRESERVE_UNICODE } from '../../../config';
-import PrismJS from 'prismjs';
-import 'prismjs/components/prism-bash';
 
 const makeSlug = makeSlugProcessor(SLUG_PRESERVE_UNICODE);
 
@@ -32,16 +31,7 @@ export default function get_posts() {
 
 			renderer.link = link_renderer;
 
-			renderer.code = (source, lang) => {
+			renderer.code = highlight;
-				const plang = langs[lang];
-				const highlighted = PrismJS.highlight(
-					source,
-					PrismJS.languages[plang],
-					lang,
-				);
-
-				return `<pre class='language-${plang}'><code>${highlighted}</code></pre>`;
-			};
 
 			renderer.heading = (text, level, rawtext) => {
 				const fragment = makeSlug(rawtext);

site/src/routes/docs/_sections.js

@@ -1,11 +1,10 @@
 import fs from 'fs';
 import path from 'path';
 import { SLUG_PRESERVE_UNICODE, SLUG_SEPARATOR } from '../../../config';
-import { extract_frontmatter, extract_metadata, langs, link_renderer } from '@sveltejs/site-kit/utils/markdown.js';
+import { extract_frontmatter, extract_metadata, link_renderer } from '@sveltejs/site-kit/utils/markdown.js';
 import { make_session_slug_processor } from '@sveltejs/site-kit/utils/slug';
+import { highlight } from '../../utils/highlight';
 import marked from 'marked';
-import PrismJS from 'prismjs';
-import 'prismjs/components/prism-bash';
 
 const blockTypes = [
 	'blockquote',
@@ -73,14 +72,7 @@ export default function() {
 
 				if (meta && meta.hidden) return '';
 
-				const plang = langs[lang];
+				const html = `<div class='${className}'>${prefix}${highlight(source, lang)}</div>`;
-				const highlighted = PrismJS.highlight(
-					source,
-					PrismJS.languages[plang],
-					lang
-				);
-
-				const html = `<div class='${className}'>${prefix}<pre class='language-${plang}'><code>${highlighted}</code></pre></div>`;
 
 				if (block_open) {
 					block_open = false;

site/src/routes/tutorial/[slug]/index.json.js

@@ -1,9 +1,9 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import marked from 'marked';
-import PrismJS from 'prismjs';
 import send from '@polka/send';
-import { extract_frontmatter, extract_metadata, langs, link_renderer } from '@sveltejs/site-kit/utils/markdown';
+import { extract_frontmatter, extract_metadata, link_renderer } from '@sveltejs/site-kit/utils/markdown';
+import { highlight } from '../../../utils/highlight';
 
 const cache = new Map();
 
@@ -57,14 +57,7 @@ function get_tutorial(slug) {
 			}
 		}
 
-		const plang = langs[lang];
+		return `<div class='${className}'>${prefix}${highlight(source, lang)}</div>`;
-		const highlighted = PrismJS.highlight(
-			source,
-			PrismJS.languages[plang],
-			lang
-		);
-
-		return `<div class='${className}'>${prefix}<pre class='language-${plang}'><code>${highlighted}</code></pre></div>`;
 	};
 
 	let html = marked(content, { renderer });

site/src/utils/highlight.js

@@ -0,0 +1,14 @@
+import { langs } from '@sveltejs/site-kit/utils/markdown.js';
+import PrismJS from 'prismjs';
+import 'prismjs/components/prism-bash';
+
+export function highlight(source, lang) {
+	const plang = langs[lang] || '';
+	const highlighted = plang ? PrismJS.highlight(
+		source,
+		PrismJS.languages[plang],
+		lang,
+	) : source.replace(/[&<>]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' })[c]);
+
+	return `<pre class='language-${plang}'><code>${highlighted}</code></pre>`;
+}