From c9756dd196578cc2b9fe5e12a36ce87e4cf186f4 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Sat, 12 Oct 2019 07:32:53 -0400
Subject: [PATCH] site: handle unknown/missing markdown code block syntax
 languages

---
 site/src/routes/blog/_posts.js                | 16 +++-------------
 site/src/routes/docs/_sections.js             | 14 +++-----------
 site/src/routes/tutorial/[slug]/index.json.js | 13 +++----------
 site/src/utils/highlight.js                   | 14 ++++++++++++++
 4 files changed, 23 insertions(+), 34 deletions(-)
 create mode 100644 site/src/utils/highlight.js

diff --git a/site/src/routes/blog/_posts.js b/site/src/routes/blog/_posts.js
index d180ebd35e..2c86e13656 100644
--- a/site/src/routes/blog/_posts.js
+++ b/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) => {
-				const plang = langs[lang];
-				const highlighted = PrismJS.highlight(
-					source,
-					PrismJS.languages[plang],
-					lang,
-				);
-
-				return `<pre class='language-${plang}'><code>${highlighted}</code></pre>`;
-			};
+			renderer.code = highlight;
 
 			renderer.heading = (text, level, rawtext) => {
 				const fragment = makeSlug(rawtext);
diff --git a/site/src/routes/docs/_sections.js b/site/src/routes/docs/_sections.js
index 35edc16cfa..bb081a050b 100644
--- a/site/src/routes/docs/_sections.js
+++ b/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 highlighted = PrismJS.highlight(
-					source,
-					PrismJS.languages[plang],
-					lang
-				);
-
-				const html = `<div class='${className}'>${prefix}<pre class='language-${plang}'><code>${highlighted}</code></pre></div>`;
+				const html = `<div class='${className}'>${prefix}${highlight(source, lang)}</div>`;
 
 				if (block_open) {
 					block_open = false;
diff --git a/site/src/routes/tutorial/[slug]/index.json.js b/site/src/routes/tutorial/[slug]/index.json.js
index 291760bc6b..26f5d54b31 100644
--- a/site/src/routes/tutorial/[slug]/index.json.js
+++ b/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];
-		const highlighted = PrismJS.highlight(
-			source,
-			PrismJS.languages[plang],
-			lang
-		);
-
-		return `<div class='${className}'>${prefix}<pre class='language-${plang}'><code>${highlighted}</code></pre></div>`;
+		return `<div class='${className}'>${prefix}${highlight(source, lang)}</div>`;
 	};
 
 	let html = marked(content, { renderer });
diff --git a/site/src/utils/highlight.js b/site/src/utils/highlight.js
new file mode 100644
index 0000000000..d8be46b3a6
--- /dev/null
+++ b/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>`;
+}