feat: configure syntax highlighting

2025-09-30 21:01:26 +02:00
parent 2a1572f99d
commit c2179c6d22
8 changed files with 72 additions and 11 deletions
--- a/playground/package.json
+++ b/playground/package.json
@@ -45,9 +45,13 @@
    "@codemirror/lang-javascript": "^6.2.4",
    "@codemirror/lang-json": "^6.0.2",
    "@codemirror/lang-markdown": "^6.3.4",
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@codemirror/language": "^6.11.3",
    "@codemirror/state": "^6.5.2",
    "@codemirror/view": "^6.38.3",
+    "@fsegurai/codemirror-theme-github-light": "^6.2.2",
    "codemirror": "^6.0.2",
+    "codemirror-theme-github": "^1.1.0",
    "lucide-svelte": "^0.544.0",
    "svelte-codemirror-editor": "^2.0.0"
  }
--- a/playground/pnpm-lock.yaml
+++ b/playground/pnpm-lock.yaml
@@ -17,15 +17,27 @@ importers:
      '@codemirror/lang-markdown':
        specifier: ^6.3.4
        version: 6.3.4
+      '@codemirror/lang-yaml':
+        specifier: ^6.1.2
+        version: 6.1.2
+      '@codemirror/language':
+        specifier: ^6.11.3
+        version: 6.11.3
      '@codemirror/state':
        specifier: ^6.5.2
        version: 6.5.2
      '@codemirror/view':
        specifier: ^6.38.3
        version: 6.38.3
+      '@fsegurai/codemirror-theme-github-light':
+        specifier: ^6.2.2
+        version: 6.2.2(@codemirror/language@6.11.3)(@codemirror/state@6.5.2)(@codemirror/view@6.38.3)(@lezer/highlight@1.2.1)
      codemirror:
        specifier: ^6.0.2
        version: 6.0.2
+      codemirror-theme-github:
+        specifier: ^1.1.0
+        version: 1.1.0
      lucide-svelte:
        specifier: ^0.544.0
        version: 0.544.0(svelte@5.39.6)
@@ -120,6 +132,9 @@ packages:
  '@codemirror/lang-markdown@6.3.4':
    resolution: {integrity: sha512-fBm0BO03azXnTAsxhONDYHi/qWSI+uSEIpzKM7h/bkIc9fHnFp9y7KTMXKON0teNT97pFhc1a9DQTtWBYEZ7ug==}

+  '@codemirror/lang-yaml@6.1.2':
+    resolution: {integrity: sha512-dxrfG8w5Ce/QbT7YID7mWZFKhdhsaTNOYjOkSIMt1qmC4VQnXSDSYVHHHn8k6kJUfIhtLo8t1JJgltlxWdsITw==}
+
  '@codemirror/language@6.11.3':
    resolution: {integrity: sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==}

@@ -342,6 +357,14 @@ packages:
    resolution: {integrity: sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

+  '@fsegurai/codemirror-theme-github-light@6.2.2':
+    resolution: {integrity: sha512-YQr5MbhMlhRlAQcSCSbet4NDDkMvd5sbUyk9JmM0vfZhQbatvw4c56gNG/54JKGM0kWY5zRWzgLtFuz6D7yEsw==}
+    peerDependencies:
+      '@codemirror/language': ^6.0.0
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.0.0
+      '@lezer/highlight': ^1.0.0
+
  '@humanfs/core@0.19.1':
    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
    engines: {node: '>=18.18.0'}
@@ -402,6 +425,9 @@ packages:
  '@lezer/markdown@1.4.3':
    resolution: {integrity: sha512-kfw+2uMrQ/wy/+ONfrH83OkdFNM0ye5Xq96cLlaCy7h5UT9FO54DU4oRoIc0CSBh5NWmWuiIJA7NGLMJbQ+Oxg==}

+  '@lezer/yaml@1.0.3':
+    resolution: {integrity: sha512-GuBLekbw9jDBDhGur82nuwkxKQ+a3W5H0GfaAthDXcAu+XdpS43VlnxA9E9hllkpSP5ellRDKjLLj7Lu9Wr6xA==}
+
  '@marijn/find-cluster-break@1.0.2':
    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}

@@ -798,6 +824,9 @@ packages:
    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
    engines: {node: '>=6'}

+  codemirror-theme-github@1.1.0:
+    resolution: {integrity: sha512-05qv2eBNdrLvkXx6gdW4IFnRQN0NbUOew8/x4/B62I5UfnIDaPUnoGzqQUluwsBhWTMM7EpFSXSPNCqvcwB89g==}
+
  codemirror@6.0.2:
    resolution: {integrity: sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==}

@@ -1621,6 +1650,16 @@ snapshots:
      '@lezer/common': 1.2.3
      '@lezer/markdown': 1.4.3

+  '@codemirror/lang-yaml@6.1.2':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.7
+      '@codemirror/language': 6.11.3
+      '@codemirror/state': 6.5.2
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+      '@lezer/yaml': 1.0.3
+
  '@codemirror/language@6.11.3':
    dependencies:
      '@codemirror/state': 6.5.2
@@ -1785,6 +1824,13 @@ snapshots:
      '@eslint/core': 0.15.2
      levn: 0.4.1

+  '@fsegurai/codemirror-theme-github-light@6.2.2(@codemirror/language@6.11.3)(@codemirror/state@6.5.2)(@codemirror/view@6.38.3)(@lezer/highlight@1.2.1)':
+    dependencies:
+      '@codemirror/language': 6.11.3
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.38.3
+      '@lezer/highlight': 1.2.1
+
  '@humanfs/core@0.19.1': {}

  '@humanfs/node@0.16.7':
