syntax highlighting - closes #4

Author: Rich-Harris

package.json

@@ -26,6 +26,8 @@
 	"dependencies": {
 		"marked": "^4.0.15",
 		"monaco-editor": "^0.33.0",
+		"prism-svelte": "^0.5.0",
+		"prismjs": "^1.28.0",
 		"ws": "^8.6.0"
 	},
 	"pnpm": {

pnpm-lock.yaml

@@ -1,6 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import { marked } from 'marked';
+import { transform } from './markdown.js';
 
 const text_files = new Set([
 	'.svelte',
@@ -106,7 +106,7 @@ export function get_section(slug) {
 					slug: section.slug,
 					prev: section.prev,
 					next: section.next,
-					html: marked(section.markdown), // TODO syntax highlighting
+					html: transform(section.markdown), // TODO syntax highlighting
 					a,
 					b
 				};

src/lib/client/viewer/Viewer.svelte

@@ -0,0 +1,100 @@
+import PrismJS from 'prismjs';
+import 'prismjs/components/prism-bash.js';
+import 'prismjs/components/prism-diff.js';
+import 'prismjs/components/prism-typescript.js';
+import 'prism-svelte';
+import { marked } from 'marked';
+
+const languages = {
+	bash: 'bash',
+	env: 'bash',
+	html: 'markup',
+	svelte: 'svelte',
+	js: 'javascript',
+	css: 'css',
+	diff: 'diff',
+	ts: 'typescript',
+	'': ''
+};
+
+marked.use({
+	renderer: {
+		code: (source, language, current) => {
+			/** @type {Record<string, string>} */
+			const options = {};
+
+			let html = '';
+
+			source = source
+				.replace(/\/\/\/ (.+?): (.+)\n/gm, (match, key, value) => {
+					options[key] = value;
+					return '';
+				})
+				.replace(/^([\-\+])?((?:    )+)/gm, (match, prefix = '', spaces) => {
+					if (prefix && language !== 'diff') return match;
+
+					// for no good reason at all, marked replaces tabs with spaces
+					let tabs = '';
+					for (let i = 0; i < spaces.length; i += 4) {
+						tabs += '  ';
+					}
+					return prefix + tabs;
+				})
+				.replace(/\*\\\//g, '*/');
+
+			if (language === 'diff') {
+				const lines = source.split('\n').map((content) => {
+					let type = null;
+					if (/^[\+\-]/.test(content)) {
+						type = content[0] === '+' ? 'inserted' : 'deleted';
+						content = content.slice(1);
+					}
+
+					return {
+						type,
+						content
+					};
+				});
+
+				html = `<div class="code-block"><pre class="language-diff"><code>${lines
+					.map((line) => {
+						if (line.type) return `<span class="${line.type}">${line.content}\n</span>`;
+						return line.content + '\n';
+					})
+					.join('')}</code></pre></div>`;
+			} else {
+				const plang = languages[language];
+				const highlighted = plang
+					? PrismJS.highlight(source, PrismJS.languages[plang], language)
+					: source.replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]));
+
+				html = `<div class="code-block">${
+					options.file ? `<h5>${options.file}</h5>` : ''
+				}<pre class='language-${plang}'><code>${highlighted}</code></pre></div>`;
+			}
+
+			return html.replace(
+				/^(\s+)<span class="token comment">([\s\S]+?)<\/span>\n/gm,
+				(match, intro_whitespace, content) => {
+					// we use some CSS trickery to make comments break onto multiple lines while preserving indentation
+					const lines = (intro_whitespace + content).split('\n');
+					return lines
+						.map((line) => {
+							const match = /^(\s*)(.*)/.exec(line);
+							const indent = (match[1] ?? '').replace(/\t/g, '  ').length;
+
+							return `<span class="token comment wrapped" style="--indent: ${indent}ch">${
+								line ?? ''
+							}</span>`;
+						})
+						.join('');
+				}
+			);
+		}
+	}
+});
+
+/** @param {string} markdown */
+export function transform(markdown) {
+	return marked(markdown);
+}

src/lib/server/content.js

@@ -12,6 +12,7 @@
 
 <script>
 	import '@sveltejs/site-kit/base.css';
+	import '@sveltejs/site-kit/code.css';
 	import { page, navigating } from '$app/stores';
 	import { Icon, Icons, Nav, NavItem, SkipLink } from '@sveltejs/site-kit';
 	import PreloadingIndicator from '$lib/components/PreloadingIndicator.svelte';

src/lib/server/markdown.js

@@ -15,7 +15,11 @@
 	let h = 0;
 
 	onMount(() => {
-		editor = monaco.editor.create(container);
+		editor = monaco.editor.create(container, {
+			minimap: {
+				enabled: false
+			}
+		});
 
 		return () => {
 			editor.dispose();

src/routes/__layout.svelte

@@ -13,12 +13,10 @@
 
 <style>
 	button {
-		/* padding: 0 0 0 1.5em; */
-		/* background: 0 0.1em no-repeat; */
-		/* background-size: 1em 1em; */
 		padding: 0 0 0 0.2em;
 		font-size: 1.6rem;
 		font-family: inherit;
+		color: var(--text);
 	}
 
 	button.selected {

src/lib/client/viewer/Editor.svelte renamed to src/routes/tutorial/[slug]/_/Editor.svelte

@@ -29,7 +29,7 @@
 	}
 </script>
 
-<span class:expanded on:click={toggle}>{name}</span>
+<button class:expanded on:click={toggle}>{name}</button>
 
 {#if expanded}
 	<ul>
@@ -53,13 +53,14 @@
 {/if}
 
 <style>
-	span {
+	button {
+		font-size: 1.6rem;
+		font-family: inherit;
+		color: var(--text);
 		padding: 0 0 0 1.2em;
 		background: url(/tutorial/icons/folder.svg) 0 0.25rem no-repeat;
 		background-size: 1.4rem 1.4rem;
-		font-size: 1.6rem;
 		user-select: none;
-		/* font-weight: bold; */
 		cursor: pointer;
 	}