@@ -1858,6 +1904,12 @@ snapshots:
      '@lezer/common': 1.2.3
      '@lezer/highlight': 1.2.1

+  '@lezer/yaml@1.0.3':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
  '@marijn/find-cluster-break@1.0.2': {}

  '@nodelib/fs.scandir@2.1.5':
@@ -2221,6 +2273,8 @@ snapshots:

  clsx@2.1.1: {}

+  codemirror-theme-github@1.1.0: {}
+
  codemirror@6.0.2:
    dependencies:
      '@codemirror/autocomplete': 6.18.7
--- a/playground/src/app.css
+++ b/playground/src/app.css
@@ -1 +1,6 @@
@import 'tailwindcss';
+
+
+.cm-foldGutter + .cm-foldGutter {
+  display: none !important;
+}
--- a/playground/src/lib/components/EditorPanel.svelte
+++ b/playground/src/lib/components/EditorPanel.svelte
@@ -3,6 +3,7 @@
 	import MinusCircleIcon from '$lib/icons/MinusCircleIcon.svelte';
 	import XCircleIcon from '$lib/icons/XCircleIcon.svelte';
 	import type { Extension } from '@codemirror/state';
+	import { githubLight } from '@fsegurai/codemirror-theme-github-light';
 	import { basicSetup } from 'codemirror';
 	import type { Snippet } from 'svelte';
 	import CodeMirror from 'svelte-codemirror-editor';
@@ -48,7 +49,7 @@
 			<MinusCircleIcon class="mr-2 h-5 w-5 text-gray-400" />
 		{/if}
 		<div class="flex-1">
-			<h2 class="flex items-center text-sm font-semibold uppercase tracking-wide text-gray-900">
+			<h2 class="flex items-center text-sm font-semibold tracking-wide text-gray-900 uppercase">
 				{title}
 				{#if pillText}
 					<span
@@ -81,6 +82,7 @@
 	<CodeMirror
 		bind:value
 		extensions={[basicSetup, langExtension].filter(Boolean) as Extension[]}
+		theme={githubLight}
 		{placeholder}
 		{readonly}
 		class="text-sm"
--- a/playground/src/lib/components/Playground.svelte
+++ b/playground/src/lib/components/Playground.svelte
@@ -92,7 +92,6 @@ My favourite baguette recipe
 			const result = templateValue
 				? parseMarkdownWithTemplate(markdownValue, templateValue)
 				: parseMarkdown(markdownValue);
-			console.log({ result });

 			if ('error' in result) {
 				jsonOutput = '';
@@ -107,12 +106,13 @@ My favourite baguette recipe
 				}
 			} else {
 				templateError = undefined;
-				jsonOutput = JSON.stringify(result.data, null, 2);
+				jsonOutput = JSON.stringify(result, null, 2);
 				timings = result.timings;
 				templateStatus = 'success';
 				dataStatus = 'success';
 			}
 		} catch (e: unknown) {
+			console.log({ e });
 			jsonOutput = (e as Error).message;
 			timings = null;
 			if (jsonOutput.startsWith('failed to compile template')) {
@@ -154,7 +154,7 @@ My favourite baguette recipe
 			{#snippet headerActions()}
 				<select
 					onchange={(e) => loadTemplate(e.currentTarget.value)}
-					class="rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+					class="rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 shadow-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none"
 				>
 					<option value="">Load a template</option>
 					{#each templates as template (template)}
@@ -175,7 +175,7 @@ My favourite baguette recipe
 			{#snippet headerActions()}
 				<button
 					onclick={resetMarkdown}
-					class="rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+					class="rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 shadow-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none"
 				>
 					Reset
 				</button>
--- a/playground/static/main.wasm
+++ b/playground/static/main.wasm
--- a/playground/vite.config.ts
+++ b/playground/vite.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
    exclude: [
      "svelte-codemirror-editor",
      "codemirror",
-      "@codemirror/language-javascript", /* ... */
+      "@codemirror/language",
    ],
  },
 });
--- a/playground/wasm/build.sh
+++ b/playground/wasm/build.sh
@@ -8,15 +8,11 @@ OUT_WASM="$OUT_DIR/main.wasm"
 mkdir -p "$OUT_DIR"

 tinygo build -target=wasm \
-  -opt=z -no-debug -panic=print -gc=leaking \
+  -no-debug -panic=print -gc=leaking \
  -o "$OUT_WASM" "$SCRIPT_DIR"

-# Optional post-process (run only if tools exist)
 command -v wasm-opt >/dev/null && wasm-opt -Oz --strip-debug --strip-dwarf --strip-producers \
  -o "$OUT_WASM.tmp" "$OUT_WASM" && mv "$OUT_WASM.tmp" "$OUT_WASM"
 # command -v wasm-strip >/dev/null && wasm-strip "$OUT_WASM"
-# command -v brotli    >/dev/null && brotli -f -q 11 "$OUT_WASM" -o "$OUT_WASM.br"
-# command -v gzip      >/dev/null && gzip -c -9 "$OUT_WASM" > "$OUT_WASM.gz"

-# Copy TinyGo runtime
 cp -f "$(tinygo env TINYGOROOT)/targets/wasm_exec.js" "$OUT_DIR/wasm_exec.js